Monday, November 7, 2016

[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.
  2.    
       <field type = "text">  
           <name label = "App Network Type">App Network Type</name>  
       </field>  
       
    
  3. Login to Management console and navigate to Home > Extensions > Configure > Artifact Types and delete "webapp.rxt"
  4. Add below code snippet to the required place of <APPM_HOME>repository/deployment/server/jageeryapps/publisher/themes/appm/partials/add-asset.hbs
  5.    
     <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>  
       
    
  6. Add below code snippet to <APPM_HOME>/repository/deployment/server/jaggeryapps/publisher/themes/appm/partials/edit-asset.hbs.
  7.    
     <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>  
       
    
  8. 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
  9.    
     $("#appNetworkType").change(function() {  
       var selectedNetworkType = $('#appNetworkType').find(":selected").text();  
       $('#overview_appNetworkType').val(selectedNetworkType);  
     });  
       
    
  10. 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.
  11.    
     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);  
     });  
       
    
  12. 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
  13.    
     <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.
  14. 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.
  15.    
     {   
        "customPropertyDefinitions":   
         [   
          {"name" : "overview_appNetworkType"}   
         ]   
      }   
       
    
  16. Restart App Manager.
  17. Web app create page with the newly added dropdown field will be shown as below. 

No comments:

Post a Comment