Skip to main content

Display only specific values in the 'Dropdown' control based on value selection in another 'Dropdown' control of the same form

This is an AppBuilder Sample Script.

Updated over a week ago

Suppose there are two 'Dropdown' fields with the field names 'Project' and 'Premises' respectively. The 'Project' field has the values 'Kings Villa' and 'Wayne Towers', while the 'Premises' field has the values 'Kings Crown', 'Kings Residential', 'Kings Tower', 'Wayne Vista', 'Wayne Sky' and 'Wayne Amaze' respectively. We want the 'Premises' should only have limited options based on the value selected by user in 'Project' field i.e. if 'Kings Villa' is selected, the 'Premises' will only show 'Kings Crown', 'Kings Residential' and 'Kings Tower' as options, while the remaining three options will only display if 'Wayne Towers' is selected.

In such a case, you can use the drag and drop code editor to define a condition like below upon the 'onChange' event of the 'Project' control:

  1. From the left panel, go to the first option called 'Logic'. It will populate a list of logical blocks. Select the first 'if' block and drag it to the centre of the editor.

  2. Go back to the left panel and select 'Logic'. Select the second block and drag it to the centre adjoining the 'if' block as shown below.

  3. Go back to the left panel and select 'Custom Functions'. Select the second block 'Get Value' and drag it to the centre adjoining the first blank box opposite the 'if' block as shown below.
    In the 'Control Name' dropdown, select 'Project'.

  4. Go back to the left panel and select 'Text'. Select the first block and drag it to the centre, adjoining the second blank box opposite the 'if' block.
    In the text box, enter the text 'Kings Villa'.

  5. Go back to the left panel and select 'Custom Functions'. Select the fourth block 'Setter' and drag it to the centre adjoining the 'do' block as shown below.

  6. In the 'Select Control Name' dropdown, select 'Premises'. In the 'Property Name', select 'Options'.

  7. Go back to the left panel and select 'Lists'. Select the second block 'create list with' and drag it to the block opposite the 'Value' field in the 'Setter' block.

  8. Go back to the left panel and select 'Text'. Select the first block and drag it to the 'create list with' block opposite the 'Value' field.
    In the text box, enter the text 'Kings Tower'.

  9. Copy the 'text' block with the text 'Kings Tower' and create a list of the values to be displayed in the 'Premises' dropdown as shown below. Change text for the second and third blocks to 'Kings Crown' and 'Kings Residential' respectively.

  10. To create a similar block again, you can copy the entire 'if' block and make required changes in the copied blocks as shown below.

    1. Change text 'Kings Villa' to 'Wayne Tower'

    2. Change text 'Kings Tower' to 'Wayne Vista'

    3. Change text 'Kings Residential' to 'Wayne Amaze

  11. Once done, click 'OK' (at bottom right) to save the changes and exit the code editor, then save/publish the form design as needed. Once the form design is published and executed, the changes will be applicable to the new forms created under the related form type.
    ​

Next Article: Pull values for a 'Dropdown' control from other forms by setting up an API connection

Did this answer your question?