Skip to main content


         This documentation site is for previous versions. Visit our new documentation site for current releases.      
 

Layout Groups

Updated on November 10, 2022
Applicable to Theme Cosmos applications

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.

For example: 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.

Have a question? Get answers now.

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

Did you find this content helpful?

Want to help us improve this content?

We'd prefer it if you saw us at our best.

Pega.com is not optimized for Internet Explorer. For the optimal experience, please use:

Close Deprecation Notice
Contact us