List component icon List

The List component displays a list of items.

Appearance

Design Rendered
List component rendered
List component design

Attributes

Group Name Description

General

ID

This is a unique id for the component.

Label

The label attribute adds a label to the component, if not empty.

Label position

The position of the label, you can choose between Left or Top.

Label tooltip

When it is defined, a question mark icon appears in the component label. When the user hovers over it, it shows this text in a tooltip.

Description

The description attribute additionally adds a description to the component.

Ignored

If true the component is hidden and the value is not part of the payload.

Visible

Boolean value or expression specifies whether the component is visible or hidden. This expression might include another value in the same form, for instance, use a checkbox bound to {{showAdditionalFields}} and use the very same expression as the visible attribute to show or hide the component according to the checked state of the checkbox. If you want only to show the component, if the form is not used as the init-form, you can use the expression {{root.id}} which evaluates to true only, if there is a current id which is not the id in a start form.

Enabled

A Boolean value or expression specifies whether component is enabled or disabled.

Details

Control Height

The height of the control.

Title

If specified, a title rendered within the list in addition to the label of the list.

Title navigation URL

Specifies a global navigation URL rendered within the title of the list. Use this attribute for instance if you want to navigate to an extended list or the like. Expressions can be used to build the URL, but only global ones, the 'item' is not available here.

Collapsible

Specifies if the list is collapsible with an arrow button.

Data source

Data source

Specify the data source type: Static, REST, or Master.

Options

If the data source type is Static then specify the options for the selection list. The name is used as the label in the selection list, and the value is used to store the selected element.

Format

This is an expression used to generate the label for each item. For example, Mr. {{$item.name}} {{$item.surname}}. The expression is evaluated against the current work object. The selected item is available as $item.

Storage

Specifies how the data retrieved by the REST endpoint is stored in the variable. Choose 'ID' if only the ID of the selected entry should be saved in the variable, choose 'Full value' if the whole object should be saved and thus making it possible to display other values of the selected element within the form as well. Pay attention as storing the full value could lead to bloating the variables with unnecessary information depending on the amount of data retrieved by the REST endpoint.

Map to

The attribute of an item into which the value is mapped. For a Static data source value is commonly used as the map to attribute and for a REST data source id is commonly used as the map to attribute.

Navigation URL

The URL to navigate to for the selected item. The URL might contain expressions, most likely at least {{$item.id}} to include the id of the selected element in the navigation URL.

Target

Specifies the target for the navigation URL, use '_blank' to open the selected item in a new window or '_self' to use the same window for navigation.

Query URL

The REST endpoint URL used to query for the full list of items.

Lookup URL

The REST endpoint URL used to retrieve the item by id.

Path

Where to find the array of items in the response, e.g., 'data.users'.

Documentation

Documentation

Documentation intended to explain concepts of its use for future reference.

Customization

Style class

Stylesheet class name. Add any style classes to be applied to the component for the desired styling and rendering.