Groups

This section covers Groups, that can be used to contain elements and data and control the responsive behavior of child elements

Groups are the most basic container type. It can be placed anywhere on the page, including inside of another container.

It can be used to organize other elements, for aesthetic purposes (by styling it) and to pass data.

Groups can hold elements like the form in the example above.

Using groups for navigation

Groups can be displayed and hidden based on different conditions and user actions. By hiding and showing groups that contain other elements you can let your users navigate your app without having to go to another page.

When a group is hidden, you can set it to collapse its height and width to give room for other groups to be displayed. To the user, the switch is instant – the content on the page simply seems to change without any delay or flickering.

In the example above, we are toggling the visibility of Group A and Group B.

In the animation above we are toggling the visibility of Group A and Group B. The result is that one replaces the other as the blue group collapses its height. This is how you build single-page applications (often abbreviated to SPA) where users can visit different sections of the page while never having to reload.

There are two ways to hide and show groups: conditions and actions.

Using conditions

The first way is to place conditions on the group that looks for specific criteria to be true. A common way to control user navigation is to use conditions together with URL parameters.

In the condition above we are checking the URL for a parameter called navigation. If the value of the parameter is edit user the element is visible.

Using actions

The second way to hide and show groups is to use actions. You can choose to instantly show/hide the group by using the Toggle an element action, or you can apply an animation using the Animate an element action.

The Toggle an element action toggles the visibility of an element.

Other ways to learn

Core reference: group settings

In the core reference section, you'll find all the settings associated with groups.

Reference: Groups