Table Column Conditional Formatting

1. Overview

Conditional formatting allows you to dynamically style table cells based on data values, enhancing data visualization and user comprehension. You can apply background colors, text colors, and other CSS properties to cells based on record status, performance metrics, threshold values, or any data-driven criteria. This guide covers both background color and text color formatting techniques.

Before You Begin: Ensure you have App Admin or Developer access type to modify screen designs. Familiarity with JSONata expressions and the Screen Designer interface is helpful but not required.

2. Prerequisites

• Access Type: App Admin or Developer
• Permissions: Screen design and deployment permissions
• Resources: A table screen with data containing color values (hex codes like #FF5733 or RGBA values like rgba(255,87,51,1)) or a data transform that calculates colors

3. Procedure Steps

Step 1: Access the Table Column Properties

Navigate to your table screen and select the column you wish to format.

1. Open the Screen Designer from the App Designer menu
2. Locate and open the table screen you wish to modify (or create a new one)
3. Within the canvas area, click on the specific column you want to conditionally format
4. The properties panel will appear on the right side of the screen

Step 2: Configure Display Styles

The Display section contains the Styles property where you define conditional formatting using a JSON object with CSS properties.

1. In the properties panel, expand the Display section
2. Locate the Styles property editor
3. Click the code button (</>) to switch from basic configuration to advanced mode for entering JSON expressions
4. Enter your styling object using the format shown below

Background Color Only:

{
  "background": data.color
}

Text Color Only:

{
  "color": data.yieldColor
}

Combined Background and Text Color:

{
  "background": data.bgColor,
  "color": data.textColor
}

Multiple CSS Properties:

{
  "alignItems": "center",
  "color": data.yieldColor,
  "fontWeight": data.isCritical ? "bold" : "normal"
}

Important: When combining background and text colors, ensure they complement each other for readability. Fuuz does not automatically calculate contrast for custom colors—this is the responsibility of the app designer.

Step 3: Configure the Data Path

The Data Path field determines what value displays in the cell. You have two options:

1. Display color code only (empty cell): Set the Data Path to empty double quotes "" to show just the background color without text
2. Display field value with color: Keep the Data Path pointing to your data field (e.g., color or status.name) to show the value with conditional formatting applied

Step 4: Add Additional Fields for Query

When your styling references fields not in the Data Path, you must add them to Additional Fields to ensure the system queries them.

1. Scroll down in the properties panel to the General section
2. Locate the Additional Fields property
3. Add the field paths used in your styling (e.g., color, status.color, yieldColor)

Step 5: Configure Dynamic Fields (When Applicable)

If your conditional styling depends on data from other columns, page context, or values that change dynamically, configure the Dynamic Fields property to override cached values.

1. In the Display section (under Advanced), locate Dynamic Fields
2. Configure the payload and context arrays to include fields your styling depends on:

{
  "payload": null,
  "context": []
}

Add field references to the context array when your styling logic references data from elsewhere on the page.

4. Configuration Reference

Supported CSS Properties

Color Value Formats

5. Validation & Testing

Success Criteria:

• ✓ Table cells display the correct background color based on data values
• ✓ Text colors are applied correctly and are readable against the background
• ✓ Colors update when underlying data changes
• ✓ Related/referenced model colors display correctly (if using related data)

Testing Scenarios:

• Verify colors render correctly in both light and dark mode (note: custom colors do not auto-adjust for mode)
• Test with various color values (hex, RGBA) to ensure format compatibility
• Confirm that missing or null color values do not break the display
• Validate performance with large datasets using table-level data transforms

6. Troubleshooting

7. Related Resources

Common Use Cases

• Status Indicators: Color-code records by status (e.g., green for active, red for expired, yellow for pending)
• Yield and Performance Metrics: Highlight production yields or KPIs with red/yellow/green based on threshold values
• Inventory Levels: Visual indicators for stock levels (e.g., red for low stock, green for adequate)
• Priority Flags: Distinguish high, medium, and low priority items through color
• Quality Scores: Apply gradient colors based on quality ratings or scores

Design Best Practices

Recommended Pattern: For status-based colors, add a color field directly to your data model (e.g., Status table with a color column). Add this field to Additional Fields in your table query. This allows end users to modify colors through normal data entry without requiring screen redesign, creating a more flexible and maintainable solution.

Performance Optimization:

• Use table-level data transforms for calculating colors—this is the most performant approach
• Alternatively, store colors directly in your data model to avoid runtime calculations
• For complex conditional logic, consider using a lookup table with pre-defined colors for value ranges

Configurable Thresholds Pattern:

For dynamic, user-configurable color thresholds (e.g., yield targets that change by product or season), create a configuration table that stores boundary values and associated colors. Reference this configuration in your table query and use JSONata expressions to determine the appropriate color based on the current value and configured thresholds.

• Screen Designer Overview
• Data Transforms Reference
• JSONata Expression Guide

8. Revision History