LinkedIn
Copied!

Table of Contents

Creating design templates

Version:

Only available versions of this content are shown in the dropdown
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.
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 Create User Interface Section .

  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.

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

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

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

Related Content

Did you find this content helpful?

Have a question? Get answers now.

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