Layouts

Layouts help you organize UI elements on the screen and determine the overall presentation of your portal. You can use layouts within a harness or a section to define how your application, or a section in that application, looks in different contexts and on different devices.

Layouts and templates

When you design your application using App Studio, you use design templates to organize the views in the user interface. Design templates rely on the design system to provide a low-code framework for your user interface, and Pega Platform offers many out-of-the-box templates for different application scenarios. For example, a Home UI template divides the screen into two columns that you can scroll independently.

You can build your own design templates and other custom UI elements by using layout types in Dev Studio. Custom layouts are rendered in HTML5 standard mode and are styled in the skin of the application, which helps you maintain a consistent UI theme. This solution offers more flexibility, but is also more difficult to maintain, and requires additional development effort during migration to Cosmos React UI.

Layout types

You can use the following layouts when you create the user interface for your application:

Dynamic layout: Arranges item and label placement and alignment depending on the type of screen, such as mobile, desktop, and laptop. You can define breakpoints for dynamic layouts that improve readability by determining the contents of screens on mobile devices.
Column layout: Displays main content next to supporting content in up to three columns. For example, you can have case data in the main column, and relevant attachments in a supporting column.
Layout group: Contains various layouts that optimize screen space by grouping related information. You can configure layout groups to appear as a set of tabs, a menu, or a stack after reaching a breakpoint. Layout groups are especially effective with large amounts of data.
Dynamic layout group: Creates repeating dynamic tabs which present information from a property or a data page. The dynamic layout group provides the same responsive behavior as the layout group component.
Navigational tree layout: Organizes data into expandable and collapsible branches to help you focus on relevant content. You can configure the branches to allow further actions, such as opening data objects in a branch.
Repeating dynamic layout: Automates the display of repetitive data. For example, in a self-service portal, you can arrange items in a shopping cart into a list that contains information about each product, such as name, type, and price. Repeating dynamic layouts support sorting and progressive data display.
Table layout: Helps organize and compare data by column and row.
Screen layout: Determines the overall structure of a screen at a page level through the use of templates. Screen layouts support responsive display and can automatically adjust your interface to fit various mobile displays. These layouts also use semantic HTML tags to mark regions in the page and provide Accessible Rich Internet Applications (ARIA) roles by default. Unlike other layouts, you can use screen layouts only within a harness.