Table of contents
Process steps control on Modern Forms allows you to visualize your own linear process with text, icons and descriptions based on 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.
Note1: Only single choice column is supported to use in this control.
Note2: When you click on Ok button in the panel you can't change Choice column.
There are proposed layouts you can choose from to display your process. Further, you can customize each step using styling.
Steps states
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
Steps customization
When you add a new step or edit 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: description will be visible if step is in 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 be with 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 Form Styling link will open Form Styling panel
You can configure styling for this control in General Styles for each state separately
As well configure style per each step in Control Styles
As a result, you will have this on the form in SharePoint