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 (Salesforce Lightning Design System) classes. You can apply a consistent style to all cells in a column or implement conditional styling where the appearance changes based on the data in each row (e.g., highlighting risk levels).

Core Concept: The SLDS Cell Class Attribute

The key to styling cells is the SLDS Cell Class attribute is found within the configuration settings for each column in your Avonni Data Table.

1. Select your Avonni Data Table component.

2. Go to the Columns section in the configuration panel.

3. Select the specific column you want to style.

4. Navigate to the Cell Attributes settings.

5. Locate the SLDS Cell Class input field.

This field accepts standard SLDS class names, allowing you to control text color, background color, font weight, and more.

Method 1: Applying 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.

1. Follow the steps above to navigate to the SLDS Cell Class attribute for your desired column.

2. Directly type the SLDS class names you want to apply into the field. Separate multiple classes with a space.

   • Example 1: To make all text in the column green and bold, enter: slds-text-color_success slds-font-weight_bold

   • Example 2: To give all cells a light grey background and capitalize the text, enter: slds-theme_shade slds-text-title_caps

   [Screenshot Placeholder: Image showing the Advanced tab of a column config, with static SLDS classes typed directly into the SLDS Cell Class field]

3. Click Done for the column and the Data Table. The styling will be applied consistently to all rows in that column.

Useful SLDS Classes for Cell Styling:

Here are some standard SLDS classes you can use (combine them with spaces):

• Backgrounds (Often use with slds-theme_shade):

  • slds-theme_success: Green

  • slds-theme_error: Red

  • slds-theme_warning: Yellow

  • slds-theme_info: Blue

  • slds-theme_alt-inverse: Dark grey

  • slds-theme_inverse: Dark blue/grey

  • slds-theme_shade: Light grey (good base for colored backgrounds)

• Text Color:

  • slds-text-color_success: Green

  • slds-text-color_error: Red

  • slds-text-color_warning: Dark yellow

  • slds-text-color_inverse: White (for dark backgrounds)

  • slds-text-color_default: Standard text color

• Text Style:

  • slds-text-title_caps: ALL CAPS

  • slds-font-weight_bold: Bold text

  • slds-font-style_italic: Italic text

Method 2: Applying Conditional Styling (Style Based on Row Data)

This is a more advanced technique when you want the cell's appearance to change dynamically based on its value or the value of another field in the same row. This is perfect for visually indicating status, priority, or risk levels.

You'll use a Flow Formula resource to calculate which SLDS class(es) should be applied for each row.

Step 2.1: Create a Flow Formula Variable

1. In your Flow's Toolbox, click New Resource.

2. Select Resource Type: Formula.

3. Give it an API Name (e.g., formula_ConditionalCellStyle_Risk).

4. Select Data Type: Text.

5. In the formula editor, create logic (using IF() or CASE()) that evaluates the relevant field from the current row and outputs the desired SLDS class string.

   • Example using IF() for a "Risk Level" text field: (Assuming {!YourRecordVariable.Risk_Level__c} references the risk field for the current row)

     Copy

     IF(
         {!YourRecordVariable.Risk_Level__c} = "High", 
         "slds-theme_shade slds-theme_error slds-text-color_inverse", 
         IF(
             {!YourRecordVariable.Risk_Level__c} = "Medium", 
             "slds-theme_shade slds-theme_warning", 
             IF(
                 {!YourRecordVariable.Risk_Level__c} = "None", 
                 "slds-theme_shade slds-theme_success", 
                 "" /* Default: No specific class */
             )
         )
     )

     (Remember to use the correct merge field syntax for your Flow's record variable)

6. Click Done.

Step 2.2: Map the Formula to the Column

1. Navigate back to your target column's SLDS Cell Class attribute (Columns > Select Column).

2. Instead of typing text directly, click into the Mapped icon.

3. Select the Formula variable you created in Step 2.1 (e.g., {!formula_ConditionalCellStyle_Risk}).

4. Click Done for the column and the Data Table. When the flow runs, Avonni will evaluate your formula for each row and apply the resulting SLDS classes to the cell in that specific row.

Testing Your Flow

Save and Run (or Debug) your Flow. Observe the configured column in the Avonni Data Table.

• If you used Method 1, all cells in the column should have the same static style.

• If you used Method 2, your formula logic should dictate that cells should have different styles depending on the data in each row.

Conclusion

The SLDS Cell Class attribute in the Avonni Data Table provides a flexible way to enhance data presentation in your Screen Flows. You can apply simple, consistent styling across a column or implement powerful, data-driven conditional formatting using Flow Formulas to highlight key information effectively