Applying Colors using the JavaScript Conditional Formatter

Introduction

In this article, you will explore how to apply color formatting to values in a list using JavaScript Conditional Formatter. This technique allows you to visually distinguish data by changing the color of the text or the background based on the value, enhancing the readability and user experience of your list.

How does it work?

To apply color formatting, you'll use JavaScript within the Conditional Formatter configuration. This script will dynamically generate HTML with inline styles based on the value of a specified field.

The example below demonstrates how to apply different styles to various fields in your list.

Javascript conditional formatter configuration

For demonstration, we’ll configure the formatter for three fields:

• Age
  
• Gender
  
• Country
  

Each field will be styled differently based on its value.

The JavaScript code provided creates a styled div element that wraps around the value. You can customize the styles to fit your needs.

Here’s an example script that colors the background of the country field:

"<div style='color:white;background-color:red;text-align:center;border-radius:3px;font-weight:600;padding:5px;'>" +
    {country} +
"</div>"

In this code:

• • The color property sets the text color.
  • The background-color property sets the background color.
  • Other properties like text-align, border-radius, and padding help style the appearance of the value.

Download sample app