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.

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