Using the Form Element Dropdown
  • 18 Oct 2024
  • Dark
    Light
  • PDF

Using the Form Element Dropdown

  • Dark
    Light
  • PDF

Article summary

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
    27_New_JSON_Form_2023.1

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

    Figure 2: Add Dropdown Form Element
    28_Dropdown_Element_2023.1

  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
    29_Edit_Dropdown_2023.1

  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
    30_Config_Dropdown_2023.1

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
    31_Select_Static_Option_2023.1

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

    Figure 6: Save Static Dropdown Changes
    32_Save_Changes_2023.1

  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
    33_View_Static_Dropdown_2023.1

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
    26_Dynamic_Option_2023.1

  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
    18_Request_Config_2023.1

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

    Figure 10: API Response
    19_API_Response_2023.1

  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
    20_Source_to_Target_2023.1

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

    Figure 12: Target Data Preview
    21_Target_Data_Preview_2023.1

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

    Figure 13: JSON Transformation
    22_JSON_Transformation_2023.1

  9. Select a JST from the dropdown list.

    Figure 14: Select JST from List
    23_Select_JST_2023.1

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

    Figure 15: Run Transformation
    24_Run_Transformation_2023.1

  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
    25_Results_ID_2023.1

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.

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
17_Additional_Binding_2023.1


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.


Was this article helpful?

Changing your password will log you out immediately. Use the new password to log back in.
First name must have atleast 2 characters. Numbers and special characters are not allowed.
Last name must have atleast 1 characters. Numbers and special characters are not allowed.
Enter a valid email
Enter a valid password
Your profile has been successfully updated.