Configure data display widgets within tabs.
Widgets display the actual data within a tab. Each widget can be configured with a specific type, layout, and data mapping. Widgets can also have display conditions to control when they are shown, and actions to allow users to perform operations.
The detail screen is divided into 4 columns. Each widget occupies a configurable number of columns, allowing you to create layouts with multiple widgets side by side.
Type
Description
Example use
Key-value fields in columns.
List of items with pagination.
Table with sorting and filtering.
Visual separation between widgets.
Grouping related widgets.
A fields widget displaying customer data. An interactive table widget with sorting and a link action. The widget configuration goes through 6 steps. When configuring an interactive table an additional filters step appears between the Content and Display Conditions steps.
Select from: Fields, Collection, Table, Interactive table, or Map.
The screen is divided into 4 columns. Select how many columns the widget should span:
Normal spacing between elements.
Reduced spacing for more content in less space.
Select the widget density. Normal display for regular content.
Inverted colors for emphasis. In light mode the widget appears dark, in dark mode the widget appears light.
Step 5: Choose widget content
Configure the widget title, icon, data path, and fields.
Configure the widget content. Widget properties:
Title displayed above the widget.
Optional icon (select from list).
Link action (optional):
Target URL (with placeholders)
Label for the link button.
Field configuration:
How the field value is displayed (e.g. Text, Date).
Data path to the field value.
Maximum characters before truncation (optional).
Hide the field when value is empty.
Interactive table filters (interactive table only)
When configuring an interactive table, an additional wizard step is available to define filters. These filters allow users to quickly search and narrow down the data displayed in the table. By adding filters, you can provide a more tailored search experience, enabling users to find relevant cases based on specific criteria like dates, statuses, or custom identifiers.
During this configuration step, you can define one or more filters.
Supported data types:
Data type
Description
Typical field types
Free text values, optionally matched exactly or with a contains/like query.
Single input, single-select dropdown, multi-select dropdown.
Whole numbers or decimals.
Calendar dates (no time).
Combined date and time values.
Yes/No flag rendered as translated radio buttons.
Field types:
Renders a single input field to filter by the entered value.
Renders start and end input fields to filter between two values.
Dropdown populated manually or via the dropdown database provider. Sends the option id.
Tag-style selector populated manually or via the dropdown database provider. Sends an array of option ids.
Boolean filters automatically render a translated Yes/No selector, while dropdown filters can use hard-coded values or reference a data provider to stay in sync with external lists.
When using the interactive table, users can combine several filters and clear them with a single click. Every change immediately refreshes the table content, allowing cases to be located quickly without leaving the widget.
Step 6: Set display conditions
Configure conditions that determine when the widget is shown. If multiple conditions are configured, all must be met for the widget to display.
Configure display conditions. Data path for the condition.
Comparison operator (e.g. Equal to, Not equal to, Greater than).
Value to compare against.
For advanced configuration, switch to the JSON editor. The JSON editor allows direct editing of the widget configuration.
Switch between visual editor and JSON editor. The order of widgets within a tab can be adjusted via drag & drop. Widgets are displayed from left to right, top to bottom, filling the available columns.
Reorder widgets via drag & drop. A divider is a special widget type that creates visual separation between groups of widgets. Add a divider from the widget list to create a horizontal line spanning the full width.
A divider separating two groups of widgets. Actions add buttons to a widget that allow users to perform operations. Actions appear in the top-right corner of the widget.
Show a dropdown with available case definitions. User selects one and the start form opens.
Configuring a link action
Link actions navigate the user to a specified URL. The URL can contain placeholders to include dynamic data.
Configure a link action with URL and button label. Configure a link action with URL and button label. Link-URL (with variables)
The target URL. Use placeholders like ${iko:/person/bsn} for dynamic values.
The text displayed on the button.
Example configuration:
Link-URL (with variables)
https://example.com/details/${iko:/person/bsn}
Configuring can start case
The "Can start case" action displays a button with a dropdown menu. The dropdown shows all available GZAC case definitions. When the user selects a case definition, the start form for that case opens.
Enable this action by setting canStartCase to true in the widget properties.
Configure a link action with URL and button label. Configure a link action with URL and button label. Display properties (optional)
Display properties control how field values are rendered. If not specified, values are displayed as plain text.
Type
Parameters
Description
Pattern
Description
Example
Value resolvers
Values in widgets are retrieved using the iko: prefix, which indicates the value should be retrieved from the IKO data context.
Absolute path from the root context.
Relative path within a collection item.
Examples:
Display conditions
Display conditions determine when a widget is shown based on data values. If multiple conditions are configured, all must be met.
Data path for the condition.
Comparison operator (e.g. Equal to, Not equal to, Greater than).
Value to compare against.
Example: Only show a widget when the person has Dutch nationality:
iko:/person/nationality/code
