Table of Contents

Article

Apply design templates for sections

A design template, which you can think of as a blueprint, is a special section that provides reusable predefined layouts and regions. When creating new sections, developers can specify that the section should use a particular design template. Then, in their instance of the template, developers can map controls into regions specified by the template.

Design templates for sections represent common user interface patterns. Using design templates for sections helps you build a consistent user interface for your application and reduces development time—you define a template once and use it across your application. Design templates simplify making bulk layout changes, as changes to the template will be reflected in all the sections that use the template. In addition, design templates provide a common language between designers and developers. For example, when a designer requests use of the "Card with image and metadata" template, developers understand what that means.

Pega offers the following design templates for sections, which are reusable layouts for common component areas in your application:

Design template Purpose
Cardwithimageandactionforemptystate.png

Shows an image, description, and/or action when no results are returned in a list or container. Requires at least an image, a description, or an action, but can contain all items.

Cardwithimageandmetadata.png

Shows a standalone item or list item with its related data. Requires a title. Optionally includes metadata or an image.

Headerwithassignment.png

Shows the assigned owner for a piece of work. Requires a title and assignment. Optionally includes metadata.

Listitemwithimageandstatus.png

Shows a list item in a repeating dynamic layout that does not include actions. Requires a title. Optionally includes an image or item status.

Listitemwithimagemetadataandactions.png

Shows a list item in a repeating dynamic layout that can contain actions. Requires a title. Optionally includes actions, metadata, or an image.

Pagewithsecondarycolumn.png For pages with both primary and secondary data, shows the layout for the entire page, with a main region and a secondary region.

For example, the following screenshot shows the section pyMiniPartyDetails, which uses the List item with image, metadata, and actions template. The developer mapped controls into each region.

Designtemplateexample.png

Using the UI inspector at run time, you can see the section with controls mapped into the regions defined by the template:

Designtemplateexampleresults.png

Applying a design template for a section

To apply a design template for a section, complete the following steps:

  1. Create a section by clicking +Create > User Interface > Section.
  2. Fill out the Section form:
    1. In the Label field, enter a descriptive name for the section.
    2. Select the Create Section using a Design Template check box.
    3. In the Apply to field, press the Down Arrow key to specify the Applies to class.
    4. In the Add to ruleset fields, verify that the ruleset and ruleset version are correct for the section.
    5. Click Create and open.
  3. On the Design tab of the Section form, click the Change button.
  4. In the Select a template dialog box, click a design template for inner sections to select it.
  5. On the Section form, specify the elements needed for the template, such as a title and image, and click Save.
  6. Drag elements such as controls and images into the appropriate regions of the section and save your work.

For an introduction to using design templates, see Designing sections by using design templates.

Published September 26, 2017 — Updated October 16, 2017


100% found this useful

Have a question? Get answers now.

Visit the Pega Support Community to ask questions, engage in discussions, and help others.