With the display logic, you can create conditional logic, just like you would create a filter for a model. This allows you to display or hide a part of your page with complex logic by using grouping and AND/OR logic.
Currently, you'll find the display logic (under the logic option category) inside the following two components:
The Box component
The Conditional component
You can find the display logic on these two components under the logic options category in their settings once the component is on your canvas.
Display logic with a variety of variable kinds, you can use data from data components, page variables, and form inputs.
Setting up the display logic
Note: we're using a data container in the example below but you can also create this using the new page variable feature, read more about that here.
In this example, we will be applying the display logic to a detail page. In this detail page, we can view the details of a project, and create additional tasks that belong to the project. However, once the project is done we don’t want users to be able to add new tasks since the project is finished.
With the display logic within a box, we will hide the ‘create task form’ once the status of the project is set to ‘done’.
To set the display logic within a box, you first need to make sure the box is placed within a data component, this way the box can filter its display logic based on the data used within the page.
Here, the box is placed within a data container on a detail page that shows the data of a single project. You can see the box is within a data container because the blue edge of the box now shows purple, meaning data is connected to this component.
Open the ‘logic option’ tab in your box component settings and press the display logic button to open the configuration wizard.
I only want to show the create form whenever the project still needs to be finished.
Therefore I am setting up the filter in a way the box will only hide when the status is equal to done.
(For more information about setting up the data filter, check our data filtering document)
After configuring the display logic filter, drag the create form inside the box.
Everything placed inside the box will now follow the display rules.
Result
We can now compile our page and test this, I opened up a project detail page that shows a project with the status ‘In progress’.
After changing the status to ‘Done’ and pressing save, the box including its content will hide from sight, exactly the way we have set it up!
Note: if your form does not reload your data component or page, you will have to reload manually before the form hides.
You can apply this to pages or parts of pages where you only want to show certain segments or data based on data in your application.
Use display logic to make your pages more dynamic than before!
Other use cases
You can use display logic for more precise use cases as well, for example, in the Create form we can hide an input if a different input has a certain value. An example would be when you need to register yourself and, if you have a partner, your partner as well.
In the example above you can register yourself but in the image above is a conditional that only shows its contents when you click on the checkbox to verify that you have a partner. The conditional is configured like this:
We're checking whether the Checkbox is checked or not if it shows the partner inputs.
Request information
Page variables also have a built-in feature named 'request information', this is the status of a page variable. This status allows us to show a loader when the data is still loading like the image below.
To create a loader like the image above you can create a public file that you can upload in a Media component like so:
In this example, the Media component is within a Conditional component, within the Conditional component we can select the Request information of a page variable like so:
If we then check is the loading state of the component is 'true' we'll see the spinner pop up that we just added.
Beware that the chances of seeing the loading state are very low if you have good internet speed and if the data you want to show isn't that big.
If I compile the page and reduce my bandwidth for this example I can see the spinner pop up for a brief moment:
You can apply the same logic for the 'Is error', and 'Is success' request information. You can also use this logic in the 'Multi rule' option of the Conditional component:
You can use the following form inputs in your display logic:
Text input
Text area input
Number input
Phone number input
Decimal input
Rating input
Email input
IBAN input
Password input
Price input
URL input
Checkbox input
Switch input