List component

A list component displays dynamically generated lists. The component requires data and information on how this data is to be displayed.

Defining List component

A List component is declared within its own definition file <ListName>.list. This is created in the Components project folder.

How to create a new definition file

Click the menu New > Add <corresponding component>.
Alternatively, the file can also be created via the context menu New > Add
<corresponding component>.
Select the desired definition file.
Enter a name for the definition file in File name.
Click Finish.
A new definition file with a predefined structure is created.

The List component is created via <ListComponent> and can have the following additional attributes besides the default attributes for Components.

Attribute	Description
`pageSize`	Defines the number of elements which are loaded into the list at once (see Paging). Possible values: Integer greater than `0`
`rowBackground`	Defines the background color of the rows in the list. Possible values: Color value from the theme (e.g. `A50`, `A400` or `09` see Theming) Hexadecimal color value If a `#` character is to be used in a data binding expression, the character must be escaped. A backslash (`\`) is used as escaping character. Data binding expression (Color)
`rowForeground`	Defines a color for the foreground (texts etc.). Possible values: Color value from the theme (e.g. `A50`, `A400` or `09` see Theming) Hexadecimal color value If a `#` character is to be used in a data binding expression, the character must be escaped. A backslash (`\`) is used as escaping character. Data binding expression (Color)
`layout`	Defines the layout mode of the list. Possible values: `fixed`: (default) The column `width` of all columns is identical as long as no column width is defined. If a column width is defined, this column width will be respected. `optimized`: The column `width` is dynamically calculated based on the table content and the optionally set attributes to display all content on the available space. If line breaks are prevented, this can create vertical scrollbars if needed.
`textOverflow`	Defines what should happen if overflowing texts cannot be displayed. Possible values: `ellipsis` : Show with `...` that the text is not finished. Text break is prevented. `hidden` : (default when `layout`="`optimized`") Break off text, paying attention to whole words. Text break is prevented. `wordBreak` : (default when `layout`="`fixed`") Break within word. `allow`: Break off text between words
`borderColor`	Defines the border color of a list component. Possible values Do not use a hash before the color value. Do not use abbreviated notation of the color value. Hexadecimal color value, e.g. `ff5a00` Color code from the color palette of the Web App (see Theming), e.g. `A200`

The data to be displayed must be provided by a Technical Process and correspond to a specific data model. The data model delivered by the Technical Process must be defined in the Properties. To link the data that is delivered by the Technical Process with the representation within the web application, the corresponding Property must be defined and stored in the column definition using Data Binding.

If a property is to be used in the list component, it must be defined as Complex type. This property can contain further properties.

Column definition

The list columns must be defined within the list component. Columns are defined using Column or ImageColumn for columns that contain images. All columns must be defined within Columns.

XML

<ListComponent process="list.wrf">
	<Properties>
		...
	</Properties>
	<Columns>
		<Column .../>
		<Column .../>
		<ImageColumn .../>
	</Columns>
</ListComponent>

Possible attributes for <Column>:

Attribute	Description
`displayName`	Title of the column. Translatable Data binding possible Possible values: Any string
`horizontalAlign`	Defines the horizontal alignment of the content within the column. Possible values: `left`: Content left-aligned `center`: Content centered `right`: Content right-aligned
`mobilePosition`	Defines the position at which the column is displayed in the mobile view. A maximum of four values can be displayed in the mobile view. Possible values: `topLeft` `topRight` `bottomLeft` `bottomRight` If this attribute is not set, the column is not displayed in the mobile view.
`sortable`	Defines if the column can be sorted according to its content. More information on Sorting. Possible values: `true` / `false`
`value`	Defines the content of the column using data binding. Possible values: String (data binding) If no attribute `displayName` is set to the corresponding property, the data binding expression is used as column header.
`width`	Defines the column width. Possible values: Integer `auto`: The width adapts to the content. Can only be used in layout mode `optimized`. The unit in which the column width is specified is set with the `widthUnits` attribute.
`widthUnits`	Defines the unit in which the column `width` is defined. Possible values: `pixels`: The column width is specified in pixels. `percents`: The column width is specified in percents.
`textOverflow`	Defines what should happen if overflowing texts cannot be displayed. Possible values: `ellipsis` : Show with `...` that the text is not finished. Text break is prevented. `hidden` : (default when `layout`="`optimized`") Break off text, paying attention to whole words. Text break is prevented. `wordBreak` : (default when `layout`="`fixed`") Break within word. `allow`: Break off text between words The attribute in `<Column>` has a higher priority and overrides the attribute in `<ListComponent>`.

Possible attributes for <ImageColumn>:

Attribute	Description
`displayName`	Title of the column. Translatable Data binding possible Possible values: Any string
`horizontalAlign`	Horizontal alignment of the graphic in the column Possible values: `left`: Graphic left-aligned `center`: Graphic centered `right`: Graphic right-aligned
`iconColor`	Defines the color of the image. Possible values: Hexadecimal color value, e.g. `ff5a00` Do not use a hash in front of the color value or a shortened notation of the color value! Color code from the color palette of the Web App (see Theming), e.g. `A200`
`image`	Graphic that is displayed in the column. Possible values: Data binding expression (Image)
`imageHeight`	Height of the graphic Possible values: Integer The unit in which the height is specified is set with the `imageUnits` attribute.
`imageUnits`	Unit for the width and height of the graphic. Possible values: `pixels` `percents` (default)
`imageWidth`	Width of the graphic Possible values: Integer The unit in which the width is specified is set with the `imageUnits` attribute.
`mobilePosition`	Defines the position at which the column is displayed in the mobile view. A maximum of four values can be displayed in the mobile view. Possible values: `topLeft` `topRight` `bottomLeft` `bottomRight` If this attribute is not set, the column is not displayed in the mobile view.

Periodic reloading

The ReloadTimer element can be used to reload the List component periodically.

Periodic reloading of data can cause a high load and should only be used in rare use cases.

Possible attributes for <ReloadTimer>:

Attribute Description

refreshTime

Time until reload in seconds

Data binding (integer) possible

Possible values: any integer

itemIdentifier

Optional; Unique key for the data represented in the rows.

The attribute can be used to retrieve rows during reloading and improve the reloading process.
If the attribute is not defined, a string comparison on a record is used to identify the row.

Possible values: Data Binding to a defined property of the grid component

Mobile view of the list component

In the mobile view, lists are displayed in compressed form with a maximum of four columns. The four columns are arranged in the four corners of a rectangle; the arrangement can be defined with the attribute mobilePosition. Other columns are not displayed in the mobile view.

List in the desktop view

List in the mobile view

`<SelectAction>` within a List Component

The Select action is created via the <SelectAction/> element within <Actions> and is triggered when a user selects an entry from a list component.

In addition to the standard attributes of the Select action, the following attribute is available:

Attribute

Description

disableAutoselect

Only when used within a Master/Detail component.
Defines if the first entry of a list is already selected when opening the component.

Possible values: true / false

`<DoubleClickAction>` within a List Component

The DoubleClick action is created via the <DoubleClickAction/> element within <Actions> and is triggered when a user double-clicks an entry from a list component.

Example list component

The following example shows the declaration of a list component.

XML

<ListComponent process="list.wrf">
	<Properties>
		<Property name="ListObject" type="Complex">
			<Property name="Caption" type="String" />
		</Property>
	</Properties>
	<Columns>
		<Column value="#ListObject.Caption" />
	</Columns>
</ListComponent>

The component processes data in the following format.

XML

<?xml version="1.0" encoding="UTF-8" ?>
<OkList size="30">
	<ListObject>
		<Caption>Example 1</Caption>
	</ListObject>
	<ListObject>
		<Caption>Example 1</Caption>
	</ListObject>
	<ListObject>
		<Caption>Example 1</Caption>
	</ListObject>
</OkList>

The above code creates the following result: