Loading
Automate Your Business Processes
Table of Contents
Filter by (0)Add
Select Filters

          No results
          No results
          Here are some search tips

          Check the spelling of your keywords.
          Use more general search terms.
          Select fewer filters to broaden your search.

            Search all of Salesforce Help
            Search all of Salesforce Help
            Show Screen Flow Stages in a Progress Indicator Example

            You are here:

            1. Salesforce Help
            2. Docs
            3. Automate Your Business Processes

            Show Screen Flow Stages in a Progress Indicator Example

            This example creates a custom progress indicator stage that guides users through a multi-step process. By creating clear stages and assigning them to screen elements, you can enhance user experience and ensure that users understand their progress and next steps.

            Required Editions

            View supported editions.
            Note
            Note

            Progress indicators require Lightning runtime.

            See Also

            Plan the Stages in the Flow

            1. Determine how many stages to create. You want each screen to show as a different step. You have 4 screens, so create 4 stages.
            2. Determine what you want to call the stages since their labels are shown in the progress indicator. You decide to label the stages the same as the screens: Contact Info, Order Info, Billing Details, and Order Confirmation.
            3. Determine the order of the stages. You want the customer to enter their contact information, then the order information, then their billing details, and then show the confirmation at the end. Here's the stage order: Stage 1: Contact Info, Stage 2: Order Info, Stage 3: Billing Details, Stage 4: Order Confirmation.
            4. Determine which stages you want to show in the progress indicator when the flow starts. You want all of the stages to show in the progress indicator the entire time the flow is running. So, all of the stages must be set to active by default.

            For more information, see Planning the Stages of Your Flow.

            Create the Flow Stages

            1. In your screen flow in Flow Builder, open Toolbox.
            2. Click New Resource.
            3. For Resource Type, select Stage.
            4. For Label, enter Contact Info.
            5. For API Name, enter Contact_Info_Stage.
            6. For Order, enter 10.
              If it's possible that stages might be added in the future, use order numbers with numbers between them so you don't have to reorder all the stages if you add a new stage. For example, 10, 20, 30, 40 instead of 1, 2, 3, 4.
            7. Select Active by default.
            8. Click Done.
            9. Complete steps 1 through 7 for the next 3 stages so the stage resources are set up like this.
            Label API Name Order Active By Default
            Contact Info Contact_Info_Stage 10 Selected
            Order Info Order_Info_Stage 20 Selected
            Billing Details Billing_Details_Stage 30 Selected
            Order Confirmation Order_Confirmation_Stage 40 Selected
            Create stage resource window

            For more information, see Create Flow Stages.

            Set Up the Standard Progress Indicator

            1. In your screen flow in Flow Builder, open the flow's version properties by clicking Flow properties panel gear icon.
            2. Expand the Advanced section.
            3. Select Show a progress indicator on screen elements.
            4. For Progress Indicator Type, select Path: Top of Screen.
            5. Click Done.
            Flow version properties panel with progress indicator enabled and path: top of screen selected

            For more information, see Set Up a Progress Indicator.

            Assign Your Stages to Screen Elements

            Assign a stage to each screen element so the correct stage is highlighted in the progress indicator when the running user reaches each screen.

            1. In your screen flow in Flow Builder, open the Contact Info screen element.
            2. Click the screen element's header to show the screen properties.
            3. For Stage, select Contact Info (API name: Contact_Info_Stage).
            4. Click Done.
            5. Complete steps 1 through 3 for the next 3 screen elements so the stages are assigned to these screen elements.
            Screen Element Label Stage Label Stage API Name
            Contact Info Contact Info Contact_Info_stage
            Order Info Order Info Order_Info_Stage
            Billing Details Billing Details Billing_Details_Stage
            Order Confirmation Order Confirmation Order_Confirmation_Stage
            Screen properties with Stage field highlighted

            For more information, see Show Stages in a Progress Indicator.

            The progress indicator is set up and ready to guide your users through their order process.

            Screen flow progress indicator set up and showing at run time
             
            Loading
            Salesforce Help | Article