---
tags:
- UI Page widgets
alias: user-guide-uipage-widgets-list-widget
widgetname: List
description: "This documentation details a widget for displaying lists of objects, configurable through settings and linking to other widgets"
---

# List

![listIcon](images/list_widget_icon.png)

## Overview

The List widget is ideal for showcasing lists and is particularly useful when you need to display specific properties for a group of objects. It requires integration with other widgets that provide arrays of objects as output.

## General Steps

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

![List Widget General Settings](images/list_widget_general_settings.png)

## Widget Customization

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

    ![List Widget Style](images/list_widget_style.png)

2. In the **Items** tab, provide the following properties:

    * **Item Name** - Enter the name of the item.
    * **Item Path** - Specify the path of the item.
    * **Type** - Select the type of the value.
    * **Reference Type** - Choose the value reference type. This field is mandatory when the value type is set to `Reference Type`.
    * **Reference Type Name** - Provide the name of the value reference type. This field is mandatory when the Reference Type is set to `Entity Type`, `Enum`, or `Lookup Value`.

    ![List Widget Items Settings](images/list_widget_items_settings.png)

3. Optionally, define the **Links** between this widget and other elements of the UI Page in the **Links** tab.

    ![List Widget links](images/list_widget_links.png)

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

## Real Use Case

The List widget displays output only when linked to another widget that provides an array of objects. Here, we'll connect a [[user-guide-uipage-widgets-query]] widget with a List widget using the settings shown below.

1. Configure a Query widget:

    === "Query Setup"

        ![Query example](images/usecase_list_1.png)

    === "Query Result"

        ![Query example](images/usecase_list_2.png)

2. The link between widgets can be established in two ways: either directly in the Links tab on the left panel or through the Settings wizard of either widget. If you opt to connect the widgets through the Links Diagram, drag and drop the Query and List widgets to the UI Page, and then connect the `Change Selection` output on the Query widget to the `Items` input on the List, as displayed below.  

    ![Linking Widgets](images/ui_page_linking_widgets.png)

    When connecting both fields, a pop-up wizard might appear for configuring the Converter settings. In the example below, the Converter used was the `Any To Any Property`. For more information on Converters, see [[user-guide-uipages-converters]].

    ![Converter settings](images/ui_page_converter_config.png)

3. After configuring the Converter and correctly linking the widgets, you will see a display similar to the image below.

    ![List Widget Items Settings](images/ui_page_linked_widgets.png)

4. If you choose to link the widgets via the Settings wizard, accessible through the three vertical dots, you should provide the information shown below:

    === "Link"

        ![List Widget links](images/list_widget_links.png)

    === "Converter"

        ![List Widget converter](images/list_widget_converter.png)

5. Finally, regardless of the chosen path, you'll see the image below once the widgets are successfully connected.

    ![UI Page with linked Widgets](images/ui_page_with_widgets.png)