Adding Custom Images to Flow Screens and Overriding the “Next” and “Previous” buttons

So a VP asks me to build a Flow demo for him, and I do. But he wants it to have more visual sizzle. He even gives me a nice piece of stock photography, along with a version where the wheels are highlighted.

So I built a little custom component and made a video. In the first half I’m talking about MultiShim, an installable Flow Screen Component that adds line padding. But in the second half, I demonstrate how to override the next and previous buttons, and how to wire some custom images into a simple lightning component and use it as a highly visual flow screen.

Try It In Your Own Org

This demo has been packaged up and is installable via this link*.

*If you run into an External Sharing Settings error, make sure you’ve enabled External Sharing Model in Sharing Settings.

The package includes four lightning components: MultiShim, a Datatable variant that displays Repair_Procedure__c custom objects, CustomCarPicker, which contains the images and mouse logic, and DateTimePicker. It also includes several images as Static Resources, and the core Flow, called AutomativeServiceFlow.