UI Page Types#

Overview#

There are four different types of UI Page, which you define in the UI Type field when you create the page. For more information, see Create UI Page.

What follows is a description and example of each UI Page type.

Cluster#

The UI Page of type Cluster allows Inner UI Pages to be grouped inside it and organizes that information in the left panel, which also works as a navigation menu.

The panel on the right belongs to each Inner UI Page and will display details of the selected item.

The layout of the Cluster UI Page that follows shows two Inner UI Pages (left panel) and details of the selected item (right panel):

Both the left and right panels can be called via the available Settings icon and be updated.

Panel Settings from the example Cluster UI Page above (left panel):

Panel Settings from the example Cluster page above (right panel):

In the Edit mode of the Cluster UI Page, you can add or remove Inner UI Pages. This is done through the Panel Settings wizard accessible via the Settings icon on the left panel.

To ensure Inner UI Pages fetch the necessary data correctly, navigate to the Properties tab in the UI Page Settings wizard. Set the Value flag of the isLoaded property to true, as shown below.

Page#

The UI Page of type Page has an organized set of elements that allow you to interact with the system as can be seen in the following:

This page type does not have Inner UI Pages and can be imported into a UI Page of type Cluster. This is, to be eligible as an Inner UI Page, the Inner UI Page must be created as a normal UI Page of type Page; all UI Pages of type Page can be grouped inside a Cluster UI Page.

Step#

The UI page of type Step consists of a Step to call a system action.

In this example two steps are supported:

Wizard#

The UI Page of type Wizard prepares data to call a system action.

The following UI Page of type Wizard reflects the Hold Material Step:

The UI Page of type Wizard can receive UI Pages of type Step and can contain various steps: