Mobile: Group element

Groups are the most basic and versatile container type. A group can be placed anywhere on a view or inside another container, and used to organize elements, control layout, hold data, and add visual styling.

Because they're so flexible, groups are the container you'll reach for most often when building a mobile app.

Groups serve three main purposes:

Groups can serve one or all of these purposes at the same time. A single group might structure a form, control its layout, and load the user record being edited.

For a broader look at container types on mobile, see the article on mobile containers.

Groups can hold a single piece of data, made available to every element inside. Setting this up takes two steps:

Once the data source is set, child elements can reference it directly using expressions like Parent group's User's name.

There are two ways to load data into a group:

The data loads as soon as the view opens. This works well for data known upfront.

Use the Display data in a group action to load data in response to a user action, such as tapping an item in a list.

Both methods behave the same way once the data is loaded.

Groups use one of four layout modes to arrange their children:

Each mode has its own alignment and spacing options. Choosing the right layout mode is one of the most important decisions when building a responsive mobile design that adapts across different device sizes.

Nested groups are a common pattern: an outer group with a column layout might hold several inner groups with row layouts, each representing a section of the view. Together, they form the responsive structure of the design.

Groups can be styled like any other element. You can style individual groups by adjusting their different properties, or by connecting them to predefined styles and/or style variables.

Using shared styles or style variables keeps groups consistent across your app.

When a group is set to be invisible, it can also be set to collapse. A collapsed group takes up no space in the view, so surrounding elements move up to fill the gap. When the group becomes visible again, the layout reflows to make room for it.

This behavior is controlled by the Collapse when hidden property. Without it, an invisible group still occupies its original space, leaving an empty area in the view.

Collapsing hidden groups is useful for building dynamic mobile layouts, where sections of a view appear or disappear based on the user's actions or context.

While mobile navigation typically happens through views, groups can also be used to change what's visible inside a single view. This is useful for things like:

By placing different sections inside separate groups and toggling their visibility, you can build focused, in-view interactions that stay within the same screen.

Two ways to control which group is visible:

Set conditions on each group that show it when certain criteria are true. For example, showing one group when a toggle is on and another when it's off.

Use actions like Show an element, Hide an element, Toggle an element, or Animate an element to control visibility in response to user actions. Toggle is useful for switching between two states, while Animate adds transitions for a smoother visual effect.