{"id":6315,"date":"2017-10-21T18:17:01","date_gmt":"2017-10-21T18:17:01","guid":{"rendered":"http:\/\/www.jitendrazaa.com\/blog\/?p=6315"},"modified":"2017-10-21T18:22:34","modified_gmt":"2017-10-21T18:22:34","slug":"create-breadcrumb-or-chevron-control-in-flow","status":"publish","type":"post","link":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/create-breadcrumb-or-chevron-control-in-flow\/","title":{"rendered":"Create Breadcrumb Or Chevron Control in Salesforce Flow"},"content":{"rendered":"

Have your end user complained or wanted some more coolness from\u00a0Flow<\/strong> ? 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.<\/strong> Can we do it in Flow ? Can we create a chevron control or breadcrumbs in Salesforce Flow.\u00a0Answer is yes.<\/strong><\/p>\n

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

I will take help of my previous article<\/a>, which explains how images can be used in formula field from static resources. In our case, instead of formula, we will use\u00a0Display Text component<\/em>\u00a0in\u00a0Flow.<\/strong> For this post, you can upload this zip file<\/a> as a static resource and use in Flow<\/strong>.\u00a0This zip file<\/a> contains total 6 images for three pages, active and inactive images.<\/p>\n

Getting image URL from static resource for Flow<\/h5>\n

Once image is uploaded as zip file in Salesforce, there is\u00a0view<\/em> link which will give us the URL of images. Basically, it has below format :<\/p>\n

\/resource\/<staticResourceID>\/<staticResourceName>\/<imageName><\/em><\/p>\n

Creating Flow with Chevron \/ Breadcrumb component<\/h5>\n

Below image shows overall flow structure. It has three screens and on basis of stepNumber<\/em>, we decide which screen to open.<\/p>\n

\"Salesforce
Salesforce Flow – Chevron Component<\/figcaption><\/figure>\n

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