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.

   
4. Enter a description in the Label field and click Create and open.
   

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 Viewer icon and search for the corresponding image.

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

   
9. Add the variants for the UI 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.

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

To change the section rule used in each extension:

1. Find the pyFeatureDetails section rule. Open and save the rule to your application ruleset.
   
2. On the Page & Classes tab, click to append a row.
   
3. In the Class field, type Data-UIGallery-Features-Extension, and then click Save.
   
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.
   
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).
   
7. Click Open next to the section title, and then click the Gear icon () to display the Cell Properties panel.
   
8. On the Cell Properties panel, click the Magnifying glass () icon that is associated with the control.
   
9. In the Behaviors area, double-click Open Rule By Keys.
   
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.
    

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.
   
3. Right-click in the same row (containing Update page .pyFeatures(3)), and then select Paste Below.
   
4. A copy of .pyFeatures(3)is displayed.
   
5. Change the index number in the second instance of pyFeatures(3) to 4 and update theSource of .pyName to reference the name of your sample (in this case, GLBXGrid).
   You must keep index numbers in sequential order.
   
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.