Skip to main content


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

Layouts

Updated on November 15, 2021
Applicable to Theme UI-Kit applications

You can use standard layouts to design the user interface for your application. The standard layouts are rendered in HTML5 standard mode and are styled in the skin of the application, providing an optimal user experience on desktop, tablet, and mobile phone. You can use layouts within a harness or a section while designing the user interface.

You can use the following layouts while designing the user interface or portal for your application:

  • Screen layouts
  • Dynamic layouts
  • Column layouts

Screen layouts are usually used to create portals for an application and are only used within a harness.

Dynamic layouts and column layouts are used in sections. You can add content, such as properties, controls and other sections, within a section in a dynamic or a column layout. The placement, alignment, width, and arrangement of items in a layout is determined by the format in the skin.

  • Applying design templates

    Make your applications consistent and save development time by using design templates. Design templates represent common user interface patterns and specify regions in which you add user interface elements, such as icons and controls.

  • Working with dynamic layouts

    A new set of standards-based layouts enable you to provide an optimal user experience on a desktop, tablet, and phone.

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

  • Creating a dynamic layout

    A Dynamic layout is a DIV-based layout that allows for highly flexible display of content.

  • Layout Groups

    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.

  • Creating a columns layout

    A Columns layout provides the ability to display main content, such as a work item, alongside supporting content, such as an attachment.

  • Creating a repeating dynamic layout

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

  • Creating a dynamic layout group

    To optimize the screen area, use 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 table layout

    Help users access and compare data with table layouts. Use tables in your applications as a flexible basis for users to process large amounts of information. For example, tables in a price comparison application can help users efficiently identify the best offer.

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

  • Creating a navigational tree layout

    A tree layout allows users to view, navigate, and access the properties in pages in an embedded Page List property. The user can quickly expand and collapse branches of the tree to find entries of current interest.

  • Creating an External web component

    You can add an external web component section to a layout, a region, another section, or a cell in a layout. At run time, this 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 this section and access photographs in their Facebook account.

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