Style attributes like background and font color can be controlled dynamically to highlight a component. For example you could change the color of a component based on the value entered into the field. To do this we use the "Custom Class" property that is available under all components. In this article we will show a few examples of this in action to help you get started.
Change the colour of a number field
Lets see how we can dynamically change the colour of a number field based on its value. In this example we will change the background to red if the value exceeds 1000.
Open the form builder screen and click the "..." icon located in the top right hand corner to open the context menu
Click "Custom CSS" to launch the custom CSS editor
Add the following CSS code. This will change the background and font color for any input which has the class called "bg-red.
.bg-red .form-control{
background-color: rgb(255, 216, 216);
}Next open the component setting or your number field and under the Custom Class editor add the following javascript, which will dynamically add the "bg-red" class to the component based on its value.
if(instance.getValue() > 1000)
customClass = 'bg-red'Navigate to the preview tab in order to test these changes
Change the colour of a Text Field
The process of setting the background color of a text field is the same as that for a number field described above, however the javscript code simply needs to be adapted. In this example we will change the background to red if the entered value contains the term "failed".
Open the form builder screen and click the "..." icon located in the top right hand corner to open the context menu
Click "Custom CSS" to launch the custom CSS editor
Add the following CSS code. This will change the background and font color for any input which has the class called "bg-red.
.bg-red .form-control{
background-color: rgb(255, 216, 216);
}Next open the component setting or your number field and under the Custom Class editor add the following javascript, which will dynamically add the "bg-red" class to the component based on its value.
if(instance.getValue().includes('failed'))
customClass = 'bg-red'Navigate to the preview tab in order to test these changes
Change the colour of a drop-down menu based on the selection
Lets look at a slightly more complicated scenarios where we want to display a different color (red, yellow or green) based on the selection in a drop-down menu. This process is again very similar to the examples above with a slight modification to the CSS and JavaScript.
Open the form builder screen and click the "..." icon located in the top right hand corner to open the context menu
Click "Custom CSS" to launch the custom CSS editor
Add the following CSS code. This will change the background and font color for any input which has the class called "bg-red.
.bg-green .form-control{
background-color: rgb(213, 255, 209);
}
.bg-yellow .form-control{
background-color: rgb(255, 236, 173);
}
.bg-red .form-control{
background-color: rgb(255, 216, 216);
}Next open the component setting or your number field and under the Custom Class editor add the following javascript, which will dynamically add the "bg-red" class to the component based on its value.
if(instance.getValue().includes('failed'))
customClass = 'bg-red'Navigate to the preview tab in order to test these changes
if(instance.getValue() === 'low')
customClass = 'bg-green'
if(instance.getValue() === 'medium')
customClass = 'bg-yellow'
if(instance.getValue() === 'high')
customClass = 'bg-red'