[WSO2 App Manager] How to Add a Custom Checkbox to a Webapp

WSO2 App Manager supports users to customize the server as they need. Here, I'm going to talk about how to add a custom checkbox to webapp create page.

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

For example,  let's take the checkbox attribute name as “Free App”.

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

   
   <field type="text">  
     <name label="Free App">Free App</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">Free App: </label>  
       <div class="col-sm-10 checkbox-div">  
         <input type="checkbox" class="freeApp_checkbox">  
       </div>  
   </div>  
   
   <input type="hidden" required="" value="FALSE" class="col-lg-6 col-sm-12 col-xs-12" name="overview_freeApp" id="overview_freeApp">  
   

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

   
   <div class="form-group">  
     <label class="control-label col-sm-2">Free App: </label>  
     <div class="col-sm-10 checkbox-div">  
       <input type="checkbox" class="freeApp_checkbox" value="{{{snoop "fields(name=overview_freeApp).value" data}}}">  
     </div>  
   </div>  
   
   <input type="hidden" required="" value="{{{snoop "fields(name=overview_freeApp).value" data}}}"  
    class="col-lg-6 col-sm-12 col-xs-12" name="overview_freeApp" id="overview_freeApp">  
   

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

   
   $(".freeApp_checkbox").click(function(){  
     var output = [];  
     $( ".freeApp_checkbox" ).each(function( index ) {  
       if( $(this).is(':checked')){  
         output.push("TRUE");  
       } else {  
         output.push("FALSE");  
      }  
     });  
     $('#overview_freeApp').val(output);  
   });  
   

6. To preview check box 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 freeAppValue = $('#overview_freeApp').val();  
   $(".freeApp_checkbox").each(function (index) {  
     if (freeAppValue == "TRUE") {  
       $(this).prop('checked', true);  
     } else {  
       $(this).prop('checked', false);  
     }  
   });  
   
   $(".freeApp_checkbox").click(function(){  
     var output = [];  
     $( ".freeApp_checkbox" ).each(function( index ) {  
       if( $(this).is(':checked')){  
         output.push("TRUE");  
       } else {  
         output.push("FALSE");  
       }  
     });  
     
     $('#overview_freeApp').val(output);  
   });  
   

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

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

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