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 after you click OK.
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 depending on the choice value and the order of the steps:
- Passed: A Step is passed if it is before the step that's in the active state
- Active: A Step is active if the configured choice value of the step equals the choice column value of the item. Note that the final step in a process will always be Active when the process is complete. So you may want to use an icon for the Active state of your final step that indicates it is complete - such as a larger checkmark for Approved, or an X for Rejected. You can also set the Visibility of the final step to be conditional depending on the choice value (see below).
- Unpassed: A Step is unpassed if it is after the step that's in the active state
Step Customization
When you add a new step or edit an existing one, you can set the following. The only property that's required is the Choice Value, as that determines whether or not this step is Active.
- Display name: the name of the step on the form.
- Description: description of the step.
- Display description on active state only (Yes/No): whether the description will be visible only if the step is in the active state.
- Choice value: the value from the Choice column for this step to be Active.
- Visible Expression: expression to handle step visibility (evaluated value should return true or false). This is useful if you do not wish to show one of the states until it is active. For example, you could only show a final Approved state (with a check mark or similar) when Status = Approved; and the same for displaying a final Rejected state (with an X or similar).
- Presentation
- Numbers: all states will have numbers.
- Icons: configure an icon for each state.
Note: You need to add/update/delete steps manually in the panel if there are changes to the 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.