sfdc-assets/dynamicflowprogress

This package includes an LWC component that displays 6 different kinds of progress indicators on your Flow screens, to provide your users with easy-to-understand, guided screen flows.

Dynamic Flow Progress Component

Updated: Release 2.0 went live on 20 Sep 2022 (see release notes below)

This package includes an LWC component that displays 6 different kinds of progress indicators on your Flow screens, to provide your users with easy-to-understand, guided screen flows.

Please note: this is not a navigation component; it provides a visual representation of which step a user is on in a multi-step process.

---

Description

This component can be used on a Flow screen to indicate the steps in a flow and the progress made by the user:

• New LWC version just in time for Dreamforce '22!
• 6 different indicator types (see below for list and screenshots)
• Override completion % value with your own flow variable (Progress Bar and Progress Ring only)
• Additionally, it uses Custom Labels for display and assistive text, making it friendly for translation into other languages.
• This is not a navigation component; it provides a visual representation of which step a user is on in a multi-step process.

Indicator Types

This single component can display one of six indicator types:

Indicator Type	Screenshot
“Vertical” To use, enter Vertical as your Indicator Type. Based on the vertical variant of the SLDS Progress Indicator component blueprint.
“Horizontal” To use, enter Horizontal as your Indicator Type. Based on the base variant of the SLDS Progress Indicator component blueprint.
“Bar” To use, enter Bar as your Indicator Type. Based on the descriptive variant of the SLDS Progress Bar component blueprint. The percentage is auto-calculated based on the current number of completed steps, but it can be overridden if you want to show a different number. See the Setup section above.
“Ring” To use, enter Ring as your Indicator Type. A generic progress ring that mimics SLDS styles. The percentage is auto-calculated based on the current number of completed steps, but it can be overridden if you want to show a different number. See the Setup section above.
“Path” To use, enter Path as your Indicator Type. Based on the traditional SLDS Path component blueprint.
“VertNav” To use, enter VertNav as your Indicator Type. Based on the list variant of the SLDS Vertical Navigation component blueprint.

Install & Setup Instructions

Please see the Disclaimer (below)

1. Install from the AppExchange: https://appexchange.salesforce.com/appxListingDetail?listingId=a0N3u00000Pt7yzEAB
2. Add the Dynamic Flow Progress component to a screen element.
3. Configure the component’s properties (see below).
4. Rinse and repeat on other screens in your flow.
5. View the "Dynamic Flow Progress LWC - Sampler" flow for configuration examples.

Component Properties

When you add this component to a Flow screen, there are a few properties to configure:

Attribute	Description
Comma-Separated List of Steps	Add the full list of steps that will make up the indicator. To save yourself from accurately configuring this list across multiple screens, create a text constant with that comma-separated list of steps in it, and then reference that constant in this property. Now, when there are changes to your list of steps, you only have to update the value of your constant - not each and every instance of this component.
Current Step	Add the value of the current step. Make sure this value exactly matches the spelling of the step found in the comma-separated list.
Indicator Type	You can add one of the following values: Vertical, Horizontal, Bar, Ring, Path, or VertNav. These are explained below.
Current Step Percentage Completion	OPTIONAL. The percentage shown in the Bar and Ring indicator types is auto-calculated based on the current number of completed steps, but it can be overridden if you want to show a different number. To use the auto-calculated %: Do nothing - just leave the this property blank. To override: In the component’s configuration, add a value to this property. The value needs to be an integer between 0 and 100 and it can be a static value or a variable that you’ve calculated.

Custom Labels Available for Translation

Text and assistive text that displays in the component uses Custom Labels so that you can translate it into languages other than English. I include the translations themselves but my apologies if I've butchered your mother tongue (start a discussion if you have better translations for these labels or if you want me to add support for your language):

• DFP_Complete – In the Bar indicator type, this is the text that follows the current % (e.g. 20% Complete). It is also used for assistive text to designate previously completed steps in the indicator.
• DFP_Current – used for assistive text only to designate the current step in the indicator.
• DFP_Upcoming – used for assistive text only to designate an upcoming step in the indicator.

Once you have enabled Translation Workbench and added supported languages in your org, you can create translations that will override the default English values (from Setup, visit Custom Labels; see this help article).

FAQs

Q: Is there an easier way to create a reusable list of steps to use in the Comma-Separated List of Steps property? It’s tedious to have to enter the list on every screen where I’m using the component.

A: Yes! Create a Constant resource (Type = Text) that contains your comma-separated list of steps. Then, just reference that constant in this property every time you use the component. Now, when there are changes to your list, you only have to manage the value of your constant and it takes effect across all instances of the component.

Q: Can I easily customize the colors/branding?

A: This solution focuses on delivering a component that’s on-brand for the Salesforce Lightning Design System (SLDS). As such, the component is mildly influenced by branding/theming when deployed in an Experience Cloud site. You may use the source code in this repository to develop your own branded progress indicators or CSS overrides in Experience Builder to affect the coloring/branding.

Q: Can I easily customize translate text that's part of the component?

A: Yes! See the section (above) about the Custom Labels available for translation.

Caveats

• Not intended for use with screen flows embedded in Visualforce. Not even tested. Users have reported issues by using the Aura version this way, so it is not at all recommended.
• The Aura version is deprecated as of v2.0 and will no longer be supported, even if it remains in the package to support existing use. Replace it with the new LWC version of the component in your existing flows to receive the best experience. As an Aura component, you will not be able to use it in flows presented in LWR Experience Cloud templates (please see Salesforce documentation for Considerations for Using Flows in LWR).
• The Ring indicator type is known to be finnicky when it exists on a Lightning or Experience page where more than one instance of the Ring indicator is present. Its UI currently depends on overriding styles at a root level, so multiple instances of a Ring on the same page will display identically, even when they are embedded in separate screen flows on the page.

Release History

2.0 Dreamforce Release (20 Sep 2022)

• Dynamic Flow Progress is now available as an LWC with proven support for internal and external facing screen Flows. The new LWC version is meant to replace the original Aura component.
• New LWC version has been fully tested in standard Aura and LWR Experience Cloud templates (Issue #3) and resolves Issue #5.
• New finish behavior! When you are viewing the component on the final screen, the indicator will appear with the final step showing as completed. Previously, the final step for some indicator types showed as the current step.
• Now includes the missing Translation metadata to provide the rough label translations for English, French, German, Italian, and Spanish (if you are a native speaker and have better translations for the custom labels, or want me to add support for your language, please start a discussion).
• Legacy Aura version has been left in the package to support existing use, but is considered deprecated as of this release. It is has been relabeled "zDynamic Flow Progress (Old)" to reduce confusion when viewing components in Flow Builder. Final updates before deprecation: received the fix to Issue #5 and it was tested in standard Aura and LWR Experience Cloud templates to help avoid Issue #3.

1.2 Initial release (24 Nov 2021) - Initial version of the package published to the AppExchange.

Maintainers

Mitch Lynch (egyptguy), Salesforce

Acknowledgements

v2.0 would not have been possible without my beta testers! Many thanks to Salesforce's own Ruchita Gathani (ruchitagathani), Ibrahim Khokhar, David Nava (navafit), Nicole Peters, Robyn Rowley, and Don Tennant for their steadfast help in preparing this app for our customers.

Many thanks to John Meyer (johnsfdemo) and the Salesforce Global Public Sector's Platform Blackbelts for their encouragement and feedback on this component!

Disclaimer

THIS APPLICATION IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, CONSEQUENTIAL OR SIMILAR DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS APPLICATION, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

SUBJECT TO THE FOREGOING, THIS APPLICATION MAY BE FREELY REPRODUCED, DISTRIBUTED, TRANSMITTED, USED, MODIFIED, BUILT UPON, OR OTHERWISE EXPLOITED BY OR ON BEHALF OF SALESFORCE.COM OR ITS AFFILIATES, ANY CUSTOMER OR PARTNER OF SALESFORCE.COM OR ITS AFFILIATES, OR ANY DEVELOPER OF APPLICATIONS THAT INTERFACE WITH THE SALESFORCE.COM APPLICATION, FOR ANY PURPOSE, COMMERCIAL OR NON-COMMERCIAL, RELATED TO USE OF THE SALESFORCE.COM APPLICATION, AND IN ANY WAY, INCLUDING BY METHODS THAT HAVE NOT YET BEEN INVENTED OR CONCEIVED.

dynamicflowprogress's Issues

Last step in path marked as completed as soon as approached

In my flow, I have 4 active stages with the orders 10, 20, 30, and 40. As soon as the flow approaches the last step, it's marked as completed with the green checkmark.
I assume it should be marked blue until you complete it.
The condition when the flow is on the 3rd screen:

The condition when the flow goes to the last stage:

The same thing is happening with the path in the sample flow from the repository:

But the demo gif on the main page shows the last step in a proper blue state:

Workarounds:

1. Create the 5th active stage which will never be assigned for the current stage, but in terms of user experience, it's not good to have an extra step in the indicator
2. In the dynamicFlowProgressLWC.js, add +1 to this part:

            let isFinalStep = false;
            if(currentCount == countTotalSteps+1){
                isFinalStep = true;
            }

Component does not support flow variable {!Flow.ActiveStages}

My company installed this package, but now it appears the progress bar cannot be shown based on the flow variable {!Flow.ActiveStages}. Which is pity, as you cannot use the functionality of stages to dynamically "show/hide" stages.
A colleague of mine will adapt this probably tomorrow and create a PR for this.
If you can then check, approve and create a new package (with link), then we can adapt this in our CI/CD process for the creation of our scratches.

Thanks!

No user can see the component when the screen flow is located on a published Experience Cloud site page

I was recently working with a colleague who was trying to use the component in an Experience Cloud site (Aura/Customer Service template). It would not show up on a published site page for any user - neither guest nor admin could see it, even though they could see/interact with the screen flow.

Undefined Trim Issue on Select Screens

Hi all,

We are running into an issue using the Path were we are getting the following error:

Error

Cannot read properties of undefined (reading 'trim')

We have configured using the following:

Observations

We have only noticed this error on select screens. Ie 1 progress bar screen works but most others in our flows do not.

Details

The below code resolves to 'Path'
let indicatorClean = indicatorDirty.trim().toLowerCase();

Current Step Percentage Completion of 0 displays as NaN

When using the Indicator Type of "Bar", when "Current Step Percentage Completion (Optional)" has a value of 0, the component displays as NaN. I think the expected behavior is that it should have displayed as "0% Complete". In addition, the completion bar extends past the block it was contained in. Please let me know if you need any additional information.

Current Step Percentage Completion not working with 0.

Hi there,

Just wanted to feedback that the component displays incorrect output when the Current Step Percentage Completion field is set to 0 either directly or via a number variable.

When the field is set to 0, the output component (Bar, Ring) outputs 100% instead of 0%.

When it is set to any other value, it functions correctly.

I hope this helps.

Thanks

Jan

Doesn't work on experience cloud with ember template

Same problem as #issue3 with ember template and we can't change template.
It works in the same org on a different template (build your own aura)

LWC not displaying for an LWR site's guest user

A customer has reported a specific situation where an LWR site's guest users cannot see the Dynamic Flow Progress LWC in a flow. What I know:

• Customer has an Experience Cloud site built with the Build Your Own (LWR) template.
• Dynamic Flow Progress (v2.0) is installed; it has been added to an activated screen flow.
• Screen flow is embedded in the LWR site using the standard Flow component.
• When the site is viewed by a guest user, the screen flow is visible but the Dynamic Flow Progress component is missing.
• When the site is viewed by a System Administrator user, the screen flow AND the component are visible.
• No difference between Chrome and Safari browsers.

Can't use validated formula field for current step value

Tried to use the following text formula field for the current step value:
If( ISBLANK(TEXT({!recordId.Contract_Status__c})), "Not Started", TEXT({!recordId.Contract_Status__c}) )

When I ran the flow, I received the following error:
Conditional visibility rule error on currentContractStatusFormula field: Field recordId.Contract_Status__c is a picklist field. Picklist fields are only supported in certain functions. Tell me more.

I've verified the output of the formula is the string I need for the current step.

Cannot use within a flow embedded in a public digital experience

Experiencing similar issues as previously stated. Is this use case intended and if so, is there any available support?

The component displays as expected when using the flow debug.

Doesn't work on communities in a flow

Path is Linked which reloads the page and the flow

Is this the same code as this package?

If so, many thanks for the contribution to the community and for making it available. If not, then this may or may not be applicable to your code.

The path works great, but each stage in the path is hyperlinked. If a user clicks on the status, it reloads the page the flow is embedded in which starts my flow over again.

Would it be possible to not make these clickable or set to preventDefault on click?