Process Arrow Steps

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.

Properties

General

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.

Behavior

Property Name	Data Type	Description
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.

Appearance

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
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.