Using the 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
   

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

   Figure 2: Add Dropdown Form Element
   

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
   

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
   

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
   

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

   Figure 6: Save Static Dropdown Changes
   

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
   

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
   

3. Make Request Configuration selections for the following fields:

   • Method
   • Base URL
   • API Route

   Refer to the Using JSON Forms guide for more detail.

4. Click the Make API Call button.

   Figure 9: Request Configuration Fields
   

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

   Figure 10: 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
   

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

   Figure 12: Target Data Preview
   

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

   Figure 13: JSON Transformation
   

9. Select a JST from the dropdown list.

   Figure 14: Select JST from List
   

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

    Figure 15: 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
    

Additional Binding

Supplementary Dynamic Dropdowns can be added to offer additional data-binding that will allow for added API calls to return additional results.

If a dropdown has data-binding and the API returns the results [a,b,c], “additional binding” can be added for another API that will return the results [d,e,f]. The dropdown will then display the results as [a,b,c,d,e,f] in the output.

Figure 17: Additional Binding

Click the + Additional Binding button to add additional API configurations for data binding. The additional instances will appear to the left of the + Additional Binding button.

To configure, follow the steps shown above for Dynamic Dropdown.

To remove a data binding instance, select the instance you want to remove to highlight it and then click Remove Data Binding.