All Collections
Advanced
Display Conditions
Display Conditions
Patrick avatar
Written by Patrick
Updated over a week ago

This article explains how to create custom sets of Display Conditions based on variables like which user is logged in, or other data sources, to conditionally show/hide pages, blocks, Form fields and Table columns in your Frontly apps.

This is a similar but distinct function from the User Groups and Permissions article found here as they both pertain to access and visibility settings, but display conditions can be more granular and can be contextualized with more data sources than just user groups.


Locating Display Conditions

Below are the applicable parts of the app that can support display conditions and where to locate their settings.


Pages

To show/hide pages conditionally, go to your page's 'Access' settings in the sidebar, you can add Display Conditions.


Blocks

To show/hide a block conditionally, go to the block's Visibility settings in the sidebar when the block is active:


Form Fields

To show/hide Form fields based on a condition, click on a specific field label in the Form directly or on the editing panel > click 'Show Advanced Settings' > click to find the Display Conditions menu.


Table Columns

To show/hide table columns based on a condition, click on the label of the Table column directly or on the editing panel to locate the Display Conditions menu.


Overview of Condition Fields

Clicking the 'Add Condition' function will make a condition form like appear.

Here's a breakdown of what each field in this form is for:

Value 1: Here is where you'll have to set your data source which will ideally be a dynamic variable. This data source is where the system will analyze the parameters you've defined in order to determine if the conditions have been met.

Operator: You would ideally want this to be 'Equal' to the 'Value' you will establish, but there are many other operators to choose from depending on how you wish to apply the conditions for your permissions.

Value 2: This can be static or dynamic. Clicking on the field will open an injector modal where you can select the dynamic variable of your choice. Within the data source you've defined for Value 1, the system will search for the value you've entered here and determine if the condition has been satisfied in relation to the Operator you've set.

Condition Type: Use this to specify how a condition will be combined with one or more other condition to create an expression:

  • When conditions are connected with an 'AND' operator, all specified conditions must be true for the entire expression to be true.

  • When conditions are linked with an 'OR' operator, the expression is true if at least one of the conditions is true.

Click here to learn about all the Dynamic Variables

Click here to learn more about the Dynamic Variable's Data Sources


Scenario

Imagine creating a feedback form intended for collecting and understanding why your users are unsubscribing from your business' mailing list.

You'll want to create a 'Reasons' field with a select dropdown consisting of some common responses. Additionally, you may have an 'Other' option inside this dropdown list that, when selected, will populate the 'Other' field. Rather than having the 'Other' field show regardless if the 'Other' option was selected or not.

Upon adding a display condition for the 'Other' field, the configuration for this scenario is shown below. The way it's defined here, the system is checking to ensure the Form field 'Reason' has the value selected 'Other' before it shows itself to the user.

Did this answer your question?