Summary

This article discusses dynamic layouts, with an emphasis on how dynamic layouts affect the behavior of portal pages and forms. First made available in Pega 7, dynamic layouts encapsulate expert knowledge about using HTML5 and CSS 3, enabling you to define your content once and present it automatically in any way that's needed by the user. 

As a business analyst or UX designer, you do not need to be concerned with most implementation details because of Pega 7's model-driven responsive UI design.

Dynamic Layout types

There are four layouts in Pega 7 that support HTML5 and responsiveness — dynamic layouts, and three variants that also use dynamic behavior: 

• Column layouts
• Screen layouts
• Repeating dynamic layouts

All of these layouts can behave responsively, meaning that they have elements that are dynamic.

Dynamic layouts

Dynamic layouts are flexible, responsive, and completely configured in the skin. A golden rule of user interface design is to separate content and presentation; a task which dynamic layouts successfully accomplish.

The implementation detail that distinguishes dynamic layouts from Pega's previous layout implementation is the use of <DIV> tags, rather than table <TD> tags. DIVs are more flexible and are handled better by current browsers. By using <DIV>s, these layouts can easily adapt to the different display sizes that are used.

Content versus presentation

The content you see on a Pega application page always belongs to a section. In this context, content refers to the following:

• One or more sections, comprising the rectangular areas on a work item form
• Dynamic layouts that define the metadata that contains the content data
• The properties and the corresponding user interface controls that are added to the layout
• Other dynamic layouts (such as nested dynamic layouts)

Presentation is specified in the skin and defines four CSS files that together determine the colors, fonts, images and layout of portal, work items, rule forms, and report displays. 

Consider an account sign-up form, which typically asks for:

• First Name
• Last Name
• Street Address
• City
• State
• ZIP Code 

Dynamic layouts help to relieve developers and designers of the burden of ensuring compatibility of such customized forms across multiple devices and display sizes.

Responsive breakpoints

A responsive breakpoint is a screen width that triggers a change to presentation. All flavors of dynamic layouts provide configuration settings in the skin to specify a breakpoint's responsiveness. Furthermore, you can specify multiple responsive breakpoints.

At runtime, depending on the screen size (or browser window size), the dynamic layout renders accordingly, providing an optimal viewing experience to the end user. 

Consider a dynamic layout format (such as Inline grid triple). This displays its contents, three fields per row, with labels on the left. For example, you can: 

• Specify a responsive breakpoint so that at 1024px width, it acts like an Inline grid double (which displays its contents, two per row, with labels on the left). 
• Specify a responsive breakpoint at 768px, at which it will act like a stacked layout (left-aligned, with labels on top). 

Dynamic layouts in your applications

When a dynamic layout is constrained by the size of the window or the screen, it rearranges its layout so that components remain available to use or can be easily accessed.

In this portal page example, there are three stages, beginning with both sidebars visible:

In this case, the left sidebar (navigation panel) is hidden first, but it remains available to reopen using the icon at top left:

After this, the right panel (supporting information) is moved below the main panel:

This is an example of a column layout, which is explained further below. A big advantage of this type of dynamic layout is eliminating the need for horizontal scrolling when viewed on small devices.

Dynamic layouts with forms and fields

In dynamic layout forms, the individual fields resize and rearrange themselves when the window is constrained. It's the same behavior of “shrink and stack” that applies here at the field level.

First, the field widths are reduced, then they are partially or completely stacked as illustrated:

You can lay out a dynamic form using nested dynamic layouts, as illustrated below. The outer one is an inline grid; the inner ones are stacked layouts containing inline layouts.

Each layout has a property panel through which you specify the layout's properties. In this way, you can nest dynamic layouts to create a form that conforms intelligently to available space — meaning that related fields retain their intended relationship.

The Properties panel of the dynamic layout is where you specify the layout format, which determines the positioning of fields, location of the label, the spacing between fields, and so on. You can also specify a container format that specifies the padding around the dynamic layout, the style of the heading if provided, and so on.

The layout format and container format are named formats that are defined in the skin. This is what provides the separation between content and presentation.

Additionally, a dynamic layout can float, so it can be moved left or right as the window space becomes confined.

The skin settings for a dynamic layout can be found on the Change Component tab of the skin instance. The settings provide you with the capability to specify all the presentation aspects of the layout. This includes: 

• The width of the layout
• Alignment of controls
• Alignment of labels
• Spacing between items

Using Floats

A Float allows you to push an element to the left or right, allowing other elements to wrap around it. It will move as far left or right as its container allows.

Starting in Pega 7, the Float setting allows you to float any dynamic layout. A floating element doesn't resize, it simply moves. This is very useful in page elements (particularly headers) that you want to resize without hiding the contents of the page element.

Take the following example of a header comprising two dynamic layouts – the right one floated (red outline):

As the screen size is reduced, the left and right layouts get closer together. When there is no space left, the right layout moves under the left.

Column Layouts

Column layouts are best suited for when the main information to display is a work item and it has some category of supporting information.

For example, a product page might have:

• Search filters in the left sidebar
• The selected product in the main area
• Price/purchase details in the right sidebar

The position of the sidebar column in relation to the main column determines the layout and its behavior. There are three configurations:

Two-Column (Sidebar-Main)
Two-Column (Main-Sidebar)
Three-Column (Sidebar-Main-Sidebar)

• In the skin, you can create any number of formats of each type. 
• In the section, you pick the type of column layout, then you are offered the layout formats from the skin for that type.
• The sidebar is given a fixed width in the skin. 
• The main column occupies whatever remaining width is available.

Column layout responsiveness means that when a responsive breakpoint is met, the sidebars move under the main content area and take up the width of the screen. The side panel moves under the main content when a responsive breakpoint is hit.

Each column of a column layout is itself a dynamic layout. This behavior eliminates the need for horizontal scrolling where space is constrained, as with a mobile device.

Screen Layouts

Screen layouts replace panel sets, and are mostly used for portal layouts. They define the structure of a harness included in a composite portal.

Screen layouts can also be configured to be responsive, which is done in the skin. This configuration makes the screen layout (and eventually your portal) appear perfectly on a handheld device.

• In the main area, a Dynamic Container is typically displayed.
• The left and right side panels disappear from view.
  • An icon appears in the header for reshowing the panel(s).
  • You can configure it so each side panel can be set to break at different screen sizes.

Repeating dynamic layouts

A repeating dynamic layout is a dynamic layout that can be bound to a list. It automatically repeats its content for each item in the list. 

The way the items are repeated depends on the format (a dynamic layout format) specified on the repeating dynamic layout. This enables you to repeat the items either:

• One under the other (stacked)
• One after the other and then wrapped as it runs out of room (inline)
• In a grid or tile-like presentation

If the format specifies one or more responsive breakpoints, the list can go from tiled 3-in-a-row to tiled 2-in-a-row to stacked based on the screen size or browser window size it is displayed in.