Process Chain
Introduction
The Process Chain component provides status information for all steps in a process: the currently executable steps, done steps, and open steps. Its features are:
Display all currently executable steps, or display only helpful steps like begin, last, current, previous, and next steps.
Change the shape of the process chain: circle or line.
Change the orientation of the process chain: horizontal or vertical.
How to Use
You can integrate the Process Chain component in any widget by including the component on a page with following code:
<ic:com.axonivy.portal.components.ProcessChain id="process-chain-circle-horizontal" componentId="component-circle-horizontal" shape="CIRCLE" direction="HORIZONTAL"
isShowAllSteps="false" actualStepIndex="0" steps="#{['Step 1','Step 2','Step 3','Step 4','Step 5','Step 6','Step 7','Step 8','Step 9']}" />
You have to set the parameters
actualStepIndex
. This is the index of the current step.steps
. This is list of working steps.
You may change the parameters
shape
toCIRCLE
orLINE
according to your requirements. Default isCIRCLE
.direction
toHORIZONTAL
orVERTICAL
. Default isHORIZONTAL
.isShowAllSteps
toTRUE
orFALSE
. Default isFALSE
.
Name |
Default |
Type |
Description |
---|---|---|---|
componentId |
process-chain-component-id |
String |
The component identifier. |
steps |
List of step in the process chain. |
||
actualStepIndex |
0 |
Integer |
Actual step index or current step index. |
direction |
HORIZONTAL |
String |
Direction of process chain: VERTICAL, HORIZONTAL. |
shape |
CIRCLE |
String |
Shape of process chain: CIRCLE, LINE. |
isShowAllSteps |
false |
Boolean |
Show all steps of the process chain. |
If you want to customize its style, please refer to Style Customization.
Migrate from Deprecated Process Chain
Replace code in HTML files: replace
ch.ivy.addon.portalkit.singleapp.process.ProcessChain
withcom.axonivy.portal.components.ProcessChain
.