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.

• Create your sample
• Create a Rule-Gallery-DemoUnit record
• Complete the Rule-Gallery-DemoUnit record
• View the sample in 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.

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.

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

5. Enter a description of your sample in the About field.
6. Enter usage instructions in the Usage field.
7. Optional: Add any variants to the Variants table. Variants are displayed in the See Also section of the UI Gallery sample page.
8. 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.
9. 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.

The sample displayed in the UI Gallery

2. Click the entry to view the 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