ListView

ListView controls are used to display data objects (simple or complex) from lists. How a single object is displayed is defined as an item template. For this purpose, the display is defined within a layout (flow or Grid Layout). This display is adopted for each individual object. Since the data objects to be displayed are provided by a Technical Process, a corresponding Technical Process must be defined in the component that contains the ListView.

Attribute	Description
`elementWidth`	Defines the width of an element (corresponds to a list entry in the xml file). Possible values: Integer
`elementWidthUnits`	Defines the unit that applies to the sizes of the element. Possible values: `pixels` `percents` (default)
`MaxLength`	Defines the maximum number of entries to be displayed. If there are more entries in the list, the user can display them using a drop-down arrow. Possible values: Integer
`objectList`	Required. Source of the data. The number of entries defines the number of displayed elements. Data binding (list) enabled Possible values: Any string
`background`	Defines a color for the background of the control. This setting overwrites the default color of the color scheme! This attribute doesn't work with the `Maps` and `HtmlDocument` controls! Possible values: Hexadecimal color value, e.g. `ff5a00` Do not use a hash in front of the color value! Do not use a shortened notation of the color value! Color code from the color palette of the Web App (see Theming), e.g. `A200`
`enabled`	Defines if the user can interact with the control. Data binding (boolean) possible Possible values: `true` / `false` or data binding expression The `enabled` attribute replaces the obsolete `disabled` attribute. `enabled="true"` thus corresponds to the obsolete `disabled="false" attribute`.
`fontFamily`	Defines the font family. This attribute overrides the default font of the Web App for this control. If the attribute is defined on an element, the font family is inherited by the element's child elements, unless the child elements have the `fontFamily` attribute explicitly set. This attribute doesn't work with the `Image`, `Maps` and `HtmlDocument` controls. Possible values: `MainFont`: Stored main font Font code from the font palette, e.g. `Font04`
`fontSize`	Defines the font size. This attribute overrides the default font size of the Web App for this control. This attribute doesn't work with the `Image`, `Maps` and `HtmlDocument` controls. Possible values: Any integer or decimal number with a dot as decimal separator, e.g. `20`; `20.8`; `.9` Font size in pixels, e.g. `20px` Font size in points, e.g. `18pt` Font size compared to the font size of the parent element, e.g. `.8em` or `120` Key words: `xx-Small`, `x-small`, `small`, `medium`, `large`, `x-large`, `xx-large`, `smaller`, `larger`
`fontStretch`	Sets the width of the single characters. This attribute overrides the default width of the characters of the Web App for this control. Possible values: `Condensed` `Expanded` `ExtraCondensed` `ExtraExpanded` `Medium` `Normal` (default) `SemiCondensed` `SemiExpanded` `UltraCondensed` `UltraExpanded` This attribute doesn't work with the `Image`, `Maps`, `Charts` and `HtmlDocument` controls.
`fontStyle`	Defines the font style. This attribute overrides the default style of the characters of the Web App for this control. Possible values: `italic`: italic characters `normal`: normal characters (default) `oblique`: italic characters (calculated) This attribute doesn't work with the `Image`, `Maps` and `HtmlDocument` controls.
`fontWeight`	Defines the font weight. This attribute overrides the default font weight of the Web App for this control. Possible values: `Black` `Bold` `DemiBold` `ExtraBlack` `ExtraBold` `ExtraLight` `Heavy` `Light` `Medium` `Normal` (default) `Regular` `SemiBold` `Thin` `UltraBlack` `UltraBold` `UltraLight` This attribute doesn't work with the `Image`, `Maps` and `HtmlDocument` controls.
`foreground`	Defines a color for the foreground (texts etc.) of the control. This setting overwrites the default color of the color scheme! This attribute does not work with the `Map` and `HtmlDocument` controls! Possible values: Hexadecimal color value, e.g. `ff5a00` Do not use a hash in front of the color value! Do not use a shortened notation of the color value! Color code from the color palette of the Web App (see Theming), e.g. `A200`
`horizontalAlign`	Direction in which the elements flow. The order of the elements corresponds to their declaration. Possible values: `left` (default) `center` `right`
`visible`	Defines if the control is visible. Data binding (boolean) possible Possible values: `true` / `false` or data binding expression

Actions

The following actions are available for <ListView> controls. For more information about actions, see Actions.

Note:

The selected element is identified in the output with the attribute selected="true".

`<SelectAction>`

You can insert the Select action using the <SelectAction/> element within <ListView>. The action is triggered when the user selects an entry in the list view.

Note:

You must insert the <SelectAction> element before the desired layout type (BoxLayout, FlowLayout, GridLayout, ResponsiveLayout, TabLayout).

`<DoubleClickAction>`

You can insert the DoubleClick action using the <DoubleClickAction/> element within <ListView>. The action is triggered when the user double-clicks an entry in the list view.

Note:

You must insert the <DoubleClickAction> element before the desired layout type (BoxLayout, FlowLayout, GridLayout, ResponsiveLayout, TabLayout).

Examples

List without actions

Input

XML

<DetailComponent name="ExampleListView" path="ExampleListView" displayName="Example ListView" process="example.wrf">
	<Properties>
		<Property name="ListObject" type="List">
			<Property name="Caption" type="String" />
			<Property name="Name" type="String" />
			<Property name="City" type="String" />
		</Property>
	</Properties>
	<FlowLayout>
		<ListView objectList="#ListObject">
			<FlowLayout>
				<Label value="#Caption"/>
				<Label value="#Name"/>
				<Label value="#City"/>
			</FlowLayout>
		</ListView>						
	</FlowLayout>
</DetailComponent>

Output

The data provided by the Technical Process have the following format:

XML

<?xml version="1.0" encoding="UTF-8" ?>
<Ok>
	<ListObject>
		<Caption>Example 1</Caption>
		<Name>Max Mustermann</Name>
		<City>Ettlingen</City>
	</ListObject>
	<ListObject>
		<Caption>Example 2</Caption>
		<Name>John Doe</Name>
		<City>New York</City>
	</ListObject>
	<ListObject>
		<Caption>Example 3</Caption>
		<Name>Kari Nordmann</Name>
		<City>Oslo</City>
	</ListObject>
	...
</Ok>

Above code creates the following ListView:

List with actions

Input

XML

<DetailComponent
	path="Dashboard"
	displayName="Dashboard"
	process="DataInput.wrf"
	default="true">
	<Properties>
		<Property
			name="ListObject"
			type="List">
			<Property
				name="name"
				type="String" />
		</Property>
	</Properties>
	<FlowLayout>
		<ListView objectList="#ListObject">
			<SelectAction process="Response.wrf" />
			<FlowLayout>
				<TextBox value="#name" />
			</FlowLayout>
		</ListView>
	</FlowLayout>
</DetailComponent>

Output

The data provided by the Technical Process have the following format:

The selected element is marked in the output with the attribute selected="true".

In order to delete all entries of the ListView completely, the attribute empty="true" must be set in the output.

XML

<?xml version="1.0" encoding="UTF-8"?>
<Action>
   <ListObject selected="true">
      <name>Ettlingen</name>
   </ListObject>
   <ListObject>
      <name>New York</name>
   </ListObject>
   <ListObject>
      <name>Oslo</name>
   </ListObject>
</Action>