Skip to main content
LinkedIn
Copied!

Table of Contents

Layout Groups

Applicable to Theme UI-Kit applications

Use layout groups to modularize closely related information so that you can optimize screen area and still provide all the information that you want to make available in the application at run time.

Within a layout group, the related content can be divided between several panes. A user can see one pane at a time and navigate between them using a drop-down menu, tabs, accordion or a list.

A layout group helps to organize large amount of information, as the users sees only the relevant part of it at any given time, but the related information is available within a click. A layout group can contain dynamic layouts, column layouts, repeating dynamic layouts, or other layout groups.

On the Components tab of the Skin form, you can set the responsive breakpoints, enabling the layout to adjust to the available space. When the user resizes to the default or custom breakpoint dimensions, tabs turn into an accordion or a menu.

Layout groups are available only to user interfaces rendered in HTML 5 document type (standards mode). Layout groups have been designed to comply fully with WCAG accessibility guidelines.

Layout group formats

Select one of four style formats for layout groups:

  • Tab – In tab mode, each pane is displayed in a separate tab. When several tabs are needed, the tabs are displayed in a single row and you can scroll horizontally with the left and right arrows. Click the down arrow to view all the open tabs and switch to a tab directly.
  • Accordion – Panes are selectable by dividers.
  • Stacked – Panes are selectable by a stacked format.
  • Menu – Panes are selectable by a menu.

A preview of the currently selected format is displayed to the right. You can also preview formats by selecting Actions Launch in the toolbar and then choosing one of the following preview options: Run Process, Open Portal, Harness Preview, UI Gallery Preview, or Skin Preview.

Layout groups facilitate authoring options in App Studio

If you create a region from a layout group for a design template, run-time authors using App Studio can add, re-order, or remove content for the layout group, based on the list of available content. They can also rename tabs and modify how the layout group is rendered by switching between tabbed, accordion, menu, or stacked.

UI Gallery

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

  • Creating a layout group

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

  • Modifying the presentation options of the Layout group

    Make minor adjustments to the styling of the specific Layout group.

  • 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.

  • Adding a when rule to a layout group

    Layouts in a layout group can be configured to activate using a when rule. You can specify a when rule or expression to activate for layout group tab. When an application user lands on the page, the tab activates depending on the when rule or expression.

Did you find this content helpful?

Have a question? Get answers now.

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

Ready to crush complexity?

Experience the benefits of Pega Community when you log in.

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

Pega Community has detected you are using a browser which may prevent you from experiencing the site as intended. To improve your experience, please update your browser.

Close Deprecation Notice
Contact us