Last Updated on February 5, 2025 by Rakesh Gupta

Big Idea or Enduring Question:

• How can I display a progress path in a Screen Flow to indicate the progress of a form?

Objectives:

After reading this blog, you’ll be able to:

1. Create a Lightning Web Component to show a progress path in Screen Flow
2. Add and configure a custom Lightning Web Component in Screen Flow
3. And much more

Business Use case

Warren Mason, is working as a Junior Developer at Gurukul on Cloud (GoC), received feedback from the Marketing leadership team while working on a lead referral form. The suggestion was to include a progress path with stages, making it clear for users to understand how much of the form they have completed and how much is left.

The progress path should be similar to the example shown in the demo below:

This feature aims to enhance user experience by providing a visual representation of their progress through the form.

What Is a Progress Path?

A progress path is a visual representation used in forms, applications, and workflows to indicate the current stage of completion and guide users through the steps or stages involved in a process. It typically appears as a series of steps or markers that highlight the user’s journey from the beginning to the end of a multi-step process.

Benefits of Using a Progress Path

1. Enhanced User Experience: Helps users navigate complex forms or processes with ease.
2. Clarity and Transparency: Users can see their progress at a glance, which can motivate them to complete the process.
3. Reduced Drop-off Rates: By making the process clear and straightforward, users are less likely to abandon it midway.

Progress paths are commonly used in multi-step forms, onboarding processes, e-commerce checkout flows, and project management tools to provide a better, more intuitive user experience.

Automation Champion Approach (I-do):

There are a few possible solutions for the above business scenario. We will use Lightning Web Component and Screen Flow to solve the requirement.

Guided Practice (We-do):

There are 2 steps to solve Warren’s business requirement using Lightning Web Component and Screen Flow. We must:

1. Create a Progress Path custom component using lightning web component
2. Salesforce Flow Steps 
   1. Define flow properties for screen flow
   2. Create a text variable to store the stages in a comma-separated format
   3. Add a screen element to display the progress path custom component 

Step 1: Create a Progress Path Component Using the Lightning Web Component

First, create a Progress Path Lightning Web Component that can be used with Screen Flow using the code below. If you don’t know how to create a Lightning Web Component, please review this developer guide Create a Lightning Web Component.

screenFlowProgressPath.html

<template>
    <lightning-progress-indicator current-step={currentStepValue} type="path" variant="base">
        <template for:each={steps} for:item="step">
            <lightning-progress-step label={step.label} value={step.value} key={step.value}></lightning-progress-step>
        </template>
    </lightning-progress-indicator>
</template>

screenFlowProgressPath.js

import { LightningElement, api, track } from 'lwc';

export default class DynamicProgressPath extends LightningElement {
    @api currentStep;
    @api stepsString;

    @track steps = [];
    @track currentStepValue;

    connectedCallback() {
        this.initializeSteps();
        this.setCurrentStepValue();
    }

    initializeSteps() {
        this.steps = this.parseSteps(this.stepsString);
    }

    parseSteps(stepsString) {
        return stepsString.split(',').map((step, index) => ({
            label: step.trim(),
            value: `step-${index + 1}`
        }));
    }

    setCurrentStepValue() {
        this.currentStepValue = this.getStepValue(this.currentStep);
    }

    getStepValue(currentStepLabel) {
        const step = this.steps.find(step => step.label === currentStepLabel);
        return step ? step.value : '';
    }
}

screenFlowProgressPath.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>61.0</apiVersion>
    <isExposed>true</isExposed>
    <masterLabel>LWC Progress Path</masterLabel>
    <description>LWC Progress Path</description>
    <targets>
        <target>lightning__FlowScreen</target>
    </targets>
    <targetConfigs>
        <targetConfig targets="lightning__FlowScreen">
            <property name="currentStep" type="String" label="Current Step" />
            <property name="stepsString" type="String" label="Comma-separated Steps" />
        </targetConfig>
    </targetConfigs>
</LightningComponentBundle>

Copy code from GitHub or Install using this URL. 

Step 2.1: Define Flow Properties

1. Click Setup.
2. In the Quick Find box, type Flows.
3. Select Flows then click on the New Flow.
4. Select the Start From Scratch option and click on Next.
5. Select the Screen Flow option and click on Create and configure the flow.

Step 2.2: Create a Text Variable to Store the Stages in a Comma-separated Format

The next step is to create a text variable to store the stages in comma-separated values. For this example, we have five stages as mentioned below:

1. Referrer Info
2. Lead Info
3. Financial Info
4. Additional Info
5. Submit Confirmation

1. Under Toolbox, select Manager, then click New Resource to store the stages.
2. Input the following information: 
   1. Resource Type: Variable
   2. API Name: varT_Stages
   3. Data Type: Text
   4. Default Value: Referrer Info,Lead Info,Financial Info,Additional Info,Submit Confirmation
   5. Check Available for Input
   6. Check Available for Output
3. Click Done.

Step 2.3: Add a Screen Element to Display the Progress Path Lightning Web Component

1. On Flow Designer, click on the +icon and select the Screen element.
2. Input the following information:
   1. Enter Label the API Name will auto-populate.
3. Under the Input section on Screen Element, drag and drop the LWC Progress Path component onto the screen.
4. Input the following information:
   1. Api Name: Path1
   2. Comma-separated Steps: {!varT_Stages}
   3. Current Step: Referrer Info
      1. Note: Referrer Info is our first stage. For more information, please refer to step 2.2, which outlines all five stages.
5. Click Done.

For the remaining four screens, follow the same steps, except for changing the Current Step as shown below.

Formative Assessment:

I want to hear from you!

What is one thing you learned from this post? How do you envision applying this new knowledge in the real world? Feel free to share in the comments below.