Suppose there is a dropdown with the field name 'Priority' and its label and values configured as 'Immediate', 'High' and 'Medium' respectively. There is a separate text-area with the field name 'Remarks' and you want the text entered by user in the text-area field to appear in different colors (red, yellow and green in case of 'Immediate', 'High' and 'Medium' priorities respectively) depending upon the selected value in 'Priority' dropdown field. In such a case, you can use the drag and drop code editor to define a condition like below upon the 'onChange' event on the 'Remarks' text-area control:
Here are the steps to understand how you can define such a condition:
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. Click on the gear icon inside the 'if' block. It will populate the options available for the selected block.
3. Within the popup, drag and drop the 'else if' block just below the 'if' block as shown below.
4. Now, close the pop-up by clicking on the gear icon once again.
5. 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.
6. 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 'Select Control Name' dropdown, select 'Priority'.
7. 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 'Immediate'.
8. Go back to the left panel and select 'Custom Functions'. Select the third block 'Setter' and drag it to the centre adjoining the 'do' block as shown below.
In the 'Select Control Name' dropdown, select 'Remarks'. Keep the 'Property Name' chosen as 'Control Color'. Click on the 'Value' box and in the colour picker that opens, select the red colour.
9. Now select and copy the entire block opposite the 'if' block by pressing Ctrl+c, and paste it adjoining the 'else if' block as shown below. Replace the 'Immediate' text with 'High'.
10. Similarly, select and copy the entire block opposite the first 'do' block by pressing Ctrl+c, then paste it adjoining the second 'do' block as shown below. Replace the red colour with the yellow colour in the 'Value' box this time.
11. Click on the gear icon in the 'if' block. Within the popup, drag and drop a second 'else if' block just below the existing 'else if' block as shown below.
14. Now, close the pop-up by clicking on the gear icon once again.
15. Select and copy the entire block opposite the 'if' block by pressing Ctrl+c, and paste it adjoining the second 'else if' block as shown below. Replace the 'Immediate' text with 'Medium'.
16. Similarly, select and copy the entire block opposite the first 'do' block by pressing Ctrl+c, then paste it adjoining the third 'do' block as shown below. Replace the red colour with green colour in the 'Value' box this time.
17. Click on the gear icon in the 'if' block. Within the popup, drag and drop an 'else' block just below the second 'else if' block as shown below.
18. Now, close the pop-up by clicking on the gear icon once again.
19. Select and copy the entire block opposite the first 'do' block by pressing Ctrl+c, then paste it adjoining the 'else' block as shown below. Replace the red colour with black colour in the 'Value' box this time.
20. 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 apply to the new forms created under the related form type.
Next Article: Enable 'Textbox' control only based on the value selection of the other 'Radio' control in the same form