Using conditional visibility in your app

In Stacker, it is possible to create dynamic apps with responsive layouts.

Conditional visibility allows you to show or hide objects in your app, depending on certain constraints and/or who is accessing the app.

You can use conditional visibility in your record detail page and create form layouts to limit the visibility of an object. This can be based on a condition of the current record, or linked to a specific user role.

How does conditional visibility work in practice?

The app below, for example, is an Employee Directory and the screenshot on the right shows an employee from the Sales Department. Her profile has an additional tab ('Sales Record'). On the left is an employee from another department - and the 'Sales Record' tab for her record is not visible as it's not relevant.

Conditional visibility has been used to show this tab only when the record is that of a Sales Department team member.

The screenshot on the right also shows a 'Payroll and Contract' section which isn't shown on the right - here conditional visibility has been used to ensure this section is only visible when an Admin is viewing the record.

Conditional visibility in Stacker

What conditions can be used to determine visibility of an object in my app?

Conditional visibility can be applied based on either an attribute of the current record (for example are they a member of the sales team), or on the logged in user's role (for example, if they are an admin).

Note: The condition is that of the current record, i.e. not an attribute of the current user's record.

The condition has to be met in order for the object to be visible to the user. If multiple conditions are applied, then all must be satisfied for the element to show. For example, if you apply the filters 'Status is Permanent' and 'Department is Sales' to a particular tab, then it will appear only if both the current record's Status is Permanent AND Department is Sales.

Using conditional visibility in your record detail page layouts

You can use conditional visibility to produce dynamic record detail pages in which the layouts automatically change to suit each individual record.

For example, you could choose to hide a highlight widget when its contents are empty, or you could show a map embed only when an event is marked as 'in-person', rather than virtual.

Conditional visibility can be applied to different elements on the detail layout:

While editing the layout of your record detail page, select the object you'd like to to apply a visibility filter to. Then  click on the eye icon at the very top of the edit bar to open up the conditional visibility configuration.

Set conditional visibility

Using conditional visibility in your create form layouts

You can use conditional visibility to produce responsive create forms in your app, guiding your user through step-by-step data entry. This allows you to change the information you ask for from your user, depending on the answers they gave in previous fields.

A simple example of this would be if a user selects 'Other' in response to a question, a second field can then appear asking them to give more details.

So a sales company could set up a create form for recording new sales leads. Conditional visibility would then ensure that the next step for your user only appears once they've completed the first section of the form, or filled in certain fields. You can also specify that certain fields appear or not based on the status of the lead.

To get the most out of using conditional visibility in your create form, you should break your layout across multiple containers.

When editing the layout of your create form, you can drag in as many field containers as you like and then apply different visibility conditions to each. To do this, select the container you'd like to edit and then click on the eye icon at the top of the edit bar.

To create the appearance of a step-by-step form, you can apply conditional visibility such that the next container doesn't appear until the value of the field in the previous box 'is not empty'.

Next Step

Articles in this section