Blog

Gallery - How to conditionally set the row background color in a gallery control

To help users more easily identify rows in gallery controls, we can conditionally highlight notable rows. This post describes how to carry out this task.

This post walks describes how we can conditionally highlight rows in a gallery control.

As a demonstration, we'll take a SharePoint list of issue records. Each record contains an issue description and a target close date. To help users identify the issues that are outstanding, here's how how to highlight rows where the "target close date" is greater than today.


How to set the background colour of a gallery control

There are two relevant properties that control the background colour of a gallery control - Fill and TemplateFill.

Although both of these properties define the background color of a gallery control, the TemplateFill property supports formula that reference the "ThisItem" keyword. It's this feature that enables us to access row values and to set different background colours for specific rows.

How to conditionally set the background colour

To conditionally set the row background colour, we set the TemplateFill property of the gallery control based on an if condition. For this example, we would set the TemplateFill color to the following formula:

If((Now() > ThisItem.TargetCloseDate)  And (IsBlank(ThisItem.CloseDateTime)), 
RGBA(244, 196, 196, 0.23)
)

This applies a pink background colour to rows without a  'close date time' value, and a 'target close date' value that has been exceeded.


Tip - How to visually pick a background colour

Our formula uses the following pink background color - RGBA(244, 196, 196, 0.23).

From the designer, a quick way to visually choose an RGBA background value is to right click a label and to open the the colour picker control. We can use this to determine a RGBA value that corresponds to a colour.


Conclusion

This post described how to improve the presentation of a gallery control by conditionally highlighting rows. We can accomplish this task by setting the TemplateFill colour to a value that is derrived through an if statement.
Related posts