Table of Contents

Article

Adding custom content to the UI Gallery

The UI Gallery provides an extensive selection of samples that highlight Pega 7 user interface (UI) features and UI design best practices. You can extend this selection with your own commonly used UI samples.

For each sample, the UI Gallery uses a Rule-Gallery-DemoUnit record to reference the section that contains the UI sample. To extend the UI Gallery, create a section that contains your sample, and then create a new instance of Rule-Gallery-DemoUnit that references that sample.

Adding a custom sample to the UI Gallery

Complete the following steps to add a custom sample to the UI Gallery.

Creating a custom sample

  1. Create a section rule with the Apply To class set to @baseclass.
  2. Add UI controls that reference properties that are defined for @baseclass. To use properties defined for another class, reference that class on the Pages and Classes tab of the section.
  3. Optional: Add a thumbnail sketch to the Image Library to help communicate the intent of your sample. Your thumbnail should be a square image no larger than 40px x 40px.
  4. Optional: Add a preview of the sample to the Image Library if you intend to add your sample to the Showcase section of the UI Gallery. Your preview should be no larger than 350px x 180px.

Creating a Rule-Gallery-DemoUnit record

You create instances of Rule-Gallery-DemoUnit by viewing the instances for the Rule-Gallery-DemoUnit class, and then clicking +Create in the list header.

Contents of the Gallery Sample tab

A Rule-Gallery-DemoUnit record can be created only by viewing the instances of the Rule-Gallery-DemoUnit class and clicking +Create

  1. In Designer Studio, switch to Application Explorer.
  2. Use the class picker to select the Rule-Gallery-DemoUnit class.
  3. Click the Rule-Gallery-DemoUnit class to open the Gallery Sample tab.
  4. On the Gallery Sample tab, click +Create.
  5. Enter the name of your sample on the New Rule form, select a ruleset and version, and click Create and open.

Completing the Rule-Gallery-DemoUnit record

  1. Verify that UI has been selected from the Gallery Type drop-down list.
  2. Select the category in which you want to create your sample from the Category drop-down list. Ignore the Sub-Category drop-down list.
  3. Select the section rule that contains your sample in the Reference Section Name field. If your sample is not displayed in the SmartPrompt list, verify that you set the Apply To class to @baseclass for your sample.
  4. Click the Gear icon to select either a thumbnail or a preview image from the Image Library.

Fields to customize the Home Address form

The top portion of the Rule-Gallery-DemoUnit record contains the information needed to add a sample to the UI Gallery

  1. Enter a description of your sample in the About field.
  2. Enter usage instructions in the Usage field.
  3. Optional: Add any variants to the Variants table. Variants are displayed in the See Also section of the UI Gallery sample page.
  4. Optional: To add your sample to the Showcase section of the UI Gallery, click Truefor Is Featured, and provide a detailed description in the Feature Description field.
  5. Click Save. Your sample is now available for browsing in the UI Gallery.

Viewing your sample in the UI Gallery

  1. Open the UI Gallery and locate your sample.

Sample added to the UI Gallery

The sample displayed in the UI Gallery

  1. Click the entry to view the sample.

Home Address sample

The sample, as viewed in the UI Gallery. The About content is displayed above the sample, while the Usage content and Variants content are displayed below the sample

Samples that are added to the Showcase section are returned by the report definition pyGetWhatsNew to the data page D_GetShowcaseItems. After you save your Rule-Gallery-DemoUnit record, your sample is displayed in the Showcase section after the D_GetShowcaseItems data page has been refreshed.

Published April 15, 2015 — Updated February 12, 2016


0% found this useful

Have a question? Get answers now.

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