Table of Contents

Article

Adding samples to the UI Gallery

The UI Gallery provides working samples of effective and dynamic user interface configurations. The forms and layouts represent best practice implementations and are guardrail compliant.

You can access the UI Gallery to view and copy samples. To open the UI Gallery, click Designer Studio > User Interface > UI Gallery.

You can extend the UI Gallery by adding your own samples. By default, when you enable the UI Gallery extension, it includes placeholders for three samples, Extension1, Extension2, and Extension3.

In this exercise, the UI Gallery extension is added to the GLBX OnBoarding application, and the default Extension1 is replaced with our sample, Accordion.

Suggested approach

To add a sample to the UI Gallery, enable the extension, as described in the following steps.

Optionally, you also can change the defaults and add more samples. See Change the Defaults and Add Additional Samples.

Enable extensions to the UI Gallery

  1. Click the Application Explorer.

  2. In the search box, search for Rule-Gallery-DemoUnit and click it.

  3. Click +Create in the Gallery Sample.

    Searching for Rule-Gallery-DemoUnit rule in Application Explorer
  4. Enter a description in the Label field and click Create and open.
    Creating a new UI Gallery sample in Designer Studio
  5. Select UI as the Gallery Type and Samples and Combinations as the Category.

  6. Select pxUIGalleryTabsCustom as the Reference Section Name.

  7. For the Thumbnail field, click the Show Image ViewerImage_viewer.png icon and search for the corresponding image.

  8. Add a brief description for the sample in the About and Usage sections.

    Updating the About and Usage sections for the newly created UI Gallery sample
  9. Add the variants for the UI sample.
    Adding the variants to the new UI Gallery sample
  10. Click Save.
  11. As a best practice, build UI Gallery samples in a separate ruleset that is dedicated to this purpose. This approach makes it easy to manage and share the samples across applications.

Optional: Change the defaults

You can change the default extension names, as well as the section rule that is used in each extension.

To change the default extension names from Extension1, Extension2, and Extension3:

  1. Find the pyPopulateFeatures Data Transform in the Data-UIGallery-Features-Extension class.
  2. Open the Data Transform, click Save as, and save it to your application ruleset.Creating a pyPopulateFeatures data transform and adding it to the application ruleset
  3. For .pyFeatures(1), change the Sourcefor .pyName from equal to "Extension1" to point to your sample (in this case, "Accordion").
    If you are adding additional samples, repeat this step for "Extension2" and "Extension3".
    Changing the source for .pyName to "Accordion" for .pyFeatures(1)

To change the section rule used in each extension:

  1. Find the pyFeatureDetails section rule. Open and save the rule to your application ruleset.
    Searching for pyFeaturesDetail section rule in Designer Studio search
  2. On the Page & Classes tab, click to append a row.
    Appending a row on the Page& Classes tab
  3. In the Class field, type Data-UIGallery-Features-Extension, and then click Save.
    Adding Data-UIGallery-Features-Extension class to the pyFeatureDetails
  4. Click the Design tab.
  5. Click in the Section Include title bar for Extension1, and then click the Gear icon () to display the layout properties dialog box.
    Design tab of the pyExtension1
  6. In Layout Properties, update the Section field to use your new sample (in this case, pyAccordionPattern) and set the Visibility field to a when rule to match the value that you entered as the .pyName Source for .pyFeatures(1) in the pyPopulateFeatures Data Transform (in this case, Accordion).
    Updating the Section field in the Layout Properties
  7. Click Open next to the section title, and then click the Gear icon () to display the Cell Properties panel.
    Section title of the panel
  8. On the Cell Properties panel, click the Magnifying glass () icon that is associated with the control.
    Cell properties of the pyExtension1
  9. In the Behaviors area, double-click Open Rule By Keys.
    Open Rule by Keys - rule in the behavior area
  10. In the Behavior dialog box, change the value for the pyStreamName key to reference your sample (in this case, the pyAccordionPattern section rule) and save the rule.
    List of keys and the corresponding values for the Click event
You can change the name of the top-level node, Extensions. In this case, Extensions is renamed GLBX Pattern Library.

Optional: Add samples to the UI Gallery

By default, the pyPopulateFeatures data transform rule contains three extensions. You can add extensions to the UI Gallery by following these steps:

  1. Access the pyPopulateFeatures data transform in Data-UIGallery-Features-Extension.
  2. Select the last Update Page node, Update page .pyFeatures(3), right-click, and select Copy.
    Copying a row in pyPopulateFeatures data transform
  3. Right-click in the same row (containing Update page .pyFeatures(3)), and then select Paste Below.
    Addition of the new row beneath .pyFeatures(3)
  4. A copy of .pyFeatures(3)is displayed.
    Target appearing as .pyFeatures(3) for the newly created row
  5. Change the index number in the second instance of pyFeatures(3) to 4 and update the Source of .pyName to reference the name of your sample (in this case, GLBXGrid).
    You must keep index numbers in sequential order.
    Updating the source to "GLBXGrid" for the new row
  6. Open the pyFeatureDetails section rule, locate the extension that you added, update the Section and Visibility fields of the Section Include to use your new sample, and save the rule. See Change the Defaults for details.

Published May 19, 2015 — Updated May 26, 2015


50% found this useful

Have a question? Get answers now.

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