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:

1. Display all currently executable steps, or display only helpful steps like begin, last, current, previous, and next steps.

2. Change the shape of the process chain: circle or line.

3. 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']}" />

1. You have to set the parameters

   • actualStepIndex. This is the index of the current step.

   • steps. This is list of working steps.

2. You may change the parameters

   • shape to CIRCLE or LINE according to your requirements. Default is CIRCLE.

   • direction to HORIZONTAL or VERTICAL . Default is HORIZONTAL.

   • isShowAllSteps to TRUE or FALSE . Default is FALSE.

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 with com.axonivy.portal.components.ProcessChain.