Table of Contents



Only available versions of this content are shown in the dropdown

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.

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

  • Dynamic layouts

    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.

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

  • grid

    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.

  • tree grid

    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 thei

Have a question? Get answers now.

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