Using Display Rules

This article will provide a guide on utilizing Knack's display rules and effectively managing them within your app.

This article covers the following topics:

• What are display rules?

• Using Display Rules in Views

• If: Define Your Criteria

• Then: Define Your Actions

  • Show/Hide

  • Hide/Show

  • Show

  • Hide

  • Rename Label

• Building Grid View Display Rules

• Order of Operations

• Notes & Troubleshooting

What are display rules?

Display rules control how the fields on a view are displayed. Using display rules, you can hide or show form inputs, change input labels, add icons, and change text and background color depending on which view the rules live on.

Using Display Rules in Views

Display rules are both checked and triggered when the view is first loaded in the Live App. If the rules are on a form view, these rules are also checked when a user changes the value of any of the form’s inputs. 

A display rule is created by defining the conditions (if) that trigger the actions (then):

With a multi-part form, you may want to use display rules to show/hide fields based on fields from an earlier part of the form.

For example, let’s say we have a form that is for a job application.  Different jobs may have different questions associated with them.

Based on what job the candidate selects, the application can display different questions. 

If: Define Your Criteria

These are the conditions that will activate the actions of your rule when the rule's criteria is true.

You have the option to include multiple criteria to activate the action, in which case each criterion must be true.

Then: Define Your Actions

The "Then" criteria is the action that is triggered when the criteria are met:

Here are the available options for selection in form and details views, along with their respective definitions:

Show/Hide

When the criteria are true, this option will display the input, and it will be hidden when the criteria are false.

Please note that this option is not available on details views as the record is not actively being edited.

Hide/Show

This option allows the input to be hidden when the condition is true and displayed when it is false.

Show

The input will be displayed when the criteria are met, and it will be hidden when the criteria are not met. Unlike the Show/Hide option, this alternative only executes a single action.

If you require the rule to perform the opposite action when there is a change in a variable on the page, you will need to add another rule that explicitly states the opposite action.

Example: On a form to edit an appointment record, you can have a rule to show the appointment date and time field only when the same field’s data is before today, preventing the user from rescheduling an appointment on the same day.

Hide

This option will hide the input when the condition is true. 

Unlike the Hide/Show option, this alternative only executes a single action. If you require the rule to perform the opposite action when there is a change in a variable on the page, you will need to add an additional rule that explicitly states the opposite action.

Example: Hide the Late Fee field if the Due Date is earlier than the current time. This ensures that the user cannot add a late fee when it is not necessary. 

Rename Label

Modify the label of the input when the criteria are met. This is most suitable for making minor aesthetic or usability adjustments.

Example: For a car or truck? With a multiple choice field, the label for the Mileage field can be dynamically changed to either "Car mileage" or "Truck mileage" based on the user's selection.

Building Grid View Display Rules

With display rules, you have the capability to incorporate rules that will modify the display of columns in grid views.

A display rule is added by defining the conditions (if) that trigger the actions (then):

If: The conditions that will activate the actions when they are true. You can include multiple conditions to trigger the action, but each criterion must be true.

Then: Once the condition is met, the action is triggered. Display rules offer five different actions that can be triggered:

• Set Text Color: Changes the text color to a color of your choice.

• Set Text Style: Changes the text to italic, bold, strikethrough, or a combination of all three.

• Set Background Color: Changes the background color of the cell in the grid to a color of your choice.

• Display Icon: Displays an icon next to the value in the cell with a color of your choice.

• Hide Value: Hides the value in that cell in the grid.

Order of Operations

The order of operations for display rules is from top to bottom. This means that when the page is loaded, the rules start with the first rule at the top and continue down the list.

It is important to note that display rules will continue to be applied even if a rule is already matched. This means that if the first rule is matched, and then later the third rule is also matched, the last rule will only take precedence if its "Then" action differs from the first rule that was matched.

However, if both rules' "If" criteria are met (one rule may have more than one criteria added to it), and the "Then" actions for both rules are the same, then both rules will be executed.

Notes & Troubleshooting

• If you hide a field on a form, any value in that field won't be stored. 

• If you are hiding a field that does not reappear under the correct conditions, please ensure that you are using the Hide/Show option instead of the Hide option.

• If you find that a display rule is producing unexpected results, it is important to verify that you have correctly used Show/Hide instead of Hide/Show, or vice versa.