[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. 

[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.

How to Change WSO2 App Manager Store and Webapp Favicons

If you want to use WSO2 App Manager as the app store of your organization, it is very important to know how to replace default favicon of WSO2 App Manager by your organization logo. Here are the steps to do it.

How to Change Store Favicon

If you want to change the Store favicon, replace favicon.png in <APPM_HOME>/repository/deployment/server/jaggeryapps/store/themes/store/libs/theme-wso2_1.0/images by the logo you want to have.

Then, Store will be like below. You will see the new favicon.

How to Change Webapp Favicons

If you want to change the favicon of all webapps, you need to do some code changes. Here's how to do it.

1. Clone wso2 carbon-mediation code from here. Make you sure to use correct branch as per your App Manager version. For example, you need to get release-4.6.1 version for App Manager 1.2.0.

2. Go to carbon-mediation/components/mediation-initializer/org.wso2.carbon.mediation.transport.handlers directory.

3. Change the icon location of favicon icon in here like this.

   
   response.addHeader("Location", "http://wso2.org/favicon.ico");  
   

4. Build org.wso2.carbon.mediation.transport.handlers component. Then there will be org.wso2.carbon.mediation.transport.handlers-4.6.1.jar in the target folder.

5. Add org.wso2.carbon.mediation.transport.handlers-4.6.1.jar as a patch to App Manager server. For that, create a directory "patch0900" inside <APPM_HOME>/repository/component/patches/ and copy the jar into it.

6. Restart the server.

Favicon of Gateway response will be displayed as below.