Skip to main content

Creating a layout group

Pega Community logo

Note: The following content, referenced from Pega Community, is included here to help you better achieve the module learning objectives.

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

For example, you can configure a Layout group to display related information as a series of tabs that the user can efficiently browse.

After you create a layout group, you can use it as the basis for a region in a design template.

  1. In the navigation pane of Dev Studio, click Case types, and then click the case type that you want to open.

  2. Run a new case by clicking Save and run.

  3. In the new case, navigate to the layout that you want to edit.

  4. In the footer of Dev Studio, click the Live UI icon.

    Note: The Live UI tool is activated. You can now inspect user interface components in real time.
  5. Click the layout that you want to edit, and then click the Open in Dev Studio icon.

  6. If your section is based on a template and cannot be edited, click Convert to full section editor.

  7. On the Design tab, expand the Structural list, and then drag Layout group onto the work area.

  8. In the Choose layout-group format dialog box, select one of the following formats for the layout group:

    • To display layouts as simple pages with no headers or menus, select Default.
    • To display layouts under collapsible headers, select Accordion.
    • To display layouts one at a time as options in a menu, select Menu.
    • To display all layouts at the same time, with the layouts stacked on top of one another, select Stacked.
    • To display a layout one at a time, with a tab for each layout, select Tab.
    • To display the layouts in a custom format that is defined in the skin, select Other, and then select the format.
  9. To include layouts or container elements in the Layout group, expand the Structural list, and the elements that you want into the layout group.

For example: The UI Gallery landing page contains a working example of the Layout group, which you can use as a reference or copy directly to the application. For more information, see UI Gallery landing page.

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

  • Skin form — Components tab — Layouts — Layout Groups

    A layout group combines different types of layouts to display a set of content such as a list of financial accounts and related transactions. You use a layout group to specify how to navigate sets of information. For example, this could be a tab for each account, or by simply changing the type, the account list can be rendered as either a drop-dow

  • Skin form — Components tab — Layouts — Containers

    These styles apply to the container header. You can specify styles for the Default container format and create custom container formats.

If you are having problems with your training, please review the Pega Academy Support FAQs.

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 Academy 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