Skip to main content

This content has been archived and is no longer being updated.

Links may not function; however, this content may be relevant to outdated versions of the product.

Designing sections by using design templates

Suggest edit Updated on October 16, 2017

You can use design templates to build a consistent, high-quality UI, increase reusability, and reduce the effort involved in performing bulk layout changes.

A design template is a special type of section that contains predefined layouts and regions. Regions are dynamic layouts that act as a placeholder for users to map controls that are specific to the section to which the template is applied. You can apply a design template to any section, thereby eliminating the need to design a new layout or copy an existing layout for each section. When you edit a template, the sections using the template are automatically updated.

If you use templates to create sections, you can embed those sections in regular sections. You can also embed regular sections within a section that was created from a template. You can convert a section that was created from a template to a regular section, but you cannot undo the operation.

Pega 7.2.1 provided predefined templates to address the most frequently needed layout use cases. These templates were available for Pega Express only.

For Pega 7.2.2 and later, these templates are also available for use with Designer Studio. Additionally, you can create your own custom design templates.

Available design templates

Predefined design templates

Applying a design template

Apply a standard or custom design template when you configure the view for a step:

  1. Open a case type in Case Designer.
  2. On the Life cycle tab, click an assignment or an approval step.
  3. Click Configure view.
  4. Add fields to your view in one of the following ways:
    • Drag fields from the right pane.
    • Click Add field.
  5. In the Layout tab, click Change Template.
  6. Select a design template.
  7. Reorder the field list by dragging the items between the regions.
  8. Click Submit.

Creating a design template

To create a template, follow these steps:

  1. Open a new section rule form by clicking Create > User Interface > Section.
  2. Enter the required details, and click Create and Open.
Design templates cannot be used if they are stored in a development branch.
  1. On the Settings tab, select Design template.
  2. Select an icon to identify your template:
    1. Click the Gearicon next to the Template icon field to open the Image Catalog (a pop-up version of the Image Library landing page).
    2. Select the image file and click OK. The recommended icon size is 200 x 200 pixels.On the Settings tab, you can configure a section as a design template.
  3. Design the layout. For more information, see Section Form - Completing the Design tab.
  4. Create template regions that act as a placeholder layout and can be customized for each section. Regions cannot contain any fields.
    1. Add a dynamic layout.
    2. In the Properties panel, under Design Template, select Use as a template region.
    3. Enter a name for the region.
  5. Save and close the template.

The following figure shows an example of a custom design template:

Sample design template

A sample design template

Creating sections with predefined layouts

When creating a section, you can use a design template instead of designing the layout in detail.

On the Section rule form, select the Create Section using a Design Template check box to apply a design template to your section automatically. For example, you can use the template that was created in the previous sections to create a section similar to the following one:

A section based on a design template

A section based on a design template

Did you find this content helpful? YesNo

89% found this useful

Have a question? Get answers now.

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

Ready to crush complexity?

Experience the benefits of Pega Community when you log in.

We'd prefer it if you saw us at our best.

Pega.com is not optimized for Internet Explorer. For the optimal experience, please use:

Close Deprecation Notice
Contact us