As of version 3.7.0.0, the Process Steps control in Lightning Forms allows you to visualize your own linear process with text, icons, and descriptions based on a specified Choice column.
Configuration
Process steps control can be added from the "Add" button on the form.
When you add this control to the form, the Process steps configuration panel opens with the first selected Choice column and predefined steps based on its values. If you select another column, all steps will be re-created.
Note 1: Only a single choice column is supported for use in this control.
Note 2: You can't change the Choice column when you click on the OK button in the panel.
There are proposed layouts you can choose from to display your process. Further, you can customize each step using styling.
Step State
In the Process steps control, there are 3 states of steps depend on choice value and order of steps:
- Passed: Step is passed if it placed before the step in active state
- Active: Step is active if the configured choice value of the step equals to the choice column value of the item
- Unpassed: Step is unpassed if it placed after the step in active state
Step Customization
When you add a new step or edit an existing one, you have the following fields:
- Display name: the name of the step on the form.
- Description: description to the step.
- Display description on active state only: the description will be visible if the step is in an active state.
- Choice value: value from the Choice column.
- Visible Expression: expression to handle step visibility (evaluated value should return true or false).
- Presentation
- Numbers: all states will have numbers.
- Icons: configure icon for each state.
Note: You need to add/update/delete steps manually in the panel in case there are changes in values of the Choice column.
Styling
Clicking on the Form Styling link will open the Form Styling panel.
You can configure styling for this control in General Styles for each state separately.
As well as configure style per each step in Control Styles.
As a result, you will see this on the SharePoint form.