How to Conditionally Color Cells

Overview

This tutorial explains how to customize the appearance of cells within an Avonni Data Table component in Salesforce Screen Flows using SLDS classes. You'll learn two approaches:

applying a consistent style to all cells in a column, or
implementing dynamic conditional styling where each cell's appearance changes based on its specific data value (e.g., color-coding risk levels, priorities, or statuses).

Example Scenario: Imagine displaying a list of opportunities in a data table. You want the "Risk Level" column to be color-coded: "High" risk appears with a red background, "Medium" with yellow, and "Low" with green. Each row displays a different color based on that specific opportunity's risk level.

Note: This tutorial uses risk levels as an example, but you can apply this technique to any field where visual indicators help users quickly understand data, such as case priorities, project statuses, account ratings, or product inventory levels.

What You'll Learn

By the end of this tutorial, you'll know how to:

Apply static styling to make all cells in a column look the same
Create dynamic, row-by-row conditional formatting using formulas
Use SLDS classes to control colors, backgrounds, and text styles
Reference the current row's data in your styling formulas

Prerequisites

Before starting this tutorial, you should have:

An Avonni Data Table component is already configured in your flow
Data displayed in the table from a record collection or query
Basic familiarity with Salesforce Flow Builder
Understanding of the field you want to style conditionally

Understanding the SLDS Cell Class Attribute

The key to styling cells is the SLDS Cell Class attribute, which is found in each column's configuration.

How to access it

Select your Avonni Data Table component in the flow
In the properties panel, find the Columns section
Click to expand or edit a specific column
Look for Cell Attributes or Advanced settings
Locate the SLDS Cell Class input field

This field accepts Salesforce Lightning Design System (SLDS) class names that control the cell's appearance. You can either enter static class names or map them to a formula that dynamically determines the classes.

Method 1: Static Styling (Same Style for All Rows)

Use this method when you want every cell in a specific column to have the same appearance, regardless of the data value.

When to Use Static Styling

Emphasizing an entire column (e.g., making all monetary values bold)
Creating visual hierarchy (e.g., headers or totals with different backgrounds)
Applying consistent branding (e.g., all status fields in a specific color)

Step-by-Step Instructions

Select Your Column
- Click on your Avonni Data Table component
- Navigate to the Columns section in properties
- Select the column you want to style
Enter SLDS Classes
- Find the SLDS Cell Class field
- Type the SLDS class names directly (separate multiple classes with spaces)
Example 1 - Green bold text:

   slds-text-color_success slds-text-heading_small

Example 2 - Light grey background with capitalized text:

   slds-theme_shade slds-text-title_caps

Example 3 - Red text for a critical column:

   slds-text-color_error slds-text-body_regular

Save and Test
- Click Done for the column configuration
- Save your flow and run it
- Verify that all cells in the column display the styling

Useful SLDS Classes Reference

Here are commonly used SLDS classes you can combine (separate with spaces):

Background Colors:

slds-theme_success - Green background
slds-theme_error - Red background
slds-theme_warning - Yellow background
slds-theme_info - Blue background
slds-theme_shade - Light grey background
slds-theme_alt-inverse - Dark grey background
slds-theme_inverse - Dark blue/grey background

Text Colors:

slds-text-color_success - Green text
slds-text-color_error - Red text
slds-text-color_warning - Dark yellow/orange text
slds-text-color_inverse - White text (for dark backgrounds)
slds-text-color_default - Standard text color
slds-text-color_weak - Grey text

Text Styles:

slds-text-title_caps - ALL CAPS TEXT
slds-text-heading_small - Bold text (heading style)
slds-text-body_regular - Regular body text
slds-truncate - Truncate long text with ellipsis

Pro Tip: You can combine background and text colors. For readability, use slds-text-color_inverse (white text) with dark backgrounds like slds-theme_error.

What you've accomplished: All cells in this column now display with consistent styling across all rows.

Method 2: Dynamic Conditional Styling (Different Style Per Row)

This is the powerful approach where each cell's appearance changes based on its specific data value. This is what you need for color-coding risk levels, priorities, statuses, or any other field where different values should be visually distinct.

Understanding How Dynamic Styling Works

The Avonni Data Table processes each row individually. When you create a formula and map it to the SLDS Cell Class attribute, the formula evaluates for each row using that row's specific data. This is the key to creating row-by-row conditional formatting.

Critical Concept: Referencing the Current Row's Data

When the data table displays a collection of records, each column is automatically bound to a field in those records. You don't need to create a separate record variable. Instead, you reference the field directly using the column's field path.

How it works:

Your data table displays a collection (e.g., a list of opportunities)
Each row represents one record from that collection
When you create a formula for a column, you reference the field using: {!ColumnFieldAPI}
The data table automatically evaluates this for each row's value

Step-by-Step Instructions

Step 1: Identify Your Field API Name

Before creating the formula, you need the exact API name of the field you want to evaluate.

Click on your Avonni Data Table component
Go to the Columns section
Find the column you want to style conditionally
Note the Field or Field API Name setting (e.g., Risk_Level__c, Priority, Status__c)

Important: This is the field API name you'll use in your formula. Write it down exactly as it appears.

Step 2: Create the Conditional Formula

Now you'll create a formula that returns different SLDS classes based on the field value.

Create the Formula Resource
- In Flow Builder, click the Manager tab (toolbox icon)
- Click New Resource
- Configure the resource:
  - Resource Type: Formula
  - API Name: Enter a descriptive name like RiskLevelCellStyle or StatusColorFormula
  - Description: Add a note like "Returns SLDS classes based on risk level"
  - Data Type: Text
Write the Formula Here's the basic structure using IF statements:

   IF(
       {!Risk_Level__c} = "High",
       "slds-theme_shade slds-theme_error slds-text-color_inverse",
       IF(
           {!Risk_Level__c} = "Medium",
           "slds-theme_shade slds-theme_warning",
           IF(
               {!Risk_Level__c} = "Low",
               "slds-theme_shade slds-theme_success",
               ""
           )
       )
   )

Critical: Replace Risk_Level__c with your actual field API name from Step 1.

Understanding the Formula Structure Let's break down what this formula does:
- {!Risk_Level__c}: This references the field value for the current row being processed. The data table automatically provides the correct row's value.
- IF() statements: Check the field value and return different SLDS classes:
  - If the value is "High" → Returns red background with white text
  - If the value is "Medium" → Returns yellow background
  - If the value is "Low" → Returns green background
  - If none match → Returns empty string (no special styling)
- The returned text: These are the SLDS class names that will be applied to that specific cell
Real-World Formula Examples Example 1 - Opportunity Stage:

   IF(
       {!StageName} = "Closed Won",
       "slds-theme_success slds-text-heading_small",
       IF(
           {!StageName} = "Closed Lost",
           "slds-theme_error slds-text-color_inverse",
           IF(
               CONTAINS({!StageName}, "Negotiation"),
               "slds-theme_warning",
               ""
           )
       )
   )

Example 2 - Case Priority:

   IF(
       {!Priority} = "Critical",
       "slds-theme_error slds-text-color_inverse slds-text-heading_small",
       IF(
           {!Priority} = "High",
           "slds-theme_warning",
           ""
       )
   )

Example 3 - Numeric Threshold (Inventory):

   IF(
       {!Quantity__c} < 10,
       "slds-text-color_error slds-text-heading_small",
       IF(
           {!Quantity__c} < 50,
           "slds-text-color_warning",
           "slds-text-color_success"
       )
   )

Example 4 - Date-Based (Overdue Tasks):

   IF(
       {!Due_Date__c} < TODAY(),
       "slds-theme_error slds-text-color_inverse",
       IF(
           {!Due_Date__c} <= TODAY() + 3,
           "slds-theme_warning",
           ""
       )
   )

Save the Formula
- Click Done to save your formula resource

What you've accomplished: You now have a formula that intelligently determines which SLDS classes to apply based on each row's data.

Step 3: Map the Formula to the Column

Now you'll connect your formula to the column so it applies the styling.

Select the Column
- Click on your Avonni Data Table component
- Navigate to the Columns section
- Select the column you want to style (the same one whose field you referenced in the formula)
Map the Formula
- Find the SLDS Cell Class field
- Look for the {x} icon to switch to mapped mode
- Select your formula resource (e.g., {!RiskLevelCellStyle})
Verify the Mapping
- Ensure the formula shows as {!YourFormulaName} in the field
- Make sure you're not in text entry mode - it should show as a formula reference
Save
- Click Done for the column
- Save your flow

What you've accomplished: The data table will now evaluate your formula for each row and apply the resulting SLDS classes to each cell individually based on that row's data.

How the Data Table Processes Each Row

Here's what happens when your flow runs:

Example data in your collection:

Row 1: Opportunity A, Risk Level = "High"
Row 2: Opportunity B, Risk Level = "Medium"  
Row 3: Opportunity C, Risk Level = "Low"

What the data table does:

For Row 1: Evaluates {!Risk_Level__c} → finds "High" → formula returns "slds-theme_shade slds-theme_error slds-text-color_inverse" → cell displays with red background and white text
For Row 2: Evaluates {!Risk_Level__c} → finds "Medium" → formula returns "slds-theme_shade slds-theme_warning" → cell displays with yellow background
For Row 3: Evaluates {!Risk_Level__c} → finds "Low" → formula returns "slds-theme_shade slds-theme_success" → cell displays with green background

Each row gets its own evaluation and its own styling based on its specific data.

Troubleshooting

The formula doesn't seem to evaluate - all cells look the same

Verify you mapped the formula (clicked the {x} icon) rather than typing text
Check that the field API name in your formula exactly matches the column's field name
Ensure the formula data type is set to "Text"
Look for syntax errors in the formula (mismatched parentheses, incorrect field references)

I get an error: "Field does not exist"

The field API name in your formula doesn't match your object's actual field
Double-check the field API name in Object Manager
Remember to include __c for custom fields
Verify you're using the correct field from the correct object

The styling appears but the colors are wrong

Review the SLDS class names you're returning in the formula
Some classes require others (e.g., slds-theme_error works best with slds-theme_shade)
Try the classes individually first to test them

Some rows show styling, others don't

Your formula might not account for all possible values
Add an else condition to handle unexpected values
Check for null or blank values in your data

The formula syntax shows an error

Count your opening and closing parentheses - they must match
Verify you're using straight quotes (") not curly quotes ("")
Check for typos in field API names
Ensure proper spacing and comma placement

Advanced Techniques

Styling Based on Multiple Fields

You can create more complex conditions using data from multiple fields:

IF(
    AND({!Priority} = "High", {!Status__c} = "Overdue"),
    "slds-theme_error slds-text-color_inverse slds-text-heading_small",
    IF(
        {!Priority} = "High",
        "slds-theme_warning",
        ""
    )
)

Using CASE() Instead of Nested IF()

For many conditions, CASE() is cleaner:

CASE(
    {!Status__c},
    "New", "slds-theme_info",
    "In Progress", "slds-theme_warning",
    "Completed", "slds-theme_success",
    "Cancelled", "slds-theme_error",
    ""
)

Percentage-Based Color Coding

Color code based on percentages or ranges:

IF(
    {!Completion_Percentage__c} >= 90,
    "slds-theme_success",
    IF(
        {!Completion_Percentage__c} >= 70,
        "slds-theme_warning",
        "slds-theme_error"
    )
)

Combining Text and Background Styling

Create more nuanced styling with multiple classes:

IF(
    {!Amount} > 100000,
    "slds-theme_success slds-text-heading_small slds-text-title_caps",
    "slds-text-body_regular"
)

Best Practices

Formula Design

Always include a default/else condition to handle unexpected values
Test with null and blank values
Keep formulas readable - use line breaks and indentation during development
Document complex logic in the formula description

Visual Design

Don't overuse colors - too many can be overwhelming
Maintain consistency across your org's flows
Ensure color combinations are accessible (sufficient contrast)
Use standard SLDS colors for familiarity
Consider colorblind users - don't rely solely on color (add icons or text cues)

Performance

Formulas evaluate for each row, so keep them reasonably simple
Avoid deeply nested logic if possible
Test with realistic data volumes

Testing

Test with edge cases and unexpected data
Verify styling in both light and dark themes if applicable
Check mobile responsiveness
Have others review for clarity and usability

Common Misconceptions Clarified

Misconception: "I need to create a record variable to reference field values" Reality: The data table automatically provides access to each row's fields. Just reference {!FieldAPIName} directly in your formula.

Misconception: "The formula evaluates once for the whole table" Reality: The formula evaluates separately for every single row, using that row's specific data.

Misconception: "I need complex code to make this work" Reality: Simple IF or CASE formulas returning text strings are all you need.

Need More Help?

If you have questions about implementing conditional cell styling for your specific use case, or if you encounter issues with formulas or styling, don't hesitate to reach out. We're here to help you create visually effective and user-friendly data tables with Avonni components

Last updated 13 days ago

Was this helpful?