Table of Contents

Article

How to add samples to the UI Gallery (6.2 SP2)

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 Pega Button>User InterfaceUser Interface>UI GalleryUI 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.
    Search for pyPopulateFeaturesExtension
  2. In the Search Results panel, select the <strong>pyPopulateFeaturesExtension</strong> data transform rule, click Save As buttonSave As, and save it to your application RuleSet.
    Data Transform Save As
  3. On the Definition tab, select the first row, right-click, select Enable, and then save the rule.
    Data Transform Enable
  4. Select select Pega Button > User InterfaceUser Interface > UI GalleryUI Gallery. Click RefreshRefresh.
    Extensions displays in the tree, along with three placeholders for Extension 1, 2, and 3.
    Extensions
  5. You are now ready to add samples to the UI Gallery. Click <strong>Extension1</strong>, and then click open to open the section rule.
    Open Extension 1
  6. Click Save As buttonSave 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.
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 Extension1, Extension2, and Extension3:

  1. Find the pyPopulateFeatures Data Transform in the Data-UIGallery-Features-Extension class.
    Populate Features Search Results
  2. Open the Data Transform, click Save As buttonSave As, and save it to your application RuleSet.
    Populate Features Data Transform
  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".
    Change Name of Extension1

To change the section rule used in each extension:

  1. Find the pyFeatureDetails section rule. Open and save the rule to your application RuleSet.
    Search
  2. On the Page & Classes tab, click Add Row to append a row.
    Pages and Classes Tab
  3. In the Class field, type Data-UIGallery-Features-Extension, and then click Save buttonSave.
    Add Extensions to Pages & Classes tab
  4. Click the Layout tab, and then click Wireframes icon to display the wireframes.
  5. Click in the Section Include title bar for Extension1, and then click magnifying glass to display the Section Include panel.
    Extension 1 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.
    Accordion Section Include panel
  7. Click Open beside the section title, and then click magnifying glass to display the Cell Properties panel.
    magnifying glass
  8. On the Cell Properties panel, click the magnifying glass associated with the Control.
    Cell Properties panel
  9. In the Behaviors area, double-click Open Rule By Keys to display the Behavior dialog.
    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.
    Change pyStreamName

Tip: You can change the name of the top-level node, Extensions. In this case, Extensions is renamed GLBX Pattern Library.
Extensions
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.
Change Extensions Name

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.
    Copy final extension
  3. Right-click in the same row (containing Update page .pyFeatures(3)), and then select Paste Below.
    Paste below
  4. A copy of .pyFeatures(3) displays.
    Copy of .pyFeatures(3)
  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.
    Rename .pyFeatures(3) to .pyFeatures(4)
  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.

Published February 3, 2012 — Updated May 20, 2015


100% found this useful

Have a question? Get answers now.

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