Dynamic Progress Bar for Form Completion in Salesforce Flow

Posted by Vinay Vernekar 3rd January 2026

Add a dynamic, stage-based progress path to your Screen Flows using a simple Lightning Web Component and a text variable of comma-separated steps.

What is a progress path?

A progress path visually communicates a user’s position within a multi-step form or workflow. It improves clarity, reduces drop-off, and increases form completion by showing stages and the current step.

Why use an LWC-based progress path?

Using a Lightning Web Component gives you flexibility to define steps dynamically (comma-separated), reuse the component across flows, and keep the flow screens focused on capturing data while the component handles the visual progress state.

Solution overview

This implementation has two parts:

  • Create a reusable Lightning Web Component (LWC) that accepts a comma-separated list of steps and the current step label.
  • Configure your Screen Flow: define a text variable for stages, add the LWC to your screen and set the Current Step for each screen.

Step 1 — Create the Progress Path LWC

Create a Lightning Web Component bundle with three files shown below. The component parses a comma-separated string of step labels into progress steps and maps the active step based on the label provided.

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>

Step 2 — Configure your Screen Flow

High-level steps to add the component to your Screen Flow:

  • Start a new Screen Flow (Start from Scratch → Screen Flow).
  • Create a Text variable named varT_Stages with default value: Referrer Info,Lead Info,Financial Info,Additional Info,Submit Confirmation. Mark it Available for Input and Output.
  • Add a Screen element and drag the LWC Progress Path component into the Input section. Set properties:
    • Comma-separated Steps: {!varT_Stages}
    • Current Step: set to the label for that screen (e.g., Referrer Info for the first screen)
  • Repeat for each screen, changing the Current Step value to match the active stage.

Tips and best practices

  • Keep step labels short and consistent to ensure exact label matching in the component.
  • Use the same varT_Stages variable across the flow for consistency.
  • Consider adding an input to the component for localized labels if you support multiple languages.

Conclusion

Adding a dynamic progress path to Screen Flows makes multi-step forms more intuitive and increases completion rates. For Salesforce admins and developers, this approach provides a reusable LWC that’s easy to configure and maintain. Business users benefit from clearer guidance through form stages, improving user satisfaction and conversion.

Tags: