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

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

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

In default publisher UI, two images can be uploaded when creating a webapp. They are image banner and image thumbnail. Suppose you want to add the another image input too for apps, and let’s see how to do that.

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

For example,  let's take "Logo" as the custom field.

1. Modify <APPM_HOME>/repository/resources/rxt/webapp.rxt by adding below code under <table name="Images">.

   
   <field type="text">  
      <name>Logo</name>  
   </field>  
   

2. Login to Management console and navigate to Home > Extensions > Configure > Artifact Types and delete "webapp.rxt"

3. Add following block under "fields" of <APPM_HOME>/repository/deployment/server/jageeryapps/publisher/config/ext/webapp.json

   
   {  
      "name": "logo",  
      "table": "images",  
      "type": "imageFile"  
   }  
   

4. Add following line under "storeFields" of <APPM_HOME>/repository/deployment/server/jaggeryapps/publisher/config/storage.json

   
   "images_logo"  
   

5. Add below line to both <APPM_HOME>repository/deployment/server/jageeryapps/publisher/themes/appm/partials/add-asset.hbs
and
<APPM_HOME>repository/deployment/server/jageeryapps/publisher/themes/appm/partials/edit-asset.hbs
files.

   
   {{{ form_render "images_logo" data.fields }}}  
   

6. When you create a new version of an existing webapp, to copy the image field value to the new version, you need to add below line to

<APPM_HOME>/repository/deployment/server/jaggeryapps/publisher/themes/appm/partials/copy-app.hbs

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

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

7. 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 inside customPropertyDefinitions section.

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

8. Restart App Manager.

9. Sample curl command with custom image property to create a web app is shown in below.

   
 curl -X POST -H "Authorization: Bearer c4cdc394-931f-3e3f-9a91-f2be09fab1de" -H "Content-Type: application/json" -H "Cache-Control: no-cache" -d '{"name":"sampleApp","version":"1.0.0","banner":"36d35be6-1847-4d22-b885-16c653486a77/241eb51a2fdb683b.jpg","thumbnailUrl":"85229347-fcdf-4548-993e-1509dd4242df/dd24c0d2ea4a5697.png","displayName":"sampleApp","description":   
  "description","isSite":"false","context":"sampleContext","appUrL":"http://wso2.com",   
  "transport":"http", "customProperties":[   
   {   
    "name":"images_logo",   
    "value":"1b3bfd53-ff9a-4dd3-85f0-5e75e6bfa215/R9GxtyGTG7gN5hQ.jpg"   
   }   
  ]}' "http://localhost:9763/api/appm/publisher/v1.1/apps/webapp"   
   

Note : Refer this to upload a image to the system. Then, you can use that uploaded image  to create web app from REST APIs.

8. Web app create page with the newly added image field(i.e. Logo) will be shown as below.

[WSO2 App Manager] How to add a custom field to a web app

In WSO2 App Manager, when you create a new web app, you have to fill a set of predefined values (eg: Name, Version, Context etc.). If you want to add any custom fields to an app, you can easily do it.

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

For example,  let's take "Price" as the custom field.

1. Modify <APPM_HOME>/repository/resources/rxt/webapp.rxt. If you want to add "Price" as a mandatory field, add below code to the overview section of rxt file.

   
   <field type="text" required="true">  
     <name>Price</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 following block under "fieldProperties" of <APPM_HOME>/repository/deployment/server/jageeryapps/publisher/config/ext/webapp.json

   
   {  
       "field": "overview.price",  
       "name": "editable",  
       "value": true  
   }  
   

4. Add below line to both <APPM_HOME>repository/deployment/server/jageeryapps/publisher/themes/appm/partials/add-asset.hbs
and
<APPM_HOME>repository/deployment/server/jageeryapps/publisher/themes/appm/partials/edit-asset.hbs
files.

   
   {{{ form_render "overview_price" data.fields }}}  
   

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

5. 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_price"}  
    ]  
   }  
   

6. Restart App Manager.

7. Sample curl command with custom properties to create a web app is shown in below.

   
 curl -X POST -H "Authorization: Bearer c4cdc394-931f-3e3f-9a91-f2be09fab1de" -H "Content-Type: application/json" -H "Cache-Control: no-cache" -d '{"name":"sampleApp","version":"1.0.0","banner":"36d35be6-1847-4d22-b885-16c653486a77/241eb51a2fdb683b.jpg","thumbnailUrl":"85229347-fcdf-4548-993e-1509dd4242df/dd24c0d2ea4a5697.png","displayName":"sampleApp","description":  
 "description","isSite":"false","context":"sampleContext","appUrL":"http://wso2.com",  
 "transport":"http", "customProperties":[  
   {  
     "name":"overview_price",  
     "value":"10"  
   }  
 ]}' "http://localhost:9763/api/appm/publisher/v1.1/apps/webapp"  
   

8. Web app create page with the newly added custom field(i.e. Price) will be shown as below.