# Conditional Highlight Colors

Conditional Highlights can allow you to change the of a field based on various conditions. Such as field values, logged-in user parameters and more.

They can be used in Highlight Sections on [Record Pages](https://guides.noloco.io/data-to-app#row-record-page).

<figure><img src="https://319575345-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MifpIQWu0HCVYAt51oT%2Fuploads%2Fgit-blob-72b7eecfdfb8c3fd60b0c062c660cd0f5a9fe874%2Fconditional-highlights.png?alt=media" alt=""><figcaption></figcaption></figure>

### **Setting Up Conditional Highlights**

To configure conditional highlights for a field, follow these steps:

1. Navigate to the field's configuration settings within the Highlights section.
2. Activate the option "Highlight this field based on conditions."
3. You will be presented with a blank condition setup. Here, you can define the conditions under which the field should be highlighted, including choosing specific colors for different scenarios.

<figure><img src="https://319575345-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MifpIQWu0HCVYAt51oT%2Fuploads%2Fgit-blob-2803413f59c75a729987a8d3006920ad11536515%2FScreenshot%202024-04-05%20at%202.25.56%E2%80%AFp.m..jpg?alt=media" alt=""><figcaption></figcaption></figure>

### **Defining Conditions:**

* **Select the Field**: Choose the field you wish to apply conditional highlighting to
* **Choose an Operator**: Select the logical operator that will determine how the field value is evaluated (e.g., greater than, less than, equal to)
* **Specify a Value**: If required, specify the value that will trigger the highlighting

<figure><img src="https://319575345-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MifpIQWu0HCVYAt51oT%2Fuploads%2Fgit-blob-3cec7a43d5acfed5faa386acada6b20772433859%2FScreenshot%202024-04-05%20at%202.28.53%E2%80%AFp.m..jpg?alt=media" alt=""><figcaption></figcaption></figure>

For example, the rule below would conditionally highlight the cell. If the value of the "Leads" field, *is more than* 20

<div data-full-width="false"><figure><img src="https://319575345-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MifpIQWu0HCVYAt51oT%2Fuploads%2Fgit-blob-1b66841a597b6892d9b2fad08270ef7572a143fa%2FScreenshot%202024-04-08%20at%209.21.28%E2%80%AFa.m..jpg?alt=media" alt="" width="367"><figcaption></figcaption></figure></div>

<figure><img src="https://319575345-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MifpIQWu0HCVYAt51oT%2Fuploads%2Fgit-blob-9c086e38fa9740e2fee688911c8e1b8b530c9e05%2FScreenshot%202024-04-08%20at%209.24.14%E2%80%AFa.m..jpg?alt=media" alt=""><figcaption></figcaption></figure>

### Multiple Highlight Conditions

You are not limited to just adding one rule on a condition. It is possible to apply multiple rules to a single field. Furthermore, leveraging "AND" and "OR" logical operators to enable complex conditions.

For example, you can change the color of a cell based on a field's value and also the *logged in user's role*. With the below conditions, the cell will only be highlighted *"Red"*, when the value of the "Leads" field *is less than 20* AND the *logged in User is internal*.

<figure><img src="https://319575345-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MifpIQWu0HCVYAt51oT%2Fuploads%2Fgit-blob-9a5824478deba293b99790d470213eb6f082e4a0%2FScreenshot%202024-04-08%20at%209.40.11%E2%80%AFa.m..jpg?alt=media" alt="" width="346"><figcaption></figcaption></figure>

Extending our example above, we can add more conditions to make the cell a different color. The cell will be highlighted "Red" if the "Leads" field *is less than or equal to* 20

<figure><img src="https://319575345-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MifpIQWu0HCVYAt51oT%2Fuploads%2Fgit-blob-08e46d14d42dbb3c1af827fb1c4930ddf16f4509%2FScreenshot%202024-04-08%20at%209.55.15%E2%80%AFa.m..jpg?alt=media" alt="" width="344"><figcaption></figcaption></figure>

It will turn "Orange" if the field *is greater than* 20 AND *less than or equal to* 60.

<figure><img src="https://319575345-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MifpIQWu0HCVYAt51oT%2Fuploads%2Fgit-blob-887f7f886b2068efc5d571c616e4bed7afa45b7a%2FScreenshot%202024-04-08%20at%209.52.58%E2%80%AFa.m..jpg?alt=media" alt="" width="334"><figcaption></figcaption></figure>

Finally, it will be "Green", if the value of the field *is greater than* 60.

<figure><img src="https://319575345-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MifpIQWu0HCVYAt51oT%2Fuploads%2Fgit-blob-37d7fb1c9484b341b3eadb6125c0691a1e969cd3%2FScreenshot%202024-04-08%20at%209.53.06%E2%80%AFa.m..jpg?alt=media" alt="" width="335"><figcaption></figcaption></figure>
