Changing the title color dynamically

Trigger type: Simple Action type: Merge Component Schema

This advanced logic changes the label color of a text field component when the user select the desired color from a list. The change applies using a custom CSS file.

Prerequisites: Add the CSS classes containing the new color for the text field in the Custom CSS property field of the form.

For example, the CSS snippet below contains a class that sets the label color to green or red:

.textFieldLabel-green 
{
   color : green;
}
.textFieldLabel-red 
{
   color : red;
}

After referencing the CSS classes in the Custom CSS property field, design your form following the steps below:

1. Add one Text Field component and one Radio component. Pay attention to their Property Names, as you use those in your advanced logic.
2. In the Display tab of the text field component, set a default Custom CSS Class. For example, to set red as the default color of the text field, use the textFieldLabel-red class. The class must be defined in the CSS file you created for the Prerequisites section.
   
   

   

   
   
3. For the Radio component, add two values for the colors green and red.
4. Go to the Logic tab of the Text Field component.
5. Add a logic and name it "color selection".
6. Select the Simple trigger type.
   1. From the When the form component dropdown menu, select Radio ({radio_field_key}).
   2. In the Has the value field, enter "green".
   The above configuration detects if the user selects "green" from the radio options and triggers the action to change the text field label color.
7. Add an action and name it "change color using css"
8. Select the Merge Schema Component action type and enter the following snippet:

   return { customClass: "textFieldLabel-green" }

9. Save the action and the logic.
10. Save the component.

At runtime, if the business user selects the "green" radio button, the label of the text field becomes green. If the user selects the "red" radio button, the label of the text field becomes red.