User task node

​

Configuring a 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).

​

General Config

• Node name - the name of the node
• 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.
• Stage - assign a stage to the node

​

Data stream topics

• Topic Name - the topic name where the process engine listens for the response (this should be added to the platform and match the topic naming rule for the engine to listen to it) - available for UPDATES topics (Kafka receive events)

• Key Name - will hold the result received from the external system, if the key already exists in the process values, it will be overwritten

​

Task Management

• Update task management - force Task Management plugin to update information about this process after this node

​

Configuring the UI

The FlowX Designer includes an intuitive UI Designer (drag-and-drop editor) for creating diverse UI templates. You can use various elements from basic buttons, indicators, and forms, but also predefined collections or prototypes.

​

Accessing the UI Designer

To access the UI Designer, follow the next steps:

1. Open FLOWX Designer and from the Processes tab select Definitions.
2. Select a process from the process definitions list.
3. Click the Edit process button.
4. Select a user task node from the Pro dcess Designer then click the brush icon to open the UI Designer.

​

Predefined components

UI can be defined using the available components provided by FLOWX, using the UI Designer available at node level.

Predefined components can be split in 3 categories:

​

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.

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.

More details in the following section:

​

Displaying a UI Element in FlowX Designer

When a process instance is started the web application will receive all the UI elements that can be displayed in that process.

1. Starting a Process:

• The process is initiated by sending a request to the SDK.
• This tells the server to start the specific process definition, in this case, named “DemoProcess”.

...
{
  "processDefinitionName" : "DemoProcess",
  "tokens" : [ {
    "id" : 1961367,
    "startNodeId" : null,
    "embedNodeId" : null,
    "mainSwimlaneId" : null,
    "currentProcessVersionId" : 861684,
    "currentContext" : "main",
    "initiatorType" : null,
    "initiatorId" : null,
    "currentNodeId" : 921777,
    "currentNodeName" : null,
    "state" : "ACTIVE",
    "statusCurrentNode" : "ARRIVED",
    "dateUpdated" : "2024-09-23T09:29:06.668355Z",
    "uuid" : "60ecb3a1-0073-4d98-86b8-263bdaa95a8b"
  } ],
  "state" : "STARTED"
  ...
}

2. Displaying UI Elements:

• As the process progresses, it reaches different nodes, in our example, “User Tasks” (nodes that require human interaction).
• When a User Task is reached, a server message is sent to the application, instructing it to display the UI element associated with that users task. This UI element is essentially the part of the interface that the user will interact with at this point in the process.
• Inside the templateConfig you can find all the UI elements configured on the node. In the following example you can see the details of a CARD UI element.

...
 "templateConfig" : [ {
      "id" : 781824,
      "flowxUuid" : "771f7a69-2858-4ef4-8f58-a052c0cfe724",
      "componentIdentifier" : "CARD",
      "type" : "FLOWX",
      "order" : 1,
      "canGoBack" : true,
      "displayOptions" : {
        "flowxProps" : {
          "title" : "Company representative",
          "hasAccordion" : false
        },
        "style" : {
          "widthType" : "fixed",
          "layoutType" : "grid",
          "flexLayout" : {
            "fxLayout" : "row wrap",
            "fxLayoutAlign" : "start start",
            "fxLayoutGap" : 10
          },
          "gridLayout" : {
            "columns" : 3,
            "position" : "start start",
            "columnGap" : 8,
            "rowGap" : 8
          },
          "gridChild" : {
            "colSpan" : 1,
            "rowSpan" : 1,
            "order" : 0
          },
          "heightType" : "auto",
          "width" : 950
        },
        "className" : null,
        "platform" : "web"
      }
      } ]
...

3. Matching UI Elements to User Tasks:

• When the application receives an update ProgressUpdateDto will trigger the SDK to search for the UI element having the same nodeId with the one in the SSE event.

Start process response:

...
      "navigationAreaId" : 86501151,
      "nodeDefinitionId" : 921779,
      "context" : "main"
...

SSE event:

"{\"progressUpdateDTO\":{\"processInstanceUuid\":\"271f00b9-4344-4a82-8479-378be92a5377\",\"tokenUuid\":\"7fd79711-ec92-425e-8b5d-8bb6c6362095\",\"currentNodeId\":921779,\"currentContext\":\"main\"}}"

4. Fetching Data and Actions:

• To display the UI element correctly, the application may need additional data or perform certain actions.
• It retrieves this data via a request to the server. This step ensures that the displayed UI element has all the information and functionality it needs to work properly, like updating the displayed information or enabling specific actions for the user.

In simple terms, the process involves starting a sequence, notifying the application when to show specific user interface parts, and ensuring these parts have the necessary data to function correctly.