In this article, we will demonstrate how to apply coloring to the values inside a List. You can color the value itself or the area around the value using JavaScript.

Figure 1: Sample List

Sample Form

Figure 1: Sample Form

JavaScript Conditional Formatter Configuration

In the sample, we will be applying the Formatter to the following Field:

  • Age
  • Gender
  • Country

Figure 3: Age Field Configuration

Figure 4: Gender Field Configuration

Figure 5: Country Field Configuration

Here is what the script looks like when properly formatted:

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

Sample App

Download the sample app below:

  • No labels