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
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,
In this exercise, the UI Gallery extension is added to the GLBX OnBoarding application, and the default
Extension1 is replaced with our sample, Accordion.
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
Click the Application Explorer.
In the search box, search for Rule-Gallery-DemoUnit and click it.
in the Gallery Sample.
- Enter a description in the Label field and click .
Select UI as the Gallery Type and Samples and Combinations as the Category.
Select pxUIGalleryTabsCustom as the Reference Section Name.
For the Thumbnail field, click the Show Image Viewer icon and search for the corresponding image.
Add a brief description for the sample in the About and Usage sections.
- Add the variants for the UI sample.
- 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
- Find the pyPopulateFeatures Data Transform in the Data-UIGallery-Features-Extension class.
- Open the Data Transform, click
, and save it to your application ruleset.
.pyFeatures(1), change the Sourcefor .
pyName from equal to
"Extension1" to point to your sample (in this case,
If you are adding additional samples, repeat this step for
To change the section rule used in each extension:
- Find the pyFeatureDetails section rule. Open and save the rule to your application ruleset.
- On the Page & Classes tab, click to append a row.
- In the Class field, type
Data-UIGallery-Features-Extension, and then click .
- Click the Design tab.
- Click in the Section Include title bar for
Extension1, and then click the Gear icon () to display the layout properties dialog box.
- 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).
- Click Open next to the section title, and then click the Gear icon () to display the Cell Properties panel.
- On the Cell Properties panel, click the Magnifying glass () icon that is associated with the control.
- In the Behaviors area, double-click Open Rule By Keys.
- 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.
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:
- Access the pyPopulateFeatures data transform in Data-UIGallery-Features-Extension.
- Select the last Update Page node, Update page
.pyFeatures(3), right-click, and select Copy.
- Right-click in the same row (containing
Update page .pyFeatures(3)), and then select Paste Below.
- A copy of
- Change the index number in the second instance of
pyFeatures(3) to 4 and update the
.pyName to reference the name of your sample (in this case, GLBXGrid).
You must keep index numbers in sequential order.
- 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