UI Page#

Overview#

The UI Page widget displays any existing UI Page inside the widget area.

General Steps#

To use the UI Page widget in a UI Page, follow the steps below:

1. In any UI Page in Build mode, select the UI Page from the widgets list located on the left side of the page; drag and drop to the desired place in the UI Page.
2. Enter the Settings section of the widget through the three vertical dots.
3. In the General tab, provide a name and a description for the widget. Use the toggle buttons to specify whether the widget should be visible, display the header, or allow full screen mode. Additionally, determine if the widget can be opened as an image in a new tab or exported as an image.

Widget Customization#

1. Optionally, in the Style tab, you can define a Border Width and Color.

   

2. In the Setup tab, define the following properties:

   • UI Type - Select the type of UI Page to be displayed. The available options are: Page and Steps, Page, and Step.
   • UI Page - Choose the specific UI page to be displayed. The options available in this dropdown will be filtered based on the selected UI Type.

   

3. Define the Links between this widget and other elements of the UIPage.

   

4. By saving and closing the settings, the widget will be changed accordingly.

Real Use Case#

To create a more dynamic UI Page, you can connect a UI Page widget with a Form widget. Follow the steps below to set this up:

1. Configure the Fields tab of the Form widget with the following values:

   • Name - Step
   • Value Type - ReferenceType
   • Value Reference Type - Entity Type
   • Value Entity Type - Step

   

2. In the UI Page Setup tab, define the following properties:

   • UI Type - Page
   • UI Page - StepView_Resources

   

3. Connect both the UI Page and the Form widget using the Links Diagram, or the Links tab, as shown below.

   Links DiagramLinks tab

   

   

4. The final result will resemble the image below.