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:
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,
Extension3. In this exercise, we'll add the UI Gallery extension to the GLBX OnBoarding application and replace the default
Extension1 with our sample, Accordion.
To add a sample to the UI Gallery, enable the extension, as described below.
Optionally, you can change also the defaults and add more samples. See Change the Defaults and Add Additional Samples.
Enable Extensions to the UI Gallery
- In the Search box on the Designer Studio header bar, type pyPopulateFeaturesExtension to find this rule.
- In the Search Results panel, select the
<strong>pyPopulateFeaturesExtension</strong> data transform rule, click Save As, and save it to your application RuleSet.
- On the Enable, and then save the rule.
tab, select the first row, right-click, select
- Select select > > UI Gallery Click Refresh.
Extensions displays in the tree, along with three placeholders for Extension 1, 2, and 3.
- You are now ready to add samples to the UI Gallery. Click
<strong>Extension1</strong>, and then click open to open the section rule.
- Click Save As and save the rule to your application RuleSet. Do not change the Applies To field.
- Modify the rule to reflect the sample that you want to appear in the UI Gallery, and then save the rule. You can now access your sample in the UI Gallery.
As a best practice, build UI Gallery samples in a separate RuleSet dedicated to this purpose. This approach makes it easy to manage and share the samples across applications.
Change the Defaults (optional)
You can change the default extension names, as well as the section rule used in each extension.
To change the default extension names from
- Find the
pyPopulateFeatures Data Transform in the
- Open the Data Transform, click Save As, and save it to your application RuleSet.
.pyFeatures(1), change the Source for .
pyName from equal to
"Extension1" to point to your sample, in this case, "Accordion". If you were 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 Save.
- Click the Layout tab, and then click to display the wireframes.
- Click in the Section Include title bar for
Extension1, and then click to display the Section Include panel.
- In the Section Include panel, change the Use Section, Title, and Visible When fields to include your new sample, in this case, pyAccordionPattern. Note that the value in the Visible When field must match the value that you entered as the .
pyName Source for
.pyFeatures(1) in the
pyPopulateFeatures Data Transform. In this case, that value is Accordion.
- Click Open beside the section title, and then click to display the Cell Properties panel.
- On the Cell Properties panel, click the associated with the Control.
- In the Behaviors area, double-click Open Rule By Keys to display the Behavior dialog.
- On the Behavior dialog, change the Value for the
pyStreamName key to reference to your sample, in this case the pyAccordionPattern section rule. Save the rule.
Tip: You can change the name of the top-level node, Extensions. In this case, Extensions is renamed GLBX Pattern Library.
To change the name, find the
pyPopulateFeaturesExtension Data Transform in your application RuleSet, modify the Source of the
.pyName property, and then save the rule. In this sample, the Source for
.pyName is set to GLBX Pattern Library.
Optional: Add Additional Samples to the UI Gallery
By default, the
pyPopulateFeatures data transform rule contains three extensions. If you want to add additional extensions to the UI Gallery, follow these steps:
- Access the
pyPopulateFeatures data transform in
- 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 you added, update the Use Section, Title, and Visible When fields of the Section Include to use your new sample, and save the rule. See Change the Defaults for details.