LinkedIn
Copied!

Table of Contents

Layouts

Version:

Only available versions of this content are shown in the dropdown
Applicable to Theme Cosmos applications

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.

Sample repeating dynamic layout that arranges user cards
Ten user cards arranged in two columns, based on a repeating dynamic layout

You can find more visual examples of layouts in the Gallery. For more information, see Accessing the UI Gallery.

  • Creating a dynamic layout

    Reduce UI maintenance and development efforts by using dynamic layouts, which display content flexibly while separating content and presentation. When you add UI elements to a dynamic layout, the layout's format automates the alignment of fields and labels, and saves you manual work.

  • Creating a column layout

    Organize data in your UI with a column layout, which displays primary content, such as a work item, alongside related supporting content, such as an attachment. When you structure your content with a column layout, you enhance the readability and visual appeal of your application.

  • Layout Groups

    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.

  • Creating a navigational tree layout

    Help your users navigate large numbers of nested entries by creating a navigational tree layout with expandable branches. Navigational tree layouts source data from a page list property, and reflect the structure of the source.

  • Creating a repeating dynamic layout

    Save development time by automating the display of repetitive data records with the Repeating dynamic layout.

  • Table layout

    Tables are flexible user interface components that help you present large amounts of information in a clear and consistent way. Because you can quickly customize and expand tables, they provide a reliable basis for users to view or compare information.

  • Creating a hierarchical table layout

    Help users access and compare nested data with a Hierarchical table layout. Hierarchical table layouts support expandable rows, which can provide you with a more compact view of your data.

  • Configuring a screen layout

    Determine the purpose of each area of the screen layout and identify the section to be placed in each area. When you create a new harness, the application populates it with a default screen layout, which you can reorganize conveniently by using one of the out-of-the-box templates.

  • Creating an External web component

    Improve user experience by adding an external web component section to a layout, a region, another section, or a cell in a layout. At run time, the section allows you to connect to external applications and delegate access to OAuth 2.0-protected resources. For example, users can log on to Facebook from Pega Platform by using the section, and access photographs in their Facebook account.

  • Configuration options for layouts

    Learn about the layout configuration options that you can use to customize your layout. For example, you can specify the format, the visibility of the layout, and the source of data for dynamic layouts.

Related Content

Article

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