Display Rules

What You'll Learn

This article explains how display rules work in Knack, showing you how to create dynamic forms and displays that adapt to user input. You'll discover how to enhance user experience by showing only relevant fields, customize your interface with conditional formatting, and understand the differences between dynamic and on-change rules in the updated system.

What are Display Rules?

Display rules control how the fields on an element 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 element the rules live on.

Note: Display rules are available on form elements, details elements, and grid elements.

Using Display Rules in Elements

Display rules are both checked and triggered when the element is first loaded in the Live App. If the rules are on a form element, 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.

Note: In some cases, you may want to use show/hide fields based on a field you do not want to display on the form. You can add that field to the form and then hide it using a display rule. The field, though hidden, can still be used in any additional display rules for the criteria if you would like.

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:

Note: Grid elements have different actions compared to forms and details elements. See Building Grid Element Display Rules for more information on those actions.

Rule Types and Behavior

Display rules in the updated system fall into two main categories:

Dynamic Rules

• Always active and continuously evaluated
• When using only Dynamic rules: The last matching rule takes precedence
• Override On Change rules when rule types are mixed
• Best for complex state management and continuous conditions

On Change Rules (Show Once, Hide Once)

• Triggered by field changes
• When using only On Change rules: The last matching rule takes precedence
• Can be overridden by Dynamic rules in cases of conflict
• Best for wizard-like forms or sequential logic

Action Types

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

Show/Hide (Dynamic)

When the criteria are true, this option will display the input, and it will be hidden when the criteria are false. This is a dynamic rule that is continuously evaluated.

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

Tip: In cases with many display rules on a form, it's better to define all the rules as show rules or hide rules separately instead of using show/hide or hide/show rules.

Hide/Show (Dynamic)

This option allows the input to be hidden when the condition is true and displayed when it is false. This is a dynamic rule that is continuously evaluated.

Note: The Hide/Show option is not available on details elements as the record is not actively being edited.

Show (Show Once - On Change)

The input will be displayed when the criteria are met, and it will be hidden when the criteria are not met. This is an On Change rule that triggers once when the condition changes.

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.

Note: This type of rule is not needed on elements (e.g., a details element) where only static information is displayed. If field inputs are on an element and the value matches other required criteria (e.g., yes, it has a value), you do not need a "Show" display rule.

Hide (Hide Once - On Change)

This option will hide the input when the condition is true. This is an On Change rule that triggers once when the condition changes.

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 Element Display Rules

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

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.

Note: Display rules are shown in the grid element editor's live preview within the Builder.

Rule Ordering and Precedence

The order of operations for display rules is from top to bottom, but the precedence depends on rule type:

For Dynamic Rules:

• All rules evaluate in sequence
• More general conditions should come first, specific ones last
• Last matching rule takes precedence
• Override On Change rules when in conflict

For On Change Rules:

• Stop at first match
• More specific conditions should come first, general ones last
• Used for one-time triggers
• Can be overridden by Dynamic rules

Best Practices

Rule Organization

• Use single rule types when possible
• Keep conditions logical and non-redundant
• For On Change Rules:
  • Order from specific → general
  • Use for one-time triggers
• For Dynamic Rules:
  • Order from general → specific
  • Use for continuously evaluated conditions

Avoiding Common Issues

• Don't create redundant conditions
• Avoid mixing rule types unless necessary
• Test rules thoroughly after creation
• Document complex rule logic
• If you do mix dynamic and on change rule types:
  • Place On Change rules at the top
  • This allows On Change rules to execute before potential Dynamic rule overrides
  • Makes rule evaluation more predictable

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.
• When mixing rule types, be aware that in the updated system, Dynamic rules will override On Change rules in cases of conflict, regardless of position.