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