Interactive Grid Conditional Formatting: Color Coding Cells and Rows

Visual Cues That Guide Users

Color coding cells and rows in an Interactive Grid helps users spot important data instantly: overdue items in red, high-value transactions highlighted, status indicators with semantic colors. APEX provides several ways to achieve this, from declarative HTML expressions to JavaScript initialization code.

Method 1: HTML Expression on a Column

The simplest approach uses the column’s HTML Expression property. This works for individual cell formatting:

-- Column: STATUS
-- HTML Expression:
<span class="u-color-#STATUS_COLOR_CLASS#-text">#STATUS#</span>

-- Add a hidden column STATUS_COLOR_CLASS with SQL:
SELECT order_id, status,
       CASE status
           WHEN 'OVERDUE' THEN '9'    -- red
           WHEN 'PENDING' THEN '16'   -- amber
           WHEN 'COMPLETE' THEN '15'  -- green
           ELSE '1'
       END AS status_color_class
  FROM orders;

Method 2: CSS Classes on Columns

For simpler scenarios, use the column’s CSS Classes property. Add a computed column that returns a CSS class name, and reference it in the column definition:

-- SQL computed column
CASE WHEN amount > 10000 THEN 'highlight-high-value' ELSE '' END AS row_css

-- Page-level Inline CSS
.highlight-high-value {
    background-color: #fff3cd !important;
    font-weight: bold;
}

Method 3: JavaScript Initialization Code

For row-level formatting or complex conditions, use the IG’s JavaScript Initialization Code property. This runs after the grid renders and can modify cell or row appearance based on data values:

function(config) {
    config.defaultGridViewOptions = {
        rowHeader: {
            markup: function(context) {
                var record = context.record;
                var model = context.model;
                var status = model.getValue(record, "STATUS");
                if (status === "OVERDUE") {
                    return '<span class="fa fa-exclamation-triangle u-danger-text"></span>';
                }
                return '';
            }
        }
    };

    config.initActions = function(actions) {
        // Additional action customization
    };

    return config;
}

Method 4: Dynamic Action After Refresh

For the most flexibility, use a Dynamic Action on the IG’s “Page Change [Interactive Grid]” event that iterates over visible rows and applies CSS classes using jQuery:

// After IG renders, color rows based on data
var grid = apex.region("myGrid").widget().interactiveGrid("getViews","grid");
var model = grid.model;
model.forEach(function(record) {
    var status = model.getValue(record, "STATUS");
    var rowEl = grid.view$.find("[data-id='" + model.getRecordId(record) + "']");
    if (status === "OVERDUE") {
        rowEl.addClass("u-danger-bg");
    }
});

Performance Tip

HTML Expressions and CSS Classes are the most performant because they render server-side. JavaScript-based formatting runs client-side after each page of data loads, so avoid expensive DOM manipulation in grids with many rows. For grids showing 50 or more rows per page, prefer server-side approaches.