JSON Forms

On this page:

Form Element Dropdown

This guide will illustrate how to use the Form Element Dropdown with a JSON Form. A Dropdown can be either static or dynamic. A Dynamic Dropdown can utilize either a JSON Transformation Schema (JST) or a Source-to-Target configuration for data mapping. Both types will be covered in this guide as well as their respective data parsing methods.

Configuring Dropdown Form Elements

  1. Go to IAP → Automation Studio → JSON Forms.

  2. Select an existing JSON Form from the menu list on the left or create a new JSON Form by clicking on the plus sign (+) icon.

    Figure 1: Create New JSON Form

    Create JSON Form

  3. Drag the Dropdown element over to the empty box on the canvas.

    Figure 2: Add Dropdown Form Element

    Add Dropdown

  4. Hover over the three dots in the upper-right corner. Click the gear icon when it appears to edit the Dropdown. The Configure dialog displays.

    Figure 3: Edit Dropdown Form Element

    Edit Dropdown

  5. In the Configure dialog, enter a name in the Label field (required), make other selections as needed, and then click Options (lower-left) to open the configuration window for dropdown options.

    Figure 4: Configure Dropdown Form Element

    Name Dropdown

Static Dropdown

To configure a Static Dropdown option:

  1. Select Static and click the Option button to add as many fields as needed. Enter values for each line and click Back when finished. Use the trashcan icon at the end of each line to remove an unwanted option.

    Figure 5: Select Static Option

    Static Options

  2. Click Save to retain your changes. You will return to the JSON Form canvas.

    Figure 6: Save Static Dropdown Changes

    Click Save

  3. Click the Static dropdown arrow to access the list of items that were created in the previous steps.

    Figure 7: View Static Dropdown List

    View Static List

Dynamic Dropdown

To configure a Dynamic Dropdown:

  1. Repeat configuration steps 4 and 5 presented in the previous section.

  2. Select the Dynamic option instead of Static.

    Figure 8: Select Dynamic Option

    Select Dynamic Dropdown

  3. Make Request Configuration selections for the following fields:

    • Method
    • Base URL
    • API Route

    Note: For more information, see the Using JSON Forms guide.

  4. Click the Make API Call button.

    Figure 9: Request Configuration Fields

    Add Filed Selections

  5. The output of the API call will appear in the Response Body.

    Figure 10: API Response

    API Response

  6. The results may be filtered by selecting the Source-To-Target option under Data Mapping. Enter the required information for the Source Property and Property Key fields. In the example below (Figure 11) the Source Property is /results and the Property Key is /id.

    Figure 11: Source-To-Target

    Source to Target

  7. Click the Query Data button to display the results.

    Figure 12: Target Data Preview

    Query Data

  8. The second filtering option is JSON Transformation. Select the JSON Transformation radio button.

    Figure 13: JSON Transformation

    Select JSON Transformation

  9. Select a JST from the dropdown list.

    Figure 14: Select JST from List

    Select JST

  10. Once the JST is selected, click the Run Transformation button.

    Figure 15: Run Transformation

    Run Transformation

  11. The data is parsed based on the JST. In this example (Figure 16), the returned value is the id field.

    Figure 16: Results for ID

    Results for ID

    Note: In the event the Run Transformation button is unavailable (not enabled), make sure to run the JST before using it in a JSON Form.