Grid Component

A grid component is ideal for displaying data in a tabular display. In the grid settings, the behavior of the grid component can be defined by setting individual elements.

Note:

The grid component will be optimized for being displayed on mobile devices in a future version of X4 BPMS.

Defining a Grid Component

A grid component is declared within its own <GridName>.grid definition file. This file is created in the Components project folder.

How to create a new definition file:

Click in the New > Add <name of component> menu.
Alternatively, you can create the file using the New > Add <name of component> context menu.
Select the desired definition file.
In File name, enter the name of the definition file.
Select Finish.
A new definition file with a predefined structure is created.

The data to be displayed must be provided by a Technical Process and must comply with a specific data model.

The data model provided by the Technical Process must be mapped in the Properties. To link the data provided by the Technical Process with the representation within the web application, the corresponding Property must be defined and stored via (7.4.0-en) Data Binding in the GridColumn definition.

Note:

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

The grid component is created via <GridComponent> and can have the following attributes:

Attribute	Description
`background`	Defines a background color. Data Binding (Color) possible. This setting overrides the default color of the color scheme. Possible values: Hexadecimal color value, e.g. `ff5a00` Do not use a hash before the color value. Do not use abbreviated notation of the color value. Color code from the color palette of the Web App (see Theming), e.g. `A200`
`fontFamily`	Defines the font family within the component. The property is inherited by all controls and actions of the component. Data Binding (String) possible. Possible values: Font code from the font palette, e.g. `Font04`
`fontSize`	Defines the font size within the component. The property is inherited by all controls and actions of the component. Data Binding (String) possible. 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 point, e.g. `18pt` Font size compared to the font size of the parent element, e.g. `.8em` or `120%` Keywords:`xx-Small`, `x-small`, `small`, `medium`, `large`, `x-large`, `xx-large`, `smaller`, `larger`
`fontStretch`	Defines the width of each character. The property is inherited by all controls and actions of the component. Data Binding (String) possible. Possible values: `Condensed` `Expanded` `ExtraCondensed` `ExtraExpanded` `Medium` `Normal` (default) `SemiCondensed` `SemiExpanded` `UltraCondensed` `UltraExpanded`
`fontStyle`	Defines the slant of the font. The property is inherited by all controls and actions of the component. Data Binding (String) possible. Possible values: `italic`: italic font `normal`: normal font (default) `oblique`: oblique font style (calculated)
`fontWeight`	Defines the font weight. The property is inherited by all controls and actions of the component. Data Binding (String) possible. Possible values: `Black` `Bold` `DemiBold` `ExtraBlack` `ExtraBold` `ExtraLight` `Heavy` `Light` `Medium` `Normal` (default) `Regular` `SemiBold` `Thin` `UltraBlack` `UltraBold` `UltraLight`
`foreground`	Defines the font color. Data Binding (Color) possible. This setting overrides the default color of the color scheme. Possible values: Hexadecimal color value, e.g. `ff5a00` Do not use a hash before the color value. Do not use abbreviated notation of the color value. Color code from the color palette of the Web App (see Theming), e.g. `A200`
`headerBackground`	Defines the background color of the header. Data Binding (Color) possible. This setting overrides the default color of the color scheme. Possible values: Hexadecimal color value, e.g. `ff5a00` Do not use a hash before the color value. Do not use abbreviated notation of the color value. Color code from the color palette of the Web App (see Theming), e.g. `A200`
`headerFontFamily`	Defines the font family of the header. Data Binding (String) possible. Possible values: Font code from the font palette, e.g. `Font04`
`headerFontWeight`	Defines the font weight of the header. Data Binding (String) possible. Possible values: `Black` `Bold` (default) `DemiBold` `ExtraBlack` `ExtraBold` `ExtraLight` `Heavy` `Light` `Medium` `Normal` `Regular` `SemiBold` `Thin` `UltraBlack` `UltraBold` `UltraLight`
`headerForeground`	Defines the font color of the header. Data Binding (Color) possible. This setting overrides the default color of the color scheme. Possible values: Hexadecimal color value, e.g. `ff5a00` Do not use a hash before the color value. Do not use abbreviated notation of the color value. Color code from the color palette of the Web App (see Theming), e.g. `A200`
`iconColor`	Defines the color of the component's icon. Data Binding (Color) possible. This setting overrides the default color of the color scheme. Possible values: Hexadecimal color value, e.g. `ff5a00` Do not use a hash before the color value. Do not use abbreviated notation of the color value. Color code from the color palette of the Web App (see Theming), e.g. `A200` A200. A200
`iconUrl`	Path to the graphic file or specification of a Material Icon that will be used as the component's icon. The graphic file must be contained in the `Resources` folder directly below the Web App project. Path specification relative to the `Resources` folder. The material icon must be specified with the prefix `icon`, e.g. `icon:<MaterialIconName>`. Possible values: String (URI), e.g. `clock.png` `icon:<MaterialIconName>` , e.g. `icon:extension` With `Ctrl`+`Space` you get an overview of the available icons. The selection may differ from the actual available Material Icons.
`itemsPerPage`	Defines the number of rows displayed per page. Possible values: `5` (default) `10` `20` `50` `100`
`process`	Required. Path to the `.wrf` file that provides the data for the component. The process must be contained in the `Services/Processes` folder. Path specification relative to the `Services/Processes` folder. Possible values: String (URI)
`title`	Title of the component. Displayed in the application as a header Data Binding (String) possible Possible values: Any string or data binding expression
`titleBackground`	Defines a title background color. Data Binding (Color) possible. Possible values: Hexadecimal color value, e.g. `ff5a00` Do not use a hash before the color value. Do not use abbreviated notation of the color value. Color code from the color palette of the Web App (see Theming), e.g. `A200`
`titleForeground`	Defines a color for the title foreground. Data Binding (Color) possible. Possible values: Hexadecimal color value, e.g. `ff5a00` Do not use a hash before the color value. Do not use abbreviated notation of the color value. Color code from the color palette of the Web App (see Theming), e.g. `A200`
`viewmodel`	Path to a `.viewmodel` file that references entities with properties from a Data Model Project. For more information on using Data Model Projects in Web Apps, see Using a Data Model in an X4 Web App. The `.viewmodel` file must be contained in the `ViewModels` folder. Path specification relative to the `ViewModels` folder. Possible values: String (URI)
`visible`	Defines the visibility. Data Binding (Boolean) possible. Possible values: Boolean or string for Data Binding

Example of a Grid Component

XML

<?xml version="1.0" encoding="UTF-8"?>
<GridComponent xmlns="http://softproject.de/webapp/1.0" process="loadGrid.wrf">
	<Properties>
		<Property name="list" type="Complex">
			<Property name="id" type="Integer" displayName="No." />
			<Property name="company" type="String" displayName="Company" />
		</Property>
	</Properties>
	<GridSettings>
		<Resize />
		<Reorder />
		<ColumnVisibility />
		<Filtering />
		<Multiselect checkboxSelection="true" />
		<Autoselection />
	</GridSettings>
	<GridColumns>
		<GridColumn value="#list.id" sortable="true" />
		<GridColumn value="#list.company" />
	</GridColumns>
</GridComponent>

Output Format of the Process

The Technical Process loadGrid.wrf mentioned in the above example generates the following output:

CODE

<?xml version="1.0" encoding="UTF-8"?>
<OkList>
	<list>
		<id>1</id>
		<company>Energy Station</company>
	</list>
	<list>
		<id>2</id>
		<company>Patrol Work</company>
	</list>
	<list>
		<id>3</id>
		<company>Brein Innovation</company>
	</list>
	<list>
		<id>4</id>
		<company>Solar It</company>
	</list>
	<list>
		<id>5</id>
		<company>OffGrid Promotion</company>
	</list>
	<list>
		<id>6</id>
		<company>SoftProject GmbH</company>
	</list>
	<list>
		<id>7</id>
		<company>SoftProject Ibérica SL</company>
	</list>
	<list>
		<id>8</id>
		<company>SP Digital AG</company>
	</list>
</OkList>

Grid Settings

Within the GridSettings element, the elements listed below can be declared to define the behavior of the grid component:

Possible elements

Element	Description
`Appearance`	The `Appearance` element can be used to specify whether the margins of the rows, columns, and cells in the Grid component should be reduced to fit more data on a screen. When the `Appearance` element is used, the `spacingMode` attribute can be set and take the following values Possible values: Data binding possible `dense` (default) `normal` Note: If you declare the `spacingMode` attribute, the default value is `dense.` If you do not set the `Appearance` element within the GridSettings element, the normal appearance of the grid component is maintained.
`Autoselection`	The `Autoselection` element defines that the first row of the table is automatically selected when the grid component is opened.
`ColumnVisibility`	The `ColumnVisibility` element can be used to show and hide individual columns.
`Editing`	The `Editing` element has a function only if the `editable="true"` attribute has been set in the `GridColumn` element. When using the `Editing` element, the `reloadOnSave` attribute can be set and contain the following values: Possible values: `true`: When saving using a Save Action, the Grid Component is reloaded. `false`: When saving using a `Save Action`, the Grid Component is not reloaded.
`Filtering`	The `Filtering` element can be used to define conditions according to which filtering is to be performed.
`Footer`	The `Footer` element can be used to define various settings for the footer of the grid component. When using the `Footer` element, the following attributes can be used: `cleanupEnabled` Determines whether a button to clear settings such as column width, column visibility, filter and sort settings is displayed in the footer of the grid component. When this button is clicked, all settings made by the user in the browser are cleared from the browser's local memory and the grid component is displayed as configured in the `.grid` file. Note: Experienced users can alternatively delete the settings in the browser as follows: Open the developer tools. Go to Applications > Storage > Local storage. Delete the saved settings manually. Data binding possible Possible values: `true` (default): The button for deleting the settings from the local browser memory is displayed. `false`: The button for deleting the settings from the local browser memory is not displayed. `pagingEnabled` Specifies whether to display the elements for scrolling through multiple pages in the footer of the grid component. Data binding possible Possible values: `true` (default): The elements for scrolling through multiple pages are displayed. `false`: The elements for scrolling through multiple pages are not displayed. Note: If server-side paging is enabled and pagingEnabled is set to false, the server-side paging mode is disabled and client-side filters can be used. `reloadEnabled` Determines whether a button for reloading the page is displayed in the footer of the grid component. Data binding possible Possible values: `true` (default): The button to reload the page is displayed. `false`: The button to reload the page is not displayed. If all three attributes are set to `true,` the footer of the grid component looks as follows: Note: The `cleanupEnabled, pagingEnabled,` and `reloadEnabled` attributes are also set to `true` by default if no footer element is declared in `GridSettings.` If all three attributes are set to fa`l`se, no footer is displayed in the grid component. This can be useful to save screen space if you do not need a footer.
`GridHeader`	The `GridHeader` element can be used to define the alignment of the column header. When using the `GridHeader` element, the `horizontalAlign` attribute can be set and contain the following values: Possible values: `left` (default): The column header is left-aligned. `center`: The column header is centered. `right`: The column header is right-aligned.
`Multiselect`	The `Multiselect` element allows multiple entries to be selected. When using the `Multiselect` element, the `checkboxSelection` attribute can be set and contain the following values: Possible values: `true` / `false`
`Remember`	The `Remember` element can be used to store the settings for specific properties of the Grid Component. When using the `Remember` element, the following attributes can be used: `rememberFiltering` Specifies whether to save the specified filter setting and apply it the next time the Grid Component is opened. Data binding possible Possible values: `true` (default): The specified setting is saved. `false`: The specified setting is ignored. `rememberPage` Specifies whether to save the specified pagination setting and apply it the next time the Grid Component is opened. Data binding possible Possible values: `true` (default): The specified setting is saved. `false`: The specified setting is ignored. `rememberSelection` Specifies whether to save the specified setting for the selection of elements in the Web App and apply it the next time the Grid Component is opened. Data binding possible Possible values: `true` (default): The specified setting is saved. `false`: The specified setting is ignored. `rememberSorting` Specifies whether to save the specified sort setting and apply it the next time the Grid Component is opened. Data binding possible Possible values: `true` (default): The specified setting is saved. `false`: The specified setting is ignored. `rememberVisibility` Specifies whether to save the specified visibility setting and apply it the next time the Grid Component is opened. Data binding possible Possible values: `true` (default): The specified setting is saved. `false`: The specified setting is ignored.
`Reorder`	With the `Reorder` element the column headers can be clicked and moved to another position by drag and drop.
`Resize`	The `Resize` element can be used to click on the transitions of the column headers and to change the width of the respective columns by holding down the mouse button.
`RowSettings`	The `RowSettings` element is used to define the rows within the Grid component. The `RowStyle` element, which defines the appearance of the row, can be declared within the `RowSettings` element. For more information, see "Defining Rows in the Grid Component".

Defining Rows in the Grid Component

Within the grid component, the rows must be defined using the RowSettings element. You can use the RowStyle element contained in RowSettings to define colors for individual rows.

Note:

If a cell is at the intersection of a row and a column for which colors have been defined, the column definitions take precedence.

The RowStyle element can be declared within the RowSettings element. It can have the following attributes

Attribute	Description
`background`	Defines a background color. Data binding (Color) possible Note: The data binding for this attribute can be defined with the property of type Complex, which is valid for the entire grid component. This setting overrides the default color of the color scheme. Possible values: Hexadecimal color value, e.g. `ff5a00` Do not use a hash before the color value. Do not use abbreviated notation of the color value. Color code from the color palette of the Web App (see Theming), e.g. `A200`
`fontFamily`	Defines the font family within the component. The property is inherited by all controls and actions of the component. Data Binding (String) possible. Possible values: Font code from the font palette, e.g. `Font04`
`fontSize`	Defines the font size within the component. The property is inherited by all controls and actions of the component. Data Binding (String) possible. 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 point, e.g. `18pt` Font size compared to the font size of the parent element, e.g. `.8em` or `120%` Keywords:`xx-Small`, `x-small`, `small`, `medium`, `large`, `x-large`, `xx-large`, `smaller`, `larger`
`fontStretch`	Defines the width of each character. The property is inherited by all controls and actions of the component. Data Binding (String) possible. Possible values: `Condensed` `Expanded` `ExtraCondensed` `ExtraExpanded` `Medium` `Normal` (default) `SemiCondensed` `SemiExpanded` `UltraCondensed` `UltraExpanded`
`fontStyle`	Defines the slant of the font. The property is inherited by all controls and actions of the component. Data Binding (String) possible. Possible values: `italic`: italic font `normal`: normal font (default) `oblique`: oblique font style (calculated)
`fontWeight`	Defines the font weight. The property is inherited by all controls and actions of the component. Data Binding (String) possible. Possible values: `Black` `Bold` `DemiBold` `ExtraBlack` `ExtraBold` `ExtraLight` `Heavy` `Light` `Medium` `Normal` (default) `Regular` `SemiBold` `Thin` `UltraBlack` `UltraBold` `UltraLight`
`foreground`	Defines the font color. Data Binding (Color) possible Note: The data binding for this attribute can be defined with the property of type Complex, which is valid for the entire grid component. This setting overrides the default color of the color scheme. Possible values: Hexadecimal color value, e.g. `ff5a00` Do not use a hash before the color value. Do not use abbreviated notation of the color value. Color code from the color palette of the Web App (see Theming), e.g. `A200`
`highlightBackground`	Defines the background color of the selected row on hover. Data binding (Color) possible Note: Please note that the data binding for this attribute cannot be defined within the property of type Complex that is valid for the entire grid component, but that a separate property must be defined. Example XML <Properties> <Property name="list" type="Complex"> <Property name="id" type="Integer" displayName="Nr." /> <Property name="company" type="String" displayName="Unternehmen" /> </Property> <Property name="Settings" type="Complex"> <Property name="SelectedColor" type="Color" /> <Property name="HighlightColor" type="Color" /> <Property name="ColumnColor" type="Color" /> </Property> </Properties> This setting overrides the default color of the color scheme. Possible values: Hexadecimal color value, e.g. `ff5a00` Do not use a hash before the color value. Do not use abbreviated notation of the color value. Color code from the color palette of the Web App (see Theming), e.g. `A200`
`highlightForeground`	Defines the font color of the selected row on hover. Data binding (Color) possible Note: Please note that the data binding for this attribute cannot be defined within the property of type Complex that is valid for the entire grid component, but that a separate property must be defined. Example XML <Properties> <Property name="list" type="Complex"> <Property name="id" type="Integer" displayName="Nr." /> <Property name="company" type="String" displayName="Unternehmen" /> </Property> <Property name="Settings" type="Complex"> <Property name="SelectedColor" type="Color" /> <Property name="HighlightColor" type="Color" /> <Property name="ColumnColor" type="Color" /> </Property> </Properties> This setting overrides the default color of the color scheme. Possible values: Hexadecimal color value, e.g. `ff5a00` Do not use a hash before the color value. Do not use abbreviated notation of the color value. Color code from the color palette of the Web App (seeTheming), e.g. `A200`
`selectedBackgroundColor`	Defines the background color of the selected row by click. Data binding (Color) possible Note: Please note that the data binding for this attribute cannot be defined within the property of type Complex that is valid for the entire grid component, but that a separate property must be defined. Example XML <Properties> <Property name="list" type="Complex"> <Property name="id" type="Integer" displayName="Nr." /> <Property name="company" type="String" displayName="Unternehmen" /> </Property> <Property name="Settings" type="Complex"> <Property name="SelectedColor" type="Color" /> <Property name="HighlightColor" type="Color" /> <Property name="ColumnColor" type="Color" /> </Property> </Properties> This setting overrides the default color of the color scheme. Possible values: Hexadecimal color value, e.g. `ff5a00` Do not use a hash before the color value. Do not use abbreviated notation of the color value. Color code from the color palette of the Web App (seeTheming), e.g. `A200`
`selectedForegroundColor`	Defines the font color of the selected row by click. Data binding (Color) possible Note: Please note that the data binding for this attribute cannot be defined within the property of type Complex that is valid for the entire grid component, but that a separate property must be defined. Example XML <Properties> <Property name="list" type="Complex"> <Property name="id" type="Integer" displayName="Nr." /> <Property name="company" type="String" displayName="Unternehmen" /> </Property> <Property name="Settings" type="Complex"> <Property name="SelectedColor" type="Color" /> <Property name="HighlightColor" type="Color" /> <Property name="ColumnColor" type="Color" /> </Property> </Properties> This setting overrides the default color of the color scheme. Possible values: Hexadecimal color value, e.g. `ff5a00` Do not use a hash before the color value. Do not use abbreviated notation of the color value. Color code from the color palette of the Web App (see Theming), e.g. `A200`

Defining Columns in the Grid Component

Within the grid component the columns have to be defined. The column definition is done with the <GridColumn> element. All columns must be defined within <GridColumn> elements.

Possible attributes:

Attribute	Description
`displayName`	Title of the column. Data binding possible Possible values: Any string Note: For very long column titles that you define using the `displayName` attribute, you can ensure that the column title is wrapped as follows Add the `ColumnStyle` element to the `GridColumn` element. In the `ColumnStyle` element, declare the `textOverflow` attribute with the value `wordBreak.`
`editable`	Defines whether the contents of the column are editable. Data binding possible (with property of type `Boolean`) Possible values: `true` / `false` (default) or data binding string
`filterable`	Specifies whether the contents of the column can be filtered. Note: Das Attribut `filterable` hat nur dann eine Auswirkung, wenn das Element `Filtering` in den Grid Settings deklariert ist. Data binding possible Possible values: `true` (default)/`false`
`format`	Defines the date format including minutes, seconds or milliseconds. Possible values: `Datetime with Minutes`: The date has the format hh:mm. (default) `Datetime with Seconds`: The date has the format hh:mm:ss. `Datetime with Milliseconds`: The date has the format hh:mm:ss.sss.
`horizontalAlign`	Defines the horizontal alignment of the content within the column. Possible values: `left`: content left aligned `center`: Content centered `right`: content right aligned
`order`	Defines the order of the columns. Data binding possible (with a property of the type `Integer` in the process which loads the grid data) Possible values: integers from 0 or string for data binding Note: The column with the lowest number in the `order` attribute is on the far left, the column with the highest number on the far right.
`sortable`	Defines whether sorting can be performed according to the contents of the column. More information about Sorting. Data binding possible (with a property of the type `Boolean` in the process which loads the grid data) Possible values: `true` / `false` or string for data binding
`value`	Defines the content of the column by data binding. Possible values: String (data binding) If no attribute `displayName` is assigned for the corresponding property, then the data binding expression is used as the column header.
`visible`	Specifies whether the column will be shown. Data binding possible Possible values: `true` (default)/`false`

Grid Column

The elements listed below can be declared within the GridColumn element:

Possible elements

Element

Description

ColumnStyle

Defines the appearance of the column.

MultiselectFilter

Filters GridColumns for multiple values in columns. If the MultiselectFilter element is set, no further filter options can be set for this column.

Data binding possible

Note:

If DataBinding is used, an element Property of type list is required. The attributes list and value must also be set.

The attributes listed below can be declared for the MultiselectFilter element:

Possible attributes

Element

Description

list

Defines the content of the column via data binding. In the list element, the name attribute whose data is to be displayed must be specified from a property element.

Possible values: Any string (data binding)

value

Defines the content of the column via data binding.

Possible values: Any string (data binding)

Example for <MultiselectFilter> without data binding

XML

<?xml version="1.0" encoding="UTF-8"?>
<GridComponent xmlns="http://softproject.de/webapp/1.0"
	process="Grid.wrf">
	<Properties>
		<Property name="Entry" type="Complex">
			<Property name="Field" displayName="Field" type="String"></Property>
		</Property>
		<Property name="Filter" type="List">
			<Property name="Option" type="String"></Property>
		</Property>
	</Properties>
	<GridSettings>
		<Filtering />
	</GridSettings>
	<GridColumns>
		<GridColumn editable="false" value="#Entry.Field"
			sortable="true">
			<MultiselectFilter>
				<Option value="1" />
				<Option value="2" />
				<Option value="3" />
			</MultiselectFilter>
		</GridColumn>
	</GridColumns>
</GridComponent>

Example of <MultiselectFilter> with data binding

XML

<?xml version="1.0" encoding="UTF-8"?>
<GridComponent xmlns="http://softproject.de/webapp/1.0"
	process="Grid.wrf">
	<Properties>
		<Property name="Entry" type="Complex">
			<Property name="Field" displayName="Field" type="String"></Property>
		</Property>
		<Property name="Filter" type="List">
			<Property name="Option" type="String"></Property>
		</Property>
	</Properties>
	<GridSettings>
		<Filtering />
	</GridSettings>
	<GridColumns>
		<GridColumn editable="false" value="#Entry.Field"
			sortable="true">
			<MultiselectFilter list="#Filter" value="#Option" />
		</GridColumn>
	</GridColumns>
</GridComponent>

The <ColumnStyle> element can have the following attributes:

Attribute	Description
`background`	Defines a background color. Data Binding (Color) possible This setting overwrites the default color of the color scheme. Possible values: Hexadecimal color value, e.g. `ff5a00` Do not use a hash before the color value. Do not use abbreviated spelling of the color value. Color code from the color palette of the Web App (see Theming), e.g. `A200`
`fontFamily`	Defines the font family within the component. The property is inherited by all controls and actions of the component. Data binding (string) possible Possible values: Font code from the font palette, e.g. `Font04`
`fontSize`	Defines the font size within the component. The property is inherited by all controls and actions of the component. Data binding (string) possible Possible values: Any whole number or decimal number with a point 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%` Keywords: `xx-Small`, `x-small`, `small`, `medium`, `large`, `x-large`, `xx-large`, `smaller`, `larger`
`fontStretch`	Defines the width of the individual characters. The property is inherited by all controls and actions of the component. Data binding (string) possible Possible values: `Condensed` `Expanded` `ExtraCondensed` `ExtraExpanded` `Medium` `Normal` (Standard) `SemiCondensed` `SemiExpanded` `UltraCondensed` `UltraExpanded`
`fontStyle`	Defines the inclination of the font. The property is inherited by all controls and actions of the component. Data binding (string) possible Possible values: `italic`: italic font `normal`: normal font (standard) `oblique`: slanted font style (calculated)
`fontWeight`	Defines the font weight. The property is inherited by all controls and actions of the component. Data binding (string) possible Possible values: `Black` `Bold` `DemiBold` `ExtraBlack` `ExtraBold` `ExtraLight` `Heavy` `Light` `Medium` `Normal` (default) `Regular` `SemiBold` `Thin` `UltraBlack` `UltraBold` `UltraLight`
`fontColor`	Defines the font color. Data Binding (Color) möglich This setting overwrites the default color of the color scheme. Possible values: Hexadezimaler Farbwert, z. B. `ff5a00` Do not use a hash before the color value. Do not use abbreviated spelling of the color value. Color from the color palette of the Web App (see Theming), e.g. `A200`
`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
`width`	Defines the column width. Possible values: Whole numbers (integer) The unit in which the column width is specified is defined with the `widthUnits` attribute.
`widthUnits`	Defines the unit in which the column width (`width`) is specified. Possible values: `pixels`: The column width is given in pixels. `percents`: The column width is given as a percentage.

Periodical reloading

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

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

Possible attributes:

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 specified, a string comparison on a record is used to identify the row.

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

`<SelectAction>` within a Grid Component

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

`<DoubleClickAction>` within a Grid Component

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

Note:

If the Editing attribute in the GridSettings element and the editable attribute in the GridColumn element are set to true, the DoubleClick action has no effect.

`<SaveAction>` within a Grid Component

The Save action is created with the element <SaveAction/> within <Actions> and saves entered data. The status depends on the validation status.

Note:

If the Save action defined, the Technical Process receives the data objects of the edited rows with a new index attribute containing the index of the row. The numbering starts from 0.

Defining a Grid Component

Example of a Grid Component

Output Format of the Process

Grid Settings

Defining Rows in the Grid Component

Defining Columns in the Grid Component

Grid Column

Example for <MultiselectFilter> without data binding

Example of <MultiselectFilter> with data binding

Periodical reloading

<SelectAction> within a Grid Component

<DoubleClickAction> within a Grid Component

<SaveAction> within a Grid Component

`<SelectAction>` within a Grid Component

`<DoubleClickAction>` within a Grid Component

`<SaveAction>` within a Grid Component