Table of Contents

Layout Groups


Only available versions of this content are shown in the dropdown

Layout groups help you modularize closely related information and optimize the window area. By using conventional and dynamic layout groups, you can present the information that your users need in neat chunks, and create clearer user interface.

Purpose of layout groups

Layout groups divide content into several panes. A user can see one pane at a time and navigate between them by using interface elements such as drop-down menus or tabs. In general, layout groups help organize large amounts of information: the users see only the relevant data at any given time, but the related information is available at a click. A layout group can contain dynamic layouts, column layouts, repeating dynamic layouts, or other layout groups.

Layout groups are available only to user interfaces that are rendered in the HTML 5 document type (standard mode). Layout groups comply with WCAG accessibility guidelines.

Dynamic layout groups

The dynamic layout group provides the same behavior as the layout group component, but you can configure this group to source data from a data page or a property. This approach causes the output to change when the source changes, which ensures that the information on the page is current.

A dynamic layout group can display a list of employees, in which each tab represents a department. When the organization creates a new department and adds that entry to the source data page, the tab for the new department is created automatically, without the need for additional development.

UI Gallery

The UI Gallery landing page contains a working example of this element. For more information, see Accessing the UI Gallery.

  • Creating a layout group

    Optimize the window area by using a Layout group to arrange information into orderly segments.

  • Creating a dynamic layout group

    Optimize the window area by using a Dynamic layout group. In this way, you can modularize closely related information and present all the relevant data to the application users at run time.

  • Creating a templated region based on a layout group

    You use a layout group to present closely related information with accordion, menu, stacked, or tab navigation mechanisms. You can create a templated region that is based on a layout group. You might do this if users need to add, reorder, or remove tabs from screens at run time in App Studio.

  • Managing visibility of a group layout tab

    Save screen space by defining the conditions that govern the visibility of a tab in a group layout. By linking a when rule or an expression to tab visibility, you ensure that users only see the content they need, and create a neater, more friendly interface.

Related Content


Did you find this content helpful?

100% found this useful

Have a question? Get answers now.

Visit the Collaboration Center to ask questions, engage in discussions, share ideas, and help others.