Summary

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