How to Visualize Progress in Salesforce Screen Flows

Salesforce Screen Flows are powerful tools for guiding users through complex processes, but without clear progress indicators, users can feel lost or frustrated. Visualizing progress not only improves the user experience but also increases completion rates and overall satisfaction. This guide will walk you through various methods to effectively display progress in your Salesforce screen flows, from simple text indicators to more sophisticated progress bars.

Why Visualize Progress in Screen Flows?

Before diving into the “how,” let’s briefly touch upon the “why”:

1. User Experience:

Users know where they are in a multi-step process, reducing anxiety and increasing confidence.

2. Reduced User Error:

Clear progress cues help users anticipate the next steps and avoid missteps.

3. Improved Completion Rates:

When users see the end in sight, they are more likely to complete the flow.

4. Professional Appearance:

Flows with clear progress indicators appear more polished and professional.

5. Better Adoption:

Users are more likely to embrace flows that are intuitive and easy to navigate.

Methods for Visualizing Progress

There are several ways to visualize progress in Screen Flows, ranging from basic to advanced. We’ll cover the most common and effective methods.

Method 1: Simple Text Indicators (Current Step / Total Steps)

This is the most straightforward method and ideal for flows with a small number of steps.

Step-by-Step Implementation:

1. Create a Text Display Component on Each Screen:

On each screen of your flow, drag a “Display Text” component onto the canvas.

In the “Text” field, enter something like “Step {!$Flow.CurrentScreenNumber} of {!$Flow.TotalScreens}.

• {!$Flow.CurrentScreenNumber} is a global variable that automatically populates with the current screen’s number in the flow’s order.
• {!$Flow.TotalScreens} is a global variable that provides the total number of screens in the flow.
• You can style this text (bold, color, size) to make it more prominent.

2. Adjust TotalScreens (Important Note):

• The $Flow.TotalScreens variable counts all screens, including sub-flows or screens that might be skipped by conditional logic.
• If you have screens that are conditionally displayed, you might want to manually manage the “total steps” by creating a formula variable or a number variable that you update based on your specific flow logic. For simple flows, $Flow.TotalScreens is usually sufficient.

Example:

A flow with three screens would display

• Screen 1: “Step 1 of 3”
• Screen 2: “Step 2 of 3”
• Screen 3: “Step 3 of 3”

Method 2: Highlighting Current Screen (Navigation Links)

This method involves creating navigation links at the top of your screens, similar to breadcrumbs, and highlighting the current screen.

Step-by-Step Implementation:

1. Create a Text Display Component for Navigation:

• On each screen, drag a “Display Text” component to the top.
• In the “Text” field, you’ll create a series of links or text labels representing each step.

2. Use Conditional Formatting for Highlighting:

For each step, you’ll use a formula to determine if it’s the current step.

Example (for a 3-step flow):

<!– end list –>

HTML

<p> <span style=”{!IF($Flow.CurrentScreenNumber == 1, ‘font-weight: bold; color: blue;’, ”)}”>Step 1: Contact Info</span> &nbsp;&nbsp;&gt;&nbsp;&nbsp; <span style=”{!IF($Flow.CurrentScreenNumber == 2, ‘font-weight: bold; color: blue;’, ”)}”>Step 2: Opportunity Details</span> &nbsp;&nbsp;&gt;&nbsp;&nbsp; <span style=”{!IF($Flow.CurrentScreenNumber == 3, ‘font-weight: bold; color: blue;’, ”)}”>Step 3: Confirmation</span> </p>

• This formula uses IF($Flow.CurrentScreenNumber == [Step Number], ‘style for current step’, ‘style for other steps’) to apply bolding and a blue color to the active step.
• You can replace &nbsp;&nbsp;&gt;&nbsp;&nbsp; with other separators or icons.

3. Consider Flow Navigation Actions (Advanced):

• You can make these links clickable to allow users to jump back to previous steps. This requires using “Flow Navigation” actions or “Screen Actions” within the display text component. This adds complexity, as you’d need to ensure data integrity when users jump back. For simple progress indication, just highlighting is sufficient.

Method 3: Progress Bar (Using Formulas and Images/Components)

This method provides a more visual and intuitive representation of progress. This can be achieved using a combination of formulas and either static images or custom components.

Option A: Basic Progress Bar using Text/Emojis

This is a simplified progress bar using text characters or emojis.

Step-by-Step Implementation:

1. Create a Formula Variable (Text) for the Progress Bar:

Go to “Manager” on the left panel, click “New Resource,” and select “Formula.”

Resource Type: Formula

Data Type: Text

API Name: Progress_Bar (or similar)

Formula:

<!– end list –>

CASE(
    $Flow.CurrentScreenNumber,
    1, "⚪⚪⚪", /* Or "☐☐☐" or "●○○" */
    2, "🔵⚪⚪", /* Or "☑☐☐" or "●●○" */
    3, "🔵🔵⚪", /* Or "☒☐☐" or "●●●" */
    4, "🔵🔵🔵", /* Or "☑☑☐" or "●●●●" */
    "No Progress" /* Default value if number is out of range */
)

Explanation:

• The CASE function evaluates $Flow.CurrentScreenNumber.
• For each screen number, it returns a different string of characters (e.g., circles, squares).
• You can use Unicode characters (like ⚪ for white circle, 🔵 for blue circle, ✅ for checkmark, and ❌ for cross).

2. Display the Progress Bar on Each Screen:

• On each screen, drag a “Display Text” component.
• In the “Text” field, insert your {!Progress_Bar} formula variable.
• Adjust styling (font size, color) to make it prominent.

Option B: Progress Bar Using Image Resources (More Visual)

This method uses different static image files (uploaded as static resources) to represent each stage of progress.

Step-by-Step Implementation:

1. Create Progress Bar Images:

Design a series of images (e.g., PNG, SVG) representing each progress stage.

• Example for a 3-step flow:
  • progress_step1.png (e.g., 30% filled bar)
  • progress_step2.png (e.g., 60% filled bar)
  • progress_step3.png (e.g., 100% filled bar)

2. Upload Images as Static Resources:

• Go to Setup -> Static Resources.
• Click “New.”
• Name: Give it a meaningful name (e.g., ProgressBarStep1).
• File: Upload your image file.
• Cache Control: Select “Public.” Repeat for all your progress images.

3. Create a Formula Variable (Text) for the Image URL:

Go to “Manager” on the left panel, click “New Resource,” and select “Formula.”

Resource Type: Formula

Data Type: Text

API Name: Progress_Image_URL (or similar)

Formula:

<!– end list –>

CASE( $Flow.CurrentScreenNumber, 1, “/resource/ProgressBarStep1”, /* Assuming ProgressBarStep1 is your Static Resource API Name */ 2, “/resource/ProgressBarStep2”, 3, “/resource/ProgressBarStep3”, “” /* Default if no match */ )

• Important: Replace ProgressBarStepX with the actual API names of your static resources.

4. Display the Image on Each Screen:

On each screen, drag a “Display Text” component.

In the “Text” field, use an HTML <img> tag:

<!– end list –>

HTML

<img src=”{!Progress_Image_URL}” alt=”Progress Bar” style=”width: 100%; height: auto;”>

• Adjust width and height as needed for your images.

Option C: Progress Bar Using a Custom Lightning Web Component (LWC)

This is the most flexible and visually appealing option but requires LWC development skills.

Step-by-Step Implementation:

1. Develop an LWC for the progress bar:

Create an LWC that takes a currentStep and totalSteps property.

The LWC’s HTML and CSS will render the progress bar visually (e.g., using div elements with dynamic widths, SVG, or styling with SLDS utility classes).

Example progressIndicator.js:

import { LightningElement, api } from ‘lwc’;

export default class ProgressIndicator extends LightningElement {
@api currentStep;
@api totalSteps;

get progressWidth() {
    if (this.totalSteps === 0) return '0%';
    const width = (this.currentStep / this.totalSteps) * 100;
    return `${width}%`;
}

get stepsArray() {
    return Array.from({ length: this.totalSteps }, (_, i) => i + 1);
}

}

Example progressIndicator.html:

<template>
    <div class="progress-container">
        <div class="progress-bar" style="width: {progressWidth};"></div>
    </div>
    <div class="slds-grid slds-grid_align-spread slds-m-top_x-small">
        <template for:each={stepsArray} for:item="step">
            <div key={step} class="slds-text-heading_small slds-p-horizontal_x-small"
                 title="Step {step}"
                 class:current-step={_isCurrentStep}>
                 {step}
            </div>
        </template>
    </div>
</template>

Example progressIndicator.css:

.progress-container {
    width: 100%;
    background-color: #f3f3f3;
    border-radius: 5px;
    height: 10px;
    overflow: hidden;
}
.progress-bar {
    height: 100%;
    background-color: #0070d2; /* Salesforce blue */

Example progressIndicator.js-meta.xml:

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>58.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__FlowScreen</target>
    </targets>
    <targetConfigs>
        <targetConfig targets="lightning__FlowScreen">
            <property name="currentStep" type="Integer" label="Current Step Number" description="The current step in the flow." />
            <property name="totalSteps" type="Integer" label="Total Steps" description="The total number of steps in the flow." />
        </targetConfig>
    </targetConfigs>
</LightningComponentBundle>

2. Deploy the LWC to Salesforce:

• Use VS Code and Salesforce CLI to deploy your LWC.

3. Add the LWC to Your Flow Screens:

In your Screen Flow, drag the custom LWC component (it will appear under the “Custom” section) onto each screen.

Set Input Values:

• currentStep: Set this to {!$Flow.CurrentScreenNumber}.
• totalSteps: Set this to {!$Flow.TotalScreens} (or a custom formula/variable if you’re managing conditional steps).

Handling Conditional Screens and Dynamic Progress

The $Flow. TotalScreens and $Flow. CurrentScreenNumber variables are great for linear flows. However, if your flow has conditional paths where some screens are skipped, these variables might not accurately reflect the user’s perceived progress.

Strategies for Dynamic Progress:

1. Custom “Total Steps” Variable:

• Create a number variable (e.g., Total_Actual_Steps).
• Before the first screen (or based on initial user input), use an Assignment element to set Total_Actual_Steps based on the conditions.
• Example: If a user selects “Existing Contact,” set Total_Actual_Steps to 3. If they select “New Contact,” set it to 5.
• Then, use this Total_Actual_Steps variable in your progress indicators instead of $Flow. TotalScreens.

2. Custom “Current Step” Variable:

• Create a number variable (e.g., Current_Actual_Step).
• At the beginning of each screen (or just before a major logical branch), use an Assignment element to increment Current_Actual_Step.
• This gives you granular control over the progress count.

3. Formula-Based Dynamic Step Calculation:

• You can create more complex formula variables that evaluate various conditions to determine the “true” total steps or the “true” current step. This can become unwieldy for very complex flows.

4. Using a Subflow for Progress:

• For very complex flows, you could potentially have a subflow dedicated to managing progress. This subflow could take inputs about the current path and return the appropriate progress indicator. This adds overhead but can centralize progress logic.

Best Practices for Progress Visualization

• Consistency: Place the progress indicator in the same location on every screen (e.g., top center).
• Clarity: Ensure the indicator is easy to understand. Avoid overly complex visuals.
• Visibility: Make sure the indicator stands out. Use appropriate sizing, color, and contrast.
• Responsiveness: If using images or custom components, ensure they look good on different screen sizes (desktop, mobile).
• Avoid Overwhelm: Don’t put too much information in the progress indicator. Keep it concise.
• Contextual Labels: If using navigation links, add descriptive labels for each step (e.g., “Contact Info,” “Address Details,” “Review & Submit”).
• Accessibility: Consider users with visual impairments. Ensure your progress indicators are accessible (e.g., alt text for images, proper semantic HTML if using LWC).
• Testing: Thoroughly test your flow with the progress indicators to ensure they function as expected under various scenarios, including conditional logic.

Conclusion: Salesforce Screen Flows

Visualizing progress in Salesforce Screen Flows is a small effort that yields significant benefits in user experience and flow completion rates. Whether you opt for simple text indicators, more engaging progress bars using images or custom components, or dynamic progress based on flow logic, the key is to provide clear and consistent feedback to your users. By implementing these strategies, you can transform your Salesforce screen flows from functional tools into intuitive and delightful user journeys.