List#

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#

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

1. In any UI Page in Build mode, select the List 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. You can also select the navigation mode behavior: open a new page, replace the current page, or none.

Widget Customization#

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

   

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.

   

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

   

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 Query widget with a List widget using the settings shown below.

1. Configure a Query widget:

   Query SetupQuery Result

   

   

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.

   

   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 UI Page Converters.

   

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

   

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:

   LinkConverter

   

   

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