Cell Coloring Based On Cell Value

Sometimes in our APEX reports we need to color the cell based on its value, like if my "Is Active" column has value "Yes" then color it Green otherwise color it Red. This makes the column easily distinguishable in the report.

In my blog today, I will discuss about the approach of doing the same in your report.

I will use "Is Active" column of report for this purpose.

Step 1: Build a normal interactive grid along with the column to be colored.

Step 2: Define a JavaScript function at page level (JavaScript --> Function and Global Variable Declaration)

function highlight_ig_cells() {
    // for each cell in marked column
    $('.highlight td.status_column').each(function() {
        // get cell text
        cellData = $(this).text();
        // rules for coloring
        if (cellData == 'Yes')
            $(this).addClass('u-success');
        else if (cellData == 'No')
            $(this).addClass('u-danger');
        else
            $(this).addClass('u-normal');
    })
};

Step 3: At "Execute when Page Loads" section call this function

highlight_ig_cells() 

Step 4: Build a Dynamic action at the Interactive Grid region

Event : Page Change [Interactive Grid]

Action : Execute JavaScript Code

Code : highlight_ig_cells();

Step 5: Open the properties of "Is Active" column. Go to "Appearance --> CSS Classes" and paste the class name as "status_column"

Now your column will be colored in Green (for "Yes") and Red (for "No"). Also if you update the value of "Is_Active" column then color will be changed accordingly.

It is a very short and simple way to achieve this color coding based on cell value.

Please feel free to share your best approach for doing the same.

Thanks for giving your time to this post !!