Table Column Conditional Formatting

Table Column Conditional Formatting

Article Type: Configuration / How-To Audience: Application Designers, Partners Module: Screen Designer Applies to Versions: 2024.1+ Estimated Time: 15–30 minutes

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.

Note: 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

Property	Example Value	Description
background	data.color	Cell background color
color	data.textColor	Text color within the cell
fontWeight	"bold" or "normal"	Text weight (bold, normal, 100–900)
fontStyle	"italic"	Text style (normal, italic)
textDecoration	"underline"	Text decoration (underline, line-through)
alignItems	"center"	Vertical alignment within the cell

Color Value Formats

Format	Example	Description
Hex	#FF5733	6-character hexadecimal color code
Hex (short)	#F53	3-character shorthand hex code
RGBA	rgba(255,87,51,0.8)	RGB with alpha transparency (0–1)
RGB	rgb(255,87,51)	RGB color values (0–255)
Named	red, green, blue	CSS named colors

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

Issue	Cause	Solution
Color not displaying	Field not included in query	Add the color field to Additional Fields
Invalid color value	Malformed hex or RGBA value	Verify color format (include # for hex, use commas in RGBA)
Related model color not showing	Incorrect data path reference	Use full path: data.status.color for related models
Color not updating dynamically	Cached value not refreshing	Configure Dynamic Fields to include dependent data sources
Text unreadable	Poor contrast between text and background	Add complementary text color styling or adjust background colors
Performance issues with large tables	Column-level transforms for each row	Use table-level data transforms for better performance
JSON syntax error in Styles	Missing quotes, commas, or brackets	Validate JSON structure; property names must be in double quotes

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

Tip: For status-based colors, add a color field directly to your data model (e.g., a 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.

8. Revision History

Version	Date	Editor	Description
1.0	2023-10-05	Fuuz Team	Initial Release — background color formatting
2.0	2025-01-11	Fuuz Team	Added text color formatting, Dynamic Fields, performance guidance, and best practices

See Also

• Sharing-A-Page
• Jsonata-Tutorial
• Simple-Queries
• Field-Level-Help

---

Source: support.fuuz.com