Skip to main content
All CollectionsAsite AppBuilderAppBuilder Sample Scripts
Enable 'Dropdown' control only based on value selection of another 'Dropdown' control in same form
Enable 'Dropdown' control only based on value selection of another 'Dropdown' control in same form

This is an AppBuilder Sample Script.

Updated over a week ago

Suppose there is a dropdown with the field name 'Project' and its label and values configured as 'Project A', 'Project B' and 'Project C' respectively. There is another dropdown with the field name 'Premises' and its label and values configured as 'Ground Floor', 'First Floor' and 'Second Floor' respectively. You want the 'Premises' dropdown to be enabled only if 'Project' dropdown has a value selected (i.e. onChange), else it should be disabled by default (i.e. onLoad). In such a case, you can use the drag and drop code editor to define a condition like below upon the 'onLoad' and 'onChange' event:

Here are the steps to understand how you can define such a condition:
โ€‹

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

2. Click on the gear icon inside the 'if' block. It will populate options available for selected block.

3. Within the popup, drag and drop the 'else' block just below the 'if' block as shown below.

4. Now, close the popup by clicking on the gear icon once again.

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

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

7. Go back to left panel and select 'Text'. Select the first block and drag it to the center adjoining the second blank box opposite the 'if' block.
Keep the textbox blank as it is.

8. Go back to left panel and select 'Custom Functions'. Select the third block 'Setter' and drag it to the center adjoining the 'do' block as shown below.
In the 'Select Control Name' dropdown, select 'Premises'. In the 'Property Name', select 'Read-only'. Keep the 'Value' box checked.

9. Now select and copy the entire block opposite the 'do' block by pressing Ctrl+C, and paste it adjoining the 'else' block as shown below. Uncheck the 'Value' checkbox this time.

10. 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 for the new forms created under the related form type.



Did this answer your question?