> For the complete documentation index, see [llms.txt](https://docs.wem.io/platform/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.wem.io/platform/wemtipsandtricks/widgets/advanced-input/process-arrow-steps.md).

# Process Arrow Steps

<figure><img src="/files/HYkTqeza9agXCgwDdVis" alt=""><figcaption></figcaption></figure>

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.&#x20;

### Properties

#### General

<table><thead><tr><th width="205">Property Name</th><th width="156.33333333333331">Data Type</th><th>Description</th></tr></thead><tbody><tr><td>Steps</td><td>Expression, concept set</td><td>Use a concept set as source for this widget. An arrow will be displayed for each concept of the concept set (left to right).</td></tr><tr><td>Current step</td><td>datafield, concept</td><td>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.</td></tr><tr><td>Last completed step</td><td>datafield, conceptconcept</td><td>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.</td></tr><tr><td>Step visible when</td><td>Expression, boolean</td><td>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 &#x3C;> 'Steps'.'Done'" will hide the last step of the example above.</td></tr></tbody></table>

#### Behavior

<table><thead><tr><th width="205">Property Name</th><th width="174.33333333333331">Data Type</th><th>Description</th></tr></thead><tbody><tr><td>Step Action</td><td>Flowchart</td><td>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.</td></tr></tbody></table>

#### Appearance

{% hint style="info" %}
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"
{% endhint %}

<table><thead><tr><th width="214">Property Name</th><th width="130.33333333333331">Data Type</th><th>Description</th></tr></thead><tbody><tr><td>Completed icon</td><td>text</td><td>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.</td></tr><tr><td>Step label</td><td>Expression, text</td><td>by default each step displays its concept name. Otherwise you can use this property to display a custom label for each step (concept).</td></tr><tr><td>Before current step bg color</td><td>text</td><td>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.</td></tr><tr><td>Before current step font color</td><td>text</td><td>Changes the font color (text and icon) of each step before the current one.</td></tr><tr><td>Before current step hover bg color</td><td>text</td><td>Changes the on hover background color of each step before the current one.</td></tr><tr><td>Before current step hover font color</td><td>text</td><td>Changes the on hover font color (text and icon) of each step before the current one. See the example above.</td></tr><tr><td>Current step bg color</td><td>text</td><td>Changes the background color of the current step. In the example above the current step is displayed green.</td></tr><tr><td>Current step font color</td><td>text</td><td>Changes the font color (text and icon) of the current step.</td></tr><tr><td>After current step bg color</td><td>text</td><td>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.</td></tr><tr><td>After current step font color</td><td>text</td><td>Changes the font color (text and icon) of each step after the current one.</td></tr><tr><td>Gap bg color</td><td>text</td><td>Changes the color of the white-space between all steps.</td></tr></tbody></table>


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.wem.io/platform/wemtipsandtricks/widgets/advanced-input/process-arrow-steps.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.