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

In Designer Studio, switch to Application Explorer.

Use the class picker to select the Rule-Gallery-DemoUnit class.

Click the Rule-Gallery-DemoUnit class to open the Gallery Sample tab.

On the Gallery Sample tab, click +Create.

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

Verify that UI has been selected from the Gallery Type drop-down list.

Select the category in which you want to create your sample from the Category drop-down list. Ignore the Sub-Category drop-down list.

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.

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

Enter a description of your sample in the About field.

Enter usage instructions in the Usage field.

Optional: Add any variants to the Variants table. Variants are displayed in the See Also section of the UI Gallery sample page.

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.

Click Save. Your sample is now available for browsing in the UI Gallery.

Viewing your sample in the UI Gallery

Open the UI Gallery and locate your sample.

The sample displayed in the UI Gallery

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

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.

Have a question? Get answers now.

About Pegasystems

Pegasystems is the leader in cloud software for customer engagement and operational excellence. If you’ve driven a car, used a credit card, called a company for service, opened an account, flown on a plane, submitted a claim, or performed countless other everyday tasks, chances are you’ve interacted with Pega. For the past 30 years, our technology – CRM, digital process automation, robotics, AI, and more – has empowered the world’s leading companies to achieve breakthrough results.