Design UI Page#

UIPage.Design

UIPage.Edit

UIPage.Save

UIPage.Show

Overview#

To have a fully functioning UI Page follow the steps below.

Sequence of Steps#

1. To access the Design View, select Edit from the top ribbon.

   

2. Populate the page by dragging and dropping widgets from the left-side panel into the desired areas. Use the and buttons to zoom in and out on the UI Page. To fit the entire UI Page to your viewport, select the button. You can toggle the grid view with the button.

   

3. Select Preview from the top ribbon to see your UI Page. In Preview Mode, you can choose the layout from the Preview Layout dropdown menu. To continue editing the UI Page, select Back to Editor from the top ribbon.

   

4. Once you are satisfied with the layout, select Save from the top ribbon.

5. To return to the Edit Mode, select Edit from the top ribbon.

Page Builder Settings#

Definition#

In the Definition tab you can set the Title of the page, which defaults to the name of the UI Page.

Additionally, you can configure:

• Page display settings

  • Toolbar Collapsed - expand or collapse the UI Page action bar.
  • Enable Auto Refresh - enable or disable automatic page refresh.

• Widget settings

  • Show Widgets Background - show or hide the background of all the widgets on the UI Page.
  • Free Widget Position - enable or disable free placement of widgets within the grid.
  • Hide Widgets Progress Indicators - show or hide progress indicators for widgets.

Layouts#

The Layouts tab displays the existing layouts and allows you to or layouts.

To a new layout, choose one from the dropdown available in the Page Settings wizard. When you select a predefined layout, the Name, Size Width and Height fields will be automatically populated. You can customize these default values or add new ones by editing the UIPageLayouts Generic Table.

In this wizard, you can also specify if a layout is a master layout, although only one master layout can be defined per UI Page. A visual indicator will show which layout is the master layout in the dropdown when in editing mode.

Additionally, you can or disable the following layout features: Fixed page (non-scrollable), Show left panel, Show right panel, and Exclude From Automatic Selection.

If you select Advanced Options, you can customize the Grid Details, including the number of columns, column widths, and gutter width. To revert to the default settings, click the Apply Default button.

Properties#

Properties are used to share information among page elements.

Similar to the previously described tab, the properties tab can be used to maintain page properties by adding () or removing () them.

The properties must have a Name and Source.

The Source can be Static or URLParameter.

If the Source is Static, you must define a Type from the available options:

If the Source is URLParameter, you, optionally, need to define a Value and enable or disable the Required flag, which defines if the property is mandatory or not.

Action Buttons#

The Action Buttons tab has extra buttons that can be managed in this tab.

It is also possible to change the display order of the buttons by using the and arrows.

To a new button to the page you only need to define the Name. Optionally, you can provide the Description and Alignment (Left/Right). Also, available are the Dropdown, Hide, and Disable options as well as the Action Group setting.

If you define an Action Group when creating the Action Buttons, they will be grouped accordingly and the name of the Action Group will be displayed below the buttons, as shown in the image below.

To assign actions to newly created buttons, follow the steps described in the Button section.

Tasks#

Tasks provide a convenient way of loading data within the UI Page. This data can be used within a link as a way of providing information needed to the available widgets.

The defined Tasks are listed in this tab and can be managed (as in previous tabs).

For each Task it is mandatory to define a Name and Type.

The Type field has many options and some of them have additional mandatory fields as shown in the print above and in the selection of prints below:

The different types are described in the System Tasks section. Depending on the Type you select, be sure to complete all the mandatory information before you Save and Close.

Links#

The Links tab allows you to manage the links between page elements that share data among them. These links can be managed similarly to previous tabs. Once you configured the link details, you can validate the links using the button.

For example, when you select Page from the Source dropdown:

You must specify the Source, Output, Target, and Input fields. The system will guide you to select the correct fields based on your previous selections.

Another example is when you select Left panel from the Source dropdown:

As shown above, the same mandatory fields — Source, Output, Target, and Input — apply here. The system ensures the appropriate fields are selected to match your configurations. You can add more Links by selecting the button. You can also add one or more Converters in the same dropdown menu. For more information, see UI Page Converters.

Additionally, you may choose to Display All Links, or filter them by Incoming and Outgoing.

Creating Steps and Wizards#

The creation of a UI Page of the type Step and Wizard is similar to the creation of a UI Page of type Page, as described in the section Create UI Page.

After creation, the UI Page of the type Step and Wizard will be displayed empty. Enter the Design View by selecting Edit on the top ribbon, followed by Settings.

An extra Validation tab will be visible in the Page Builder Settings.

For the UI Page of type Step, the Validation tab allows you to create a Boolean expression that will be used by the system to validate the step:

For the UI Page of type Wizard, there is also a Validation tab but there is no Layout tab as the layouts are managed by the system. The Show Grid Layout property is also managed by the system and cannot be set.

In both cases, UI Pages of type Step and Wizard, you must Save and Close for the Validation to take effect.

Widgets Categories#

To help you build and customize UI Pages, you can use the widgets available on the left-side panel. To simplify this process, widgets are grouped into distinct categories based on their functionality and purpose. These categories and the widgets they include are described in the table below. For more information on each widget, follow the corresponding link.

Table: Widget Categories

Tasks Categories#

Tasks are elements used to fetch data from the system to feed data to other page elements. You can connect Tasks with the connectable items on the Links tab when you are building a UI Page. They are grouped by category and you can follow the links below to see more information on each individual Task.

Table: Task Categories

Connecting Widgets and Tasks#

When you are in Edit Mode on a UI page, the Links tab provides access to the Links diagram view, where you can easily connect widgets and tasks. This mode also allows you to quickly check the necessary inputs and outputs for a given task or widget. Task outputs that can be directly connected with widget inputs are highlighted in blue. For example, the Uptime Data Value output of the Resource KPI task can be linked with the Data, Configuration Data, and Representation Data inputs of the Data Series widget. To connect any output with other non-highlighted inputs of the widget, a converter is required. For more information, see UI Page Converters.

Additionally, you can connect the elements of the page (Page, Left panel, and Right panel) with either tasks or widgets. Similarly, the inputs and outputs that are directly connectable will be highlighted.

To add additional outputs to any elements of the page, you can use the Properties tab of the UI Page Settings wizard, accessible through the Settings button on the top ribbon. In the example below, an output of Entity Type, specifically a Resource with the value of Mixer-01, is added.

You can then connect the Resource Entity Type, Mixer-01, with the Resource input of the Resources KPI task directly in the Links diagram. Alternatively, you can access the Resources KPI task wizard and use the Links tab to configure the same behavior.

Similarly, you can connect the Operating Time Data Series output of the Resources KPI task with the Configuration Data input of the Data Series widget directly in the Links diagram or through the Settings wizard of the widget or the task, as shown below.

The Data Series widget can be further customized through the Layout and Series tabs in the Settings wizard. For more information, see Data Series widget.

The final result is shown below.

Using Multiple Diagrams#

The Links Diagram view can be overwhelming, specially if you have multiple widgets connected in the same UI Page. A perfect example is portrayed in the image below.

Instead of having everything condensed in one single view, you can define multiple Links Diagrams per UI Page. For that simply select the Diagrams tab in the left panel, and use the , , and to add, edit, or remove Diagrams, respectively. You can also reorder the Diagrams using the drag and drop functionality.

In each Diagram, you can have different items with different configurations, as exemplified by the images below.

If you create links using the settings wizards, the links will appear in the first Diagram:

Copy and Paste#

When editing a UI Page, you can copy and paste Widgets, Tasks, and Action Buttons. Ensure that your browser has permission to use the system clipboard, enabling you to copy and paste UI Page items to another UI Page in a different tab or browser window.

By default, the Copy button is disabled. To enable it, select any item on the UI Page. To select a Widget or a Task, select the area that allows the item to be dragged. Action Buttons are selected by clicking on the top area of the button, where the mouse pointer changes to the default pointer. The Paste button is always enabled and allows you to paste any item onto the desired UI Page. You can also use the usual shortcuts: Ctrl+C and Ctrl+V.

To select multiple UI Page items, press the Ctrl key while selecting the desired items. When correctly selected, the items will display a blue border as exemplified by the image below.

The relative positioning of the copied grid items is retained when pasting. If you place the mouse cursor outside of the grid when pasting, the copied items will be pasted in the first available location in the grid. If you place the mouse cursor over a grid cell when pasting, the item in the upper left corner of the copied items will be placed on the cell the cursor is on.

The copy and paste functionality also applies to the Links tab. If any two widgets in the selection have a direct link or multiple direct links between them, the links will be copied implicitly, including any converters in the link.

UI Pages have master and non-master layouts. You can paste items between layouts within the same UI Page, whether they are master or non-master. This works like dragging an item from the left panel, but you can only paste a widget into a non-master layout once. However, you cannot paste items from a layout in one UI Page into a non-master layout in a different UI Page.

Using Multiple Diagrams#

When working with multiple Diagrams and using the Copy and Paste functionality within the UI Page Grid, the behavior of the pasted items depends on whether or not they have an existing representation in the Links Diagrams:

flowchart TD
    A{Are copied items<br> already present <br>in a Links Diagram?}
    B[Add items <br>to the same <br>Links Diagram]
    C[Add items to <br>the first available <br>Links Diagram]

    A -- Yes --> B
    A -- No --> C

classDef mermaid_businessdata color:#000, fill:#65CDE8, stroke:#65CDE8, stroke-width:0px, font-size:100%;
classDef mermaid_entitylinked color:#000, fill:#FCD5B5, stroke:#FCD5B5, stroke-width:0px, font-size:100%;
class A mermaid_businessdata
class B,C mermaid_entitylinked

Enabling Smart Barcode Scanning#

Smart Barcode Scanning can be enabled on select UI widgets, allowing barcode input to automatically populate corresponding fields. The supported widgets include the Filter, Form, Grid, and Sliding Grid.

Each of these widgets supports the configuration of a Barcode Field Name, which should match the Target Field defined in the LabelSpecificationField Generic Table. Additionally, for the Grid and Sliding Grid, you can also configure a Barcode Field Value Path to define how the scanned value should be matched within each row.

Deploying UI Pages#

To deploy UI Pages refer to the section Copying System Configurations of the Operations Guide, which describes how to copy configurations from one system to another.