--- alias: user-guide-uipages-types description: "Defines four distinct UI page types for organizing and interacting with system data" --- # 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](create_uipage.md). 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): ![Screenshot showing the UI page of type Cluster.](images/uitype_cluster.png) !!! note The buttons available on the top ribbon collate the actions for the Cluster UI Page and the selected Inner UI Page. 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): ![Screenshot showing a panel with settings options on the left side of a Cluster UI Page.](images/uitype_panel_left.png) Panel Settings from the example **Cluster** page above (right panel): ![Screenshot showing a panel with settings options in the Cluster UI.](images/uitype_panel_right.png) 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. ![Screenshot showing a Cluster UI Page with Inner UI Pages settings accessible via the Settings icon.](images/uitype_cluster_inner_pages.png) 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. ![Screenshot showing a UI page with settings for an "isLoaded" property, including a "Value" flag in the Properties tab.](images/uitype_cluster_isloaded.png) ## 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: ![Screenshot showing a UI Page with various interactive elements.](images/uitype_page.png) 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: ![Screenshot showing a UI page with a Step to call a system action, labeled "K Gxpar Matoral".](images/uitype_step.png) !!! note If more that one **Step** is available, they are logical sequential steps, which means you can only proceed to the next step after the previous one is completed. ## 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**: ![Screenshot showing a wizard UI page titled "Ty Hosy Matera" with various fields and options.](images/uitype_wizard.png) The UI Page of type **Wizard** can receive UI Pages of type **Step** and can contain various steps: ![Screenshot showing a Wizard UI page with a field labeled "Track Out Material".](images/uitype_wizard2.png) !!! note If more that one **Step** is available, they are logical sequential steps, which means you can only proceed to the next step after the previous one is completed.