Widgets

Widgets enable the presentation of case-specific data, either from the case's own data objects or from external data sources. This approach standardizes the display of case data across all cases and eliminates the need for knowledge of Form.io or HTML to present case data effectively.

Configuring widgets

Widget configuration is part of tab configuration for a case definition.

• Go to the Admin menu

• Go to the Cases menu and select the case to configure widgets for

• Select the Tabs tab

The list of configured tabs for a case is displayed within the case settings. To configure widgets, select an existing tab with its type set to Widgets, or add a new widget-type tab to the configuration by clicking the Add tab button as documented here. Upon selection, the widget configuration for the chosen tab will open, displaying a list of widgets created for that tab.

Widget configuration UI

Click Add widget to open the create new widget modal that will guide the widget creation in 4 steps.

1

Choose widget type

Five types of widgets are currently supported:

• Fields A set of single data elements in a widget.

• Custom component An option to direct to a custom Angular component in de codebase.

• Form.io form This type makes is possible to display a Form.io form within a widget. The form is prefilled with case data.

• Table Present array case data in a table within a widget.

• Collection Present array case data in a collection of cards within a widget.

Choosing widget type

2

Choose widget width

The widget can be configured to display on any number of columns between 1 and 4.

Choosing widget width

3

Choose widget style

A widget can either have a "Default" color scheme or it can be "High Contrast" to attract focus to that widget and it's content.

Choosing widget style

4

Choose widget content

Depending on the widget type, the content is filled in differently. Click a card to view the details for configuring that widget type.

Fields widget

Set of text data fields with a label and a value combined in a widget.

Custom component widget

For complex content. Connects to custom Angular code in the codebase.

Form.io widget

A prefilled Form.io form that is presented in a widget.

Table widget

Present case data from arrays in a table within a widget.

Collection widget

Present case data from arrays in a collection of cards within a widget.

JSON Editor

Widgets for a case can also be configured directly through a JSON editor. For process engineers, configuring widgets in JSON may offer greater control and efficiency. In the second tab of the Widget configuration UI, a JSON editor displays the complete widget configuration in JSON format. This editor includes error-checking functionality to ensure the JSON structure is correct.