[WSO2 App Manager] How to Add a Custom Radio Button 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 custom radio button field to webapp create page. Say the custom radio button field name is "App Category".

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" required="true">  
     <name>App Category</name>  
   </field>  
   

Note : If you don't want add the custom field as mandatory, required="true" part is not necessary.
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 Category: </label>  
     <div class="col-sm-10">  
       <div class="radio">  
         <label>  
           <input type="radio" data-value="free" class="appCategoryRadio" name="appCategoryRadio">  
           Free  
         </label>  
       </div>  
       <div class="radio">  
         <label>  
           <input type="radio" data-value="premium" class="appCategoryRadio" name="appCategoryRadio">  
             Premium  
          </label>  
        </div>  
      </div>  
   </div>  
   
   <input type="hidden" class="col-lg-6 col-sm-12 col-xs-12" name="overview_appCategory"  
           id="overview_appCategory">  
   

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 Category: </label>  
     <div class="col-sm-10">  
       <div class="radio">  
         <label>  
           <input type="radio" data-value="free" class="appCategoryRadio" name="appCategoryRadio">  
             Free  
         </label>  
       </div>  
       <div class="radio">  
         <label>  
           <input type="radio" data-value="premium" class="appCategoryRadio" name="appCategoryRadio">  
             Premium  
         </label>  
       </div>  
     </div>  
   </div>  
    
   <input type="hidden"  
         value="{{{snoop "fields(name=overview_appCategory).value" data}}}"  
         class="col-lg-6 col-sm-12 col-xs-12" name="overview_appCategory"  
         id="overview_appCategory">  
   

5. To save selected radio button 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

   
   $(".appCategoryRadio").click(function(){  
     var output = [];  
     $( ".appCategoryRadio" ).each(function( index ) {  
       var categoryValue = $(this).data('value');  
       if( $(this).is(':checked')){  
         output.push(categoryValue);  
       }  
     });  
     $('#overview_appCategory').val(output);  
   });  
   

6. To preview the selected radio button 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.

   
   $(".appCategoryRadio").click(function(){  
     var output = [];  
     $( ".appCategoryRadio" ).each(function( index ) {  
       var categoryValue = $(this).data('value');  
       if( $(this).is(':checked')){  
         output.push(categoryValue);  
       }  
     });  
     $('#overview_appCategory').val(output);  
   
   
   });  
   
   var appCategoryValue = $('#overview_appCategory').val().split(',');  
   $( ".appCategoryRadio" ).each(function( index ) {  
     var value = $(this).data('value');  
     if($.inArray(value, appCategoryValue) >= 0){  
       $(this).prop('checked', true);  
     }  
   });  
   

7. When you create a new version of an existing webapp, to copy the selected radio button 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_appCategory).value" data}}}" name="overview_appCategory" id="overview_appCategory"/>  
   

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_appCategory"}  
       ]  
   }  
   

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