@5minds/node-red-dashboard-2-processcube-process-progress-bar/README.md

A ui component for showing progress bars tracking a process

# Process Progress Bar

A UI-Node to display a step-by-step progress bar, tracking the progress of a process.

## Usage

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.

## Title

Will be displayed above the progress bar. It can also be set dynamically by setting `msg.payload.title`.

## Steps

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 HTML `img`-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 HTML `img`-Element. Therefore DataURLs can be used to add images/svgs etc., that are not available online.

## Color

Will be used as the outline/fill/text color for the steps.

## Reference

[https://docs.processcube.io/docs/solutions/node-red](https://docs.processcube.io/docs/solutions/node-red)