Skip to main content

         This documentation site is for previous versions. Visit our new documentation site for current releases.      

This content has been archived and is no longer being updated.

Links may not function; however, this content may be relevant to outdated versions of the product.

Introducing the User Interface Gallery of examples

Updated on May 3, 2020


Introduced in V6.2, the UI Gallery landing page contains guardrail-compliant, working examples of many user interface functions and features. To help you implement similar features in your applications, you can examine and copy the underlying configurations. They will help ensure that your user forms and portals provide:

  • A wide range of controls and actions
  • Dynamic interface behavior
  • Fast response time
  • Flexible layouts

Suggested Approach

The gallery is organized into three categories:

  • Controls — Demonstrations of on-click controls such as buttons and links that trigger actions such as displaying a menu or a opening a modal dialog. The samples also present formatting and styles you can apply to controls such as icon, calendar, text area, and text input.
  • Repeating Layouts — Features you can use in Grid, Tree, and Tree grid layouts such paging, filtering, row editing, and presentation of flow actions in modal dialogs and within the layout.
  • Dynamic UI — Configurations for making automatic browser updates such as refreshing a section or concealing a property, which are triggered by user actions (such as clicking a link), or property or property value changes. Many of these updates are controlled by conditions defined by when rules or expressions that compare property values.

To access the gallery, select    User Interface User Interface  >  UI Gallery UI Gallery.

Select any item in the tree at the left to open a runtime presentation of the corresponding sample. The Button control is shown here:

Depending upon the feature, enter a value, select a list item, hover over a field, or click a control to see the effects.

Exploring the sample settings

To display the section rule that contains the configuration, click the open link next to the sample title. Open the included sections or property panels to locate the settings that define the behavior or appearance.

Using the Button sample shown above:

  1. Click the open link to display the underlying pxActionsButton section.
  2. Open the rule underlying the Button sample shown above.
  3. Select the cell containing the Show a Menu pxIcon control rule.
  4. Click the magnifying glass icon next to the Control field to open the Button parameters dialog. Note the format settings in the Options area.
  5. Click the Event and Action item in the Behaviors area to explore how the button's behavior is configured.

As another example, here are the settings used in the Visible When sample:

To review the Visible When configuration:

  1. Click the open link to display the section pxVisibleWhen .
  2. Select the cell containing the icon.
  3. Click the cell's magnifying glass icon open the pxIcon Properties panel. The Visible: and Condition: fields show the settings governing the icon's visibility.
  4. Click the magnifying glass icon next to the Condition: field to show how the expression is configured in the the Condition Builder.

Copy the sample sections into your application for reference or reuse. For details about the features and descriptions of the settings, see Application Developer help.

Have a question? Get answers now.

Visit the Support Center to ask questions, engage in discussions, share ideas, and help others.

Did you find this content helpful?

Want to help us improve this content?

We'd prefer it if you saw us at our best. is not optimized for Internet Explorer. For the optimal experience, please use:

Close Deprecation Notice
Contact us