User task node
This node represents an interaction with the user. It is used to display a piece of UI (defined in the Designer or in a custom Angular component). You can also define actions available for the users to interact with the process.

Configuring a user task node

User Task Node
User task nodes allow you to define and configure UI templates and possible actions for a certain template config node (ex: button components, file upload components).
Configuring a user task
Can go back: Setting this to true will allow users to return to this step after completing it. When encountering a step with canGoBack false, all steps found behind it will become unavailable.
The configuration area for a template is split in two: a tree like structure on the left side where you can define the UI structure by creating components and an options panel on the right side where components can have their specific options configured
Management of Template config

Predefined components

UI can be defined using the available components provided by FlowX with the resulting template config tree being automatically interpreted by the process renderer SDK and displayed in the frontend application.
Predefined components can be split in 3 categories:

1. Root components

These elements are used to group different types of components, each having a different purpose:
Form_Group - used to group and configure the layout for multiple form elements.
Container - used to group and configure the layout for multiple components of any type.
Custom - these are Angular components developed in the container application and passed to the SDK at runtime, identified here by the component name.
2. Components
The root component can hold a hierarchical component structure as follows
Tree structure of a template config
Available children for Form_Group and Container are:
  1. 1.
    Container - used to group and align it's children
  2. 2.
    Form - used to group and align form field elements (inputs, radios, checkboxes, etc)
  3. 3.
    Image - allows you to configure an image in the document
  4. 4.
    Text - a simple text can be configured via this component, basic configuration is available (check here for more details)
  5. 5.
    Hint - multiple types of hints can be configured via this component (check here for more details)
  6. 6.
    Link - used to configure a hyperlink that opens in a new tab
  7. 7.
    Button - Multiple options are available for configuration, the most important part being the possibility to add actions
  8. 8.
    File Upload - A specific type of button that allows you to select a file
  9. 9.
    Custom - custom components
3. Form elements
This type of elements are used to allow the user to input data, and can be added only in a Form Component. They have have multiple properties that can be managed.
  1. 1.
    Input - FlowX form element that allows you to generate an input form filed
  2. 2.
    Select - in order to add a dropdown
  3. 3.
    Checkbox - the user can select zero or more input from a set of options
  4. 4.
    Radio - the user is required to select one and only one input from a set of options
  5. 5.
    Datepicker - to select a date from a calendar picker
  6. 6.
    Switch - allows the user to toggle an option on or off

Custom components

These are components developed in the web application and referenced here by component identifier. This will dictate where the component is displayed in the component hierarchy and what actions are available for the component.
In order to add a custom component in the template config tree, we need to know its unique identifier and the data it should receive from the process model.
Custom Component as part of generated form

The sections that can be configured are as follows:
  1. 1.
    Message - configure what data will be pushed to the frontend application
  2. 2.
    Input keys - used to define the process model paths from which the components will receive its data
  3. 3.
    UI Actions - actions defined here will be made available to the custom component under the data -> actionsFn key. Multiple actions can be configured on a custom component and mapped to different triggers when developing it. Naming each action suggestively is important so the frontend engineer developing the component knows what actions should be triggered by certain events.

When will a user task display a user interface element?

When a process instance is started the web application will receive all the UI elements that can be displayed in that process under the templateConfig key.
When the process instance token will reach a User Task, a web socket message will be sent informing the SDK to display the UI element associated with that user task
Example:
  1. 1.
    Starting a process: POST {{processUrl}}/api/internal/process/DemoProcess/start
1
{
2
"processDefinitionName": "DemoProcess",
3
"tokens": [
4
{
5
"currentNodeId": 40201,
6
"uuid": "98f32ee3-0b17-417b-9fa4-7a1acb105e0e"
7
}
8
],
9
"state": "STARTED",
10
"templateConfig": [
11
{
12
"id": 39888,
13
"nodeDefinitionId": 40202,
14
"componentIdentifier": "CONTAINER",
15
"type": "FLOWX",
16
"order": 1,
17
"canGoBack": true,
18
"templateConfig": [
19
{
20
"id": 39889,
21
"uiTemplateParentId": 39888,
22
"componentIdentifier": "TEXT",
23
"type": "FLOWX",
24
"order": 1,
25
"displayOptions": {
26
"flowxProps": {
27
"text": "Demo Text"
28
}
29
},
30
"templateConfig": [],
31
"formFields": [],
32
"inputKeys": []
33
}
34
],
35
"formFields": []
36
}
37
],
38
"webSocketPath": "/ws/updates/process",
39
"uuid": "3647c9fd-c0f2-4f17-b142-4095b79f459c",
40
"generalData": null
41
}
Copied!
2. Web socket progress message
1
{
2
"progressUpdateDTO": {
3
"processInstanceUuid": "db573705-71dd-4216-9d94-5ba2fb36ff2a",
4
"tokenUuid": "b00d98c5-6d64-4ce8-9070-ef82738a3c00",
5
"currentNodeId": 40202
6
}
7
}
Copied!
3. ProgressUpdateDto will trigger the SDK to search for the UI element having the same nodeId with the one from the web socket progress event
4. Additionally it will ask for data and actions that are required for this component via a GET request{{processUrl}}/api/process/db573705-71dd-4216-9d94-5ba2fb36ff2a/data/42062
Last modified 6mo ago