A UI-Node to display a step-by-step progress bar, tracking the progress of a process.
After configuring the node, use a usertask-event-listener
node and direct all new
and finished
events for the tracked process into the ui-process-progress-bar
node.
It will automatically update, when UserTasks are started or finished.
The output of a usertask-input
node can also be used as an input, when using the Result
type Send First Task
.
This node can display 0-1 active steps and all steps before the running step are always displayed as finished.
Will be displayed above the progress bar. It can also be set dynamically by setting msg.payload.title
.
This field is used for configuring the steps of the progress bar.
Each step is defined by:
- Label: The text displayed for the progress bar step
- FlownodeId: The Id of the Flownode, that needs to be active/finished to start/fullfill this step.
-
Icon (optional): An URL for an image, that should be displayed in addition to the label. This will be used as the
src
-Property of a HTMLimg
-Element. Therefore DataURLs can be used to add images/svgs etc., that are not available online. -
Icon finished (optional): An URL for an image, that should be displayed in addition to the label, after the step has been finished. This will be used as the
src
-Property of a HTMLimg
-Element. Therefore DataURLs can be used to add images/svgs etc., that are not available online.
Will be used as the outline/fill/text color for the steps.