Configuring Conditional Colors in Flex Report DataParts

2 minutes to read

You can improve the user experience and readability of your reports by configuring dynamically changing background colors for the displayed records. The rows in your Tabular Reports or Card Report tiles can show different colors based on conditions like status, priority, or custom logic.

For example, if you manage a task list with statuses such as “In Progress”, “Completed”, or “Not Started”, you can assign a unique background color to each status. This allows you to quickly identify the progress of every task at a glance.

Steps:

In your table with task statuses, go to the Table design view and add a new field of the Formula data type.
In the right panel, define the formula to assign a unique class name based on the status. Copy and paste the following code template:

In this template:
- ‘Status‘ is the name of the field where statuses are stored.
- ‘In Progress‘, ‘Cancelled‘ and so on are values available in the status field.
- ‘Color-1‘ and so on are class names assigned to statuses.
Open the relevant Tabular or Card Report, and in the “Configure fields” view, add an HTML block.
In the HTML Block, change the input type to Code and paste the following HTML code:
```
[@field:Status] <span style="display:none!important;" class="[@field:Color_Class]"></span>
```
Replace Status with the name of your status field, or optionally, if you prefer not to show the status text, you can remove [@field:Status] from the pasted code.
Save the HTML block and DataPart configuration.
In your app, click the segment where the Report is located. Click Add elements and drag a Text/HTML element to the header of your segment.
In the HTML/Text element window, change the input type to Code and paste the following CSS code:
In the pasted code, replace the sample color codes with the ones you prefer.
Save the HTML/Text element by clicking Finish.

Result: The backgrounds of your Tabular or Card Report records are now color-coded for status. Note that this is visible on a deployed AppPage. The designer view in Flex does not reflect the custom CSS dynamically.

code1

<code>CASE 
    WHEN [@field:Status] = 'In Progress' THEN 'Color-1' 
    WHEN [@field:Status] = 'Cancelled' THEN 'Color-2' 
    WHEN [@field:Status] = 'On Hold' THEN 'Color-3' 
    WHEN [@field:Status] = 'Completed' THEN 'Color-4' 
    WHEN [@field:Status] = 'Not Started' THEN 'Color-5' 
END</code>

code2

<code><style>  
.tabular-row:has(.Color-1), [data-testid="card-container"]:has(.Color-1) {  
  background-color: #CBC3E3;  
}  

.tabular-row:has(.Color-2), [data-testid="card-container"]:has(.Color-2) {  
  background-color: #FFCCCB;  
}  

.tabular-row:has(.Color-3), [data-testid="card-container"]:has(.Color-3) {  
  background-color: orange;  
}  

.tabular-row:has(.Color-4), [data-testid="card-container"]:has(.Color-4) {  
  background-color: green;  
}  

.tabular-row:has(.Color-5), [data-testid="card-container"]:has(.Color-5) {  
  background-color: #ADD8E6;  
}  
</style></code>