Screen Flow Inception (Launching a Screen Flow in Modal from a Lightning Web Component in a Screen Flow)

The significant part of the story in the movie Inception is about going inside of a dream; inside of a dream. This kind of what I am doing now with the Flow Flex Card component we are launching a screen flow from a screen flow a little bit like Inception.

I used to handle this functionality using a combination of two Lightning Web components, along with an apex page and an aura app in one of those LWC’s. This is no longer the case with the added functionality of lightning-flow in the Salesforce Winter 23′ release we can now launch a screen flow directly from an LWC. With the new functionality, I am able to handle this now with a single child LWC in Flow Flex Card. 

Why fix what’s not broken? A couple of things here I think good developers and architects always want to build something that is easily maintained and scalable Flow Flex Card has had a lot of evolution since I volunteered to be on the project it has experienced my own learning journey so I wanted to make it easier for other developers to contribute to the component as well as make it easier on myself when troubleshooting issues with users. It also moves the component to be based all on LWC versus a combination of Aura and LWC improving performance and expanding the possibility to do more in the future. There were also some issues when Flow Flex Card was deployed on an Experience Cloud Site with enhanced domains that required some changes in the fsc_ScreenFlow component that could become an annoying maintenance task in the future if Salesforce were to change domain behavior again. 

Let’s break down the before and after of what this looks like. 

As you can see in the diagram above I was able to significantly reduce the amount of code and components needed to launch a screen flow from within the Flow Flex Card component. I replaced the need for fsc_screenFlow with the standard OOTB lightning-flow delivered as part of the Salesforce Winter 23′ release. With just a simple update to the HTML file and a few items in the js, I was able to greatly reduce my tech debt and open up for further capabilities in the future i.e. custom finish and navigation behavior (more to come on that in a couple of months)

Resources and Learn More

Flow Flex Card

Lightning Flow