Process Arrow Steps
Last updated
Last updated
The process arrow steps widget shows a set of completed and uncompleted 'steps' based on a concept set. This widget is to show a progress in your interaction flow and should be handled as a informational panel not buttons or tabs.
These values are a CSS (hexadecimal), color code or keyword. Hexadecimal values require a leading number sign (#). RGB(A) colors are also allowed. Examples: "#366dbf", "#ff0000", "rgba(0,0,0,0.5)", "black" or "red"
Property Name | Data Type | Description |
---|---|---|
Property Name | Data Type | Description |
---|---|---|
Property Name | Data Type | Description |
---|---|---|
Steps
Expression, concept set
Use a concept set as source for this widget. An arrow will be displayed for each concept of the concept set (left to right).
Current step
datafield, concept
This property is used to display one of the provided steps (concepts) as 'active 'or 'current' step. It's possible to change the appearance of the current step. The example above shows a green current step.
Last completed step
datafield, conceptconcept
This step and all previous steps are marked as 'completed'. Completed steps show an icon, which can be changed using the 'Completed icon ' property. By default all completed steps show a checkmark.
Step visible when
Expression, boolean
This widget loops through all steps of the provided 'Steps' concept set, displaying an arrow for each step. It is possible to skip (don't show) certain steps with this property. For example the value "concept <> 'Steps'.'Done'" will hide the last step of the example above.
Step Action
Flowchart
All completed steps are clickable when using this property. On click the provided flowchart will be executed. Can be used to allow a user to visit or change previous (completed) steps.
Completed icon
text
Changes the icon of completed steps. This value is a font-awesome icon classname. For example: "fa fa-check" or "fa fa-check-square". Visit http://fontawesome.io/icons/ for more information about these icons and their classnames.
Step label
Expression, text
by default each step displays its concept name. Otherwise you can use this property to display a custom label for each step (concept).
Before current step bg color
text
Changes the background color of each step before the current one. In the example above all steps before the current step are displayed dark-blue.
Before current step font color
text
Changes the font color (text and icon) of each step before the current one.
Before current step hover bg color
text
Changes the on hover background color of each step before the current one.
Before current step hover font color
text
Changes the on hover font color (text and icon) of each step before the current one. See the example above.
Current step bg color
text
Changes the background color of the current step. In the example above the current step is displayed green.
Current step font color
text
Changes the font color (text and icon) of the current step.
After current step bg color
text
Changes the background color of each step after the current one. In the example above all steps after the current step are displayed light-grey.
After current step font color
text
Changes the font color (text and icon) of each step after the current one.
Gap bg color
text
Changes the color of the white-space between all steps.