Conditional Formatting | Team Forms Docs

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 locate the Custom Class editor under the display tab 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 locate the Custom Class editor under the display tab and 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'

Change the colour of a cell in a data-grid

The process of dynamically setting the background color of a table cell or table row is the same as the method used for other components described above, with a slight modification to the CSS to allow targeting the table cell/row instead of the input field.

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.

/* User this to target an individual table cell */
td:has(.bg-red) {
   background-color: rgb(255, 216, 216);
   margin: -10px;
}

/* User this to target a table row */
tr:has(.bg-red) { 
   background-color: rgb(255, 216, 216); 
}

Next open the component setting or your the field which will trigger the color change (e.g. a number, checkbox or textfield) and locate the Custom Class editor under the display tab. Add the following javascript, which will dynamically add the "bg-red" class to the component based on its value, in this case it will add the bg-red class if a checkbox value is checked:
```
if(instance.getValue())
 customClass = 'bg-red'
```

How to increase the width of fields in a Datagrid

Code Examples

Dynamically update a label based on the response to another field

How do I remove a component

Formatting dates in a date/time component