Display Rules
What Are Display Rules?
Within data components, you can create Display Rules to show/hide field values or display field values with custom display options if custom-defined conditions are met.
For instance, if you have a Project Management App with a Tasks table component, you can create a display rule within the Deadline field column to display past deadlines in red text with a red alert icon.
Within the Tasks table component on the live app, any past deadlines will display with the above display rule.
Let's walk through how to create the above display rule.
Creating Display Rules
To create a display rule, open the data component that contains the field column for which you would like to create the display rule and click on the pencil icon above that field column. In the example above, the display rule was created within the Deadline field column located within the Tasks table component, so open the Tasks table component and click on the pencil icon above the Deadline field column.
You will be directed to the Edit Column page for this Deadline field column. Within the Display Rule tab, click on the Add New Rule button to add a new display rule.
Then, create the display rule by setting the condition and the display action(s) you want to occur when the condition is met. For the example above, create a display rule with the condition that when the deadline is before today (past due), set the text color to red and add a display icon of a red alert icon.
To select your icon, simply click on the icon box, type or search for the icon that you are looking for, and select the icon of your choice.
Once your display rule(s) is saved, it will apply within its Deadline field column on the live app when the condition is met.
You can add multiple conditions for each display rule. For instance, you can add a condition within the above display rule to set the deadline text color to red and add display a red alert icon when the task deadline is before today and the task progress is "Stuck". Simply click on the +icon located to the right of the first condition to add the second condition.
As you can see in the Tasks table component below, now only the task with a past due deadline and a progress of stuck has its deadline displayed in red with a red alert icon.
You can also create multiple display rules within one field column.
For instance, within the same Deadline field column, click on the Add New Rule button beneath the first display rule to add an additional rule with the condition that when the task progress is Done, set the deadline text color to green and add a green check icon.
As you can see in the Tasks table component below, deadlines that are overdue display in red with a red alert icon and deadlines of completed tasks display in green with a green check icon.
You can add as many display rules as you need within each field column.
Please Note: When validating display rules against other fields, those fields must be present in the data component.
Display Rule Actions
Within each display rule, you can choose from six different display rule actions to occur when the display rule condition(s) is met.
Let's discuss each of these six display rule action types.
Set Text Color
As demonstrated in the example above, this action sets the field column text to display in a custom-defined color when the display rule condition(s) is met.
As another example, within an Inventory Tracking App you can set the reorder alert column text to red when a product needs to be reordered.
This display rule will apply on the live app when the condition is met.
Set Text Style
This action sets the field column text to display with custom style formatting including, Bold, Italics, and Strike-through, when the display rule condition(s) is met.
Bold
For instance, set the reorder alert column text style to Bold when the reorder alert is "yes"/when the product needs to be reordered.
This display rule will apply on the live app when the condition is met.
Italics
For instance, set the reorder alert column text style to Bold and Italics when the Reorder alert is "yes"/when the product needs to be reordered.
This display rule will apply on the live app when the condition is met.
Strike-through
For instance, set the MSRP column text style to Strike-through when the MSRP is not blank.
This display rule will apply on the live app when the condition is met.
Set Background Color
This action sets the field column to display with a custom background color when the display rule condition(s) is met.
For instance, if you have a Leads CRM app, you can create a color-coded workflow table component using the background color action within a display rule. For each lead CRM workflow stage, you can add a color-coded background to indicate the status of that stage's progress.
If the above Display Rule is repeated for each lead CRM workflow stage, the resulting table component will appear as such:
Display Icon
This action sets the field column text to display with a custom-defined icon when the display rule condition(s) is met. You can choose to display the icon with a custom-defined color.
For instance, set the reorder alert column to display with a red alert icon when the reorder alert is "yes"/when the product needs to be reordered.
This display rule will apply on the live app when the condition is met.
Hide Value
This action can hide field values from the field column when the display rule condition(s) is met.
For instance, you can add an Edit link within a Task list component and create a display rule to hide the Edit link if the task deadline is before 10/01/2019.
Now, as you can see in the Task list component below, users will not be able to edit task records with deadlines before 10/01/2019.
Hide Text Value
Display Rules can have specific applications and customization settings depending on where they are used. For instance, display rules within forms will have unique applications as well as display rules within link fields.
Learn more about Form Display Rules.
Learn more about Link Display Rules.
Important Reminder: When validating display rules against other fields, those fields must be present in the data component.