Skip to main content


         This documentation site is for previous versions. Visit our new documentation site for current releases.      
 

Creating design templates

Updated on December 13, 2022
Applicable to Theme Cosmos applications

Meet the business needs of your projects by creating custom design templates that you can use to arrange the content of your application into reusable patterns. Design templates define the shape of the regions that hold the elements of your interface.

While Pega Platform provides out-of-the-box templates to cover a variety of design scenarios, you can also create custom patterns.
Before you begin: Review the best practices for creating design templates. For more information, see Best practices for design templates.
  1. In the header of Dev Studio, click CreateUser InterfaceSection.
  2. On the Create Section tab, specify the label, context, class, and ruleset for the design template, and then click Create and open.
  3. If the section is based on a template, in the section editor header, click convert to full section editor, and then confirm the conversion.
  4. On the Settings tab, convert your section to a design template:
    1. In the list, click Design template.
    2. Next to the Template icon field, click the Show image viewer icon.
    3. Browse for and select the image that you want to use as an icon that represents your design template in the design menu, and then click OK.
  5. On the Design tab, define the structure of your template:
    1. From the Structural list, add layouts to the work area of your template, and then configure them to represent the structure of your design template.
      Note: A design template must include at least one empty dynamic layout or group layout that you can convert to a region. You can also convert the default dynamic layout that appears when you create a section to a region. For more information on layout configuration, see Layouts.
    2. Optional: To add a control to a layout, expand the list representing the control type, drag the control that you want to add to the work area, and then configure the control.
      When you add a control to a template, all sections that use that template reference that particular control. For more information on configuring controls, see UI components in a view.
      Note: Layouts that include controls cannot be converted to regions.
  6. Convert empty dynamic layouts into regions:
    1. Select the dynamic layout that you want to convert, and then click the View properties icon.
    2. In the Dynamic layout properties window, in the Design template section, select Use as template region.
    3. In the Region name field, provide a meaningful name for the region.
    4. Click Submit.
    5. Optional: To convert other layouts, repeat steps 6.a through 6.d for that layout.
  7. On the section form, click Save.
Result: The system adds the custom template to the view configuration pane. You can now use it to style user forms. For more information, see Organizing your view.
For example:

The following design template has two regions. Region A is a dynamic layout configured as an inline grid triple section. When you apply the template to a section and populate it with UI elements, this region's settings arrange those elements into three columns.

Region B is embedded in an inline grid double dynamic layout. The inline grid double layout displays content in two columns. In this example, both columns contain embedded layouts. The dynamic layout on the right side of the template cannot be converted into a region, because it holds a text area control.

A sample design template
A design template with a text area and two regions

Have a question? Get answers now.

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

Did you find this content helpful?

Want to help us improve this content?

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