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:

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.

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.

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!