This documentation supports the 22.1 version of Action Request System.
To view an earlier version, select the version from the Product version menu.

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

    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 ExpOutput, 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:

    PropertyValue
    JSON Menu Label#colors[*].color#+#colors[*].category
    JSON Menu Valuecolors[*].id
    JSON Field IDThe 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:

    SettingValue, selection, or function
    If ActionsSet Fields
    Data SourceCURRENT SCREEN
    FieldOutput
    ValueJSONMAP($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:

    SettingValue, selection, or function
    Execution Options > FieldCharacter Field
    Menu ChoiceSelected
    If ActionsSet Fields
    Data SourceCURRENT SCREEN
    FieldOutput
    ValueJSONMAP($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. 

    "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 LabelJSON 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.



Related topics

Creating and managing fields

Data fields

Functions

JSON examples that you can use Open link

Online JSON validator Open link



Was this page helpful? Yes No Submitting... Thank you

Comments