Create Breadcrumb Or Chevron Control in Salesforce Flow

Display chevron control or breadcrumb in Flow to show Salesforce flow screen navigation progress

Chevron Component in Flow

Have your end user complained or wanted some more coolness from Flow ? Do they want to have a nice clickable graphical presentation at top of page showing their progress or page number ? Recently, I was having a discussion with my colleague on same requirement. User should be able to jump between pages and at the same time, pictorial status should be displayed. Can we do it in Flow ? Can we create a chevron control or breadcrumbs in Salesforce Flow. Answer is yes.

Winter 18 has lots of cool functionalities for flow and we should not be left behind in adopting flow as part of our solution, at last, its point and click instead of code.

I will take help of my previous article, which explains how images can be used in formula field from static resources. In our case, instead of formula, we will use Display Text component in Flow. For this post, you can upload this zip file as a static resource and use in FlowThis zip file contains total 6 images for three pages, active and inactive images.

Getting image URL from static resource for Flow

Once image is uploaded as zip file in Salesforce, there is view link which will give us the URL of images. Basically, it has below format :

/resource/<staticResourceID>/<staticResourceName>/<imageName>

Creating Flow with Chevron / Breadcrumb component

Below image shows overall flow structure. It has three screens and on basis of stepNumber, we decide which screen to open.

Salesforce Flow - Chevron Component
Salesforce Flow – Chevron Component

All three screens has Display Text with below source code. If you observer carefully, only change is image source in all three screens. For the readability purpose, HTML is properly formatted, make sure there is no new line in whole code, otherwise image would be rendered in new line instead of on same line.

Below image shows sample screen. In same way, other two screens can be configured.

Salesforce Flow - Chevron Component - Sample Screen
Salesforce Flow – Chevron Component – Sample Screen

Related posts