---
tags:
- UI Page widgets
alias: user-guide-uipage-widgets-uisystem-widgets-page
widgetname: UI Page
description: "This documentation explains how to use a UI Page widget to display and customize existing UI pages"
---

# UI Page

![uiPage](images/uiUIPage.png)

## Overview

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

## General Steps

{% include-markdown 'includes/pages/ui_widgets_general_steps.md' %}

![Screenshot showing a UI page settings interface.](images/uipage_widget_general.png)

## Widget Customization

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

    ![Screenshot showing the UI page settings for a widget with options to customize its border width and color.](images/uipage_widget_style.png)

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.

    ![Screenshot showing a widget settings page.](images/uipage_widget_setup.png)

3. Define the **Links** between this widget and other elements of the UIPage.
  
    ![Screenshot showing the UI page linked to a form widget in the Links diagram.](images/uipage_widget_links.png)

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 [[user-guide-uipage-widgets-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`

    ![Diagram showing a UI page with various widgets demonstrating a real-world usage scenario.](images/uipage_widget_usecase1.png)

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

    * **UI Type** - `Page`
    * **UI Page** - `StepView_Resources`

    ![Screenshot showing a widget settings page.](images/uipage_widget_setup.png)

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

    === "Links Diagram"

        ![Screenshot showing a UI page connected to a form widget via links in a diagram.](images/uipage_widget_links_diagram.png)

    === "Links tab"

        ![Screenshot showing the UI page linked to a form widget in the Links diagram.](images/uipage_widget_links.png)

4. The final result will resemble the image below.

    ![Screenshot showing a UI page with an unclear label, illustrating the step for displaying a result.](images/uipage_widget_usecase2.png)