[WSO2 App Manager] How to Add a Custom Dropdown Field to a Webapp

In WSO2 App Manager, when you create a new web app, you have to fill a set of predefined values. If you want to add any custom fields to an app, you can easily do it.

Suppose you want to add a custom dropdown field to webapp create page. Say the custom dropdown field name is "App Network Type". 

First, Let's see how to add a custom field to UI (Jaggery APIs).

1. Modify <APPM_HOME>/repository/resources/rxt/webapp.rxt.

   
   <field type = "text">  
       <name label = "App Network Type">App Network Type</name>  
   </field>  
   

2. Login to Management console and navigate to Home > Extensions > Configure > Artifact Types and delete "webapp.rxt"
3. Add below code snippet to the required place of <APPM_HOME>repository/deployment/server/jageeryapps/publisher/themes/appm/partials/add-asset.hbs

   
 <div class="form-group">  
   <label class = "control-label col-sm-2">App Network Type : </label>  
   <div class = "col-sm-10">  
     <select id = "appNetworkType" class = "col-lg-6 col-sm-12 col-xs-12">  
       <option value = "None">None</option>  
       <option value = "Online">Online</option>  
       <option value = "Offline">Offline</option>  
     </select>  
   </div>  
   <input type = "hidden" required = "" class = "col-lg-6 col-sm-12 col-xs-12" name = "overview_appNetworkType"  
       id = "overview_appNetworkType">  
 </div>  
   

4. Add below code snippet to <APPM_HOME>/repository/deployment/server/jaggeryapps/publisher/themes/appm/partials/edit-asset.hbs.

   
 <div class = "form-group">  
   <label class = "control-label col-sm-2">App Network Type : </label>  
   <div class = "col-sm-10">  
     <select id = "appNetworkType" class = "col-lg-6 col-sm-12 col-xs-12">  
       <option value = "None">None</option>  
       <option value = "Online">Online</option>  
       <option value = "Offline">Offline</option>  
     </select>  
   </div>  
   
   <input type='hidden' value="{{{snoop "fields(name=overview_appNetworkType).value" data}}}"  
   name="overview_appNetworkType" id="overview_appNetworkType"/>  
 </div>  
   

5. To save selected value in registry, you need to add below function inside $(document ).ready(function() {} of <APPM_HOME>/repository/deployment/server/jaggeryapps/publisher/themes/appm/js/resource-add.js

   
 $("#appNetworkType").change(function() {  
   var selectedNetworkType = $('#appNetworkType').find(":selected").text();  
   $('#overview_appNetworkType').val(selectedNetworkType);  
 });  
   

6. To preview the selected dropdown field value in app edit page, add below code snippet inside $(document ).ready(function() {} of  <APPM_HOME>/repository/deployment/server/jaggeryapps/publisher/themes/appm/js/resource-edit.js.

   
 var selectedNetworkType = $('#overview_appNetworkType').val();  
 $( "#appNetworkType" ).each(function( index ) {  
   $(this).val(selectedNetworkType);  
 });  
   
 $("#appNetworkType").change(function() {  
   var selectedNetworkType = $('#appNetworkType').find(":selected").text();  
   $('#overview_appNetworkType').val(selectedNetworkType);  
 });  
   

7. When you create a new version of an existing webapp, to copy the selected dropdown value to the new version, add below line to
   <APPM_HOME>/repository/deployment/server/jaggeryapps/publisher/themes/appm/partials/copy-app.hbs

   
 <input type='text' value= "{{{snoop "fields(name=overview_appNetworkType).value" data}}}" name = "overview_appNetworkType" id = "overview_appNetworkType"/>   
   



Now, Let's see how to add customized fields to the REST APIs.

8. Go to Main -> Browse -> in Management console and navigate to   /_system/governance/appmgt/applicationdata/custom-property-definitions/webapp.json and click on "Edit As Text". Add the custom fields which you want to add.

   
 {   
    "customPropertyDefinitions":   
     [   
      {"name" : "overview_appNetworkType"}   
     ]   
  }   
   

9. Restart App Manager.
10. Web app create page with the newly added dropdown field will be shown as below.