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:
Select >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, we'll add the UI Gallery extension to the GLBX OnBoarding application and replace the default Extension1 with our sample, Accordion.

Suggested approach

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

1. In the Search box on the Designer Studio header bar, type pyPopulateFeaturesExtension to find this rule.
   
2. In the Search Results panel, select the pyPopulateFeaturesExtension data transform rule, click Save As, and save it to your application RuleSet.
   
3. On the Definition tab, select the first row, right-click, select Enable, and then save the rule.
   
4. Select select > User Interface > UI Gallery. Click Refresh.
   Extensions displays in the tree, along with three placeholders for Extension 1, 2, and 3.
   
5. You are now ready to add samples to the UI Gallery. Click Extension1, and then click open to open the section rule.
   
6. Click Save As and save the rule to your application RuleSet. Do not change the Applies To field.
7. 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.

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 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 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 "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 Layout tab, and then click to display the wireframes.
5. Click in the Section Include title bar for Extension1, and then click to display the Section Include panel.
   
6. 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.
   
7. Click Open beside the section title, and then click to display the Cell Properties panel.
   
8. On the Cell Properties panel, click the associated with the Control.
   
9. In the Behaviors area, double-click Open Rule By Keys to display the Behavior dialog.
   
10. 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:

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) displays.
   
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 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.