Creating dynamic selection lists for Progressive Web Applications by using JSON data

Fetch JSON data and pass it to a character menu in  Developer Studio to create a list or to populate a field in Progressive Web Applications. Use this method of creating dynamic selection lists in situations where the content to be displayed varies according to various user actions and settings. You can fetch JSON data by using webhooks, REST filters, or active links. 

The following example procedure demonstrates:

• How to use the JSON Menu Label, JSON Menu Value, and JSON Field ID properties in a character field to extract values from JSON data and display the data as a list.
• How to create an active link that uses the JSONMAP function to extract a specific value from JSON data and display it in a character field. 

This example shows how the JSON Menu Label, JSON Menu Value, and JSON Field ID properties, and the JSONMAP function work. However, note that real-world implementations can vary considerably depending on your business needs. 

The following video (4:06) explains the concept and also demonstrates how the JSON properties and the JSONMAP function works: https://youtu.be/3eRIML5mOgI

Before you begin

• You must have a basic understanding of progressive web applications and their development. For more information, see Developing a Progressive Web Application.
• You must know how to fetch JSON data by using workflows that have webhooks, REST filters, or active links.
• You can download the JSONMAP_example_fields.def file and import it into  Developer Studio  to create the fields and settings described in the following procedure. 

To create a dynamic selection list for progressive web applications by using JSON data

1. In  Developer Studio , create a New Regular Form.

2. Create a Progressive View.

    Steps (2)

   1. Select Form > Create New View.
      The Create New View dialog box opens.
   2. In the View Type list, select Progressive. 
      
3. Drag four character fields into the view.
   In this example, name the fields JSON, Json Exp, Output, and Character Field.
   
4. In the Properties pane, change the Display Type property of these character fields to Drop-Down List. 

5. Select the JSON field, and in the Properties tab, change the Database > Input Length to 0.
   Setting Input Length at a value of 0 enables the field to store content of any length.
   In real-world scenarios, the JSON field receives the JSON data automatically by means of a workflow or a webhook that you have already defined. Also, the field may be hidden from the Progressive View because it simply holds the JSON data. In this example, we manually paste JSON data into the JSON field in Progressive View.

6. Select Character Field from the view and in the Properties tab, add the following values under Attributes:

   Property	Value
   JSON Menu Label	#colors[*].color#+#colors[*].category
   JSON Menu Value	colors[*].id
   JSON Field ID	The field ID of the JSON field

   The Character Field displays menu labels of the format color and category.

7. In the Menu Style list, select Append. 
   This option displays the Character Field in Progressive View as a list where you can select multiple options.

8. Define a button that runs the active links that you defined for the Output field.
   

9. Select the Extract Value button field in the view and add an active link with the following settings:

   Setting	Value, selection, or function
   If Actions	Set Fields
   Data Source	CURRENT SCREEN
   Field	Output
   Value	JSONMAP($JSON$, $Json Exp$)

   This field uses the JSONMAP function, which picks up the data from the JSON field and the expression that you enter in the Json Exp field, and displays it in the Output field. 

10. Select the Character Field from the view and define an active link with the following settings:

    Setting	Value, selection, or function
    Execution Options > Field	Character Field
    Menu Choice	Selected
    If Actions	Set Fields
    Data Source	CURRENT SCREEN
    Field	Output
    Value	JSONMAP($JSON$, $Json Exp$)

    This active link runs when you select any item in the Character Field list in Progressive View, and displays the output of the JSONMAP function in the Output field.

11. Save the changes.

Validating the selection list in Progressive View

1. In a browser, log in to PWA.
   <serverName>:8080/arsys/pwa/#/login
2. Change the URL to include the Progressive View form that you created in  Developer Studio .<serverName>:8080/arsys/pwa/#/forms/<serverName>/<formName>/<viewName>

3. Paste the following example JSON to the JSON field. 

    Example JSON

   "colors": [
   {
   "id": 1,
   "color": "black",
   "category": "hue",
   "type": "primary",
   "code": {
   "rgba": [255,255,255,1],
   "hex": "#000"
   }
   },
   {
   "id": 2,
   "color": "white",
   "category": "value",
   "code": {
   "rgba": [0,0,0,1],
   "hex": "#FFF"
   }
   },
   {
   "id": 3,
   "color": "red",
   "category": "hue",
   "type": "primary",
   "code": {
   "rgba": [255,0,0,1],
   "hex": "#FF0"
   }
   },
   {
   "id": 4,
   "color": "blue",
   "category": "hue",
   "type": "primary",
   "code": {
   "rgba": [0,0,255,1],
   "hex": "#00F"
   }
   },
   {
   "id": 5,
   "color": "yellow",
   "category": "hue",
   "type": "primary",
   "code": {
   "rgba": [255,255,0,1],
   "hex": "#FF0"
   }
   },
   {
   "id": 6,
   "color": "green",
   "category": "hue",
   "type": "secondary",
   "code": {
   "rgba": [0,255,0,1],
   "hex": "#0F0"
   }
   }
   ]
   }

   As soon as you paste the example JSON, the Character Field displays the list of colors and the categories.
   

4. To the Json Exp field, add the following expression:
   colors[id=1].color 

5. Click Extract Value.
   The active link uses the expression in the Json Exp field and displays black in the Output field. The value black is associated with id=1 in the example JSON data.
   
   
   
6. (Optional) If you want to validate additional changes you made in  Developer Studio , you must sync the cache in Mid Tier. 
   1. Log in to  Mid Tier  configuration.
      <serverName>:8080/arsys/shared/config/config.jsp
   2. Click Sync Cache.
   3. Refresh the browser to display the updated Progressive View form.

Results

The JSON Menu Label, JSON Menu Value, and JSON Field ID properties in a character field extract the required data from the JSON data and display that information in a list. The JSONMAP function extracts specific values that you want from the JSON data and displays it in the associated field when you run the active link.