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