Launch Screen Flows With LWC

Lightning Flow Builder may be used to accomplish anything, including generating and modifying records, sending emails, starting the approval process, calling apex classes, displaying, and interacting with lightning components, even calling other systems, and other things. If we, as Salesforce administrators and developers, did not fully utilise such a terrific technology, it would be uncool. 

Using Lightning Web Components in the Lightning Flow Builder, you can create flow components that look better and are more creative. 

To improve user experience and do tasks that flow alone cannot, we leverage Lightning Web Components in Flow. Screen flows may now be called from LWC components as of the Winter 2023 release, which is a new feature. 

We can now call screen flows inside the LWC component; thanks to Salesforce’s newly built lightning-flow component. 

The lightning-flow component takes three attributes. 

  • flow-API-name: 

 The screen flow’s API name that you wish to call inside of LWC. 

  • flow-input-variables:  

     This is an array used to set values for flow input variables. 

         .js file for InputVariable Code implementation           

  • onstatuschange:  

This is an event that occurs whenever the flow step advances or recedes. 

                .js file for InputVariable Code implementation           

Note:  Releases from Winter 2023 and later support this functionality. 

How do we refer to Lightning Flow in LWC?  

We can see how flows and LWC components are made in this example and  as well as how LWC launches flows. In the past, we had a functionality that allowed flows to call LWC. Now, that this feature has been added; so, we can easily call 

  1. Make a new screen flow or utilize one that already exists. 

We may either construct a new flow or use one that already exists depending on the requirements. If a new flow is required, we must create one; otherwise, we  

can use an existing one. 

To create new flow: setup->New Flow->screen flow 

For Example: I am displaying Hello and welcome to Screen Flow. Launched by LWC text in this flow 

This flow has been saved with the name: Screen Flow with LWC and flow API Name: Screen_Flow_With_LWC. 

Now, we created new Screen flow called Screen Flow with LWC to display message Hello and welcome to Screen Flow. It will be Launched by LWC 

  1. Create LWC component 

Create a new LWC component to call the flow that we created with an API Name of “Screen_flow_with_Lwc”in Lightning Flow as shown in the below screen shot. 

Created LWC with callingFlowThroughLwc in vs code. 

.html file 

In the meta.xml extension, we need to add the targets where we need to make visible of the component we have created. 

.meta.xml file 

3.   Deploy your component and add it to your desired screen 

After creating the lwc to display the command palette, press Command + Shift + P on a Mac or Ctrl + Shift + P on a Windows computer. 

  • Authorize the Org: 

Type SFDX: Authorize an Org. Press Enter to accept the login URL’s default setting. 

  • Deploy the source to Org: 

Type SFDX force:source:push command is used to deploy Lwc component to Org 

We can see the LWC we created in the custom components on the left side of the edit page. 

Drag the LWC component to where you want it to appear. Then, save and activate the page as shown in the image below.  

After completing the above steps,  we can see the flow screen 

We have now successfully launched flow from LWC.  

We ”MST-ians” are highly skilled in designing flows and LWC elements. Including a screen flow from any Lightning Web Component using the new lightning-flow component Developers may improve the performance of their flows by changing the finish behaviour, defining a distinctive style, or beginning flows from their Lightning Web Components.By giving complex input collecting and branching logic to Flow, they may also save time and money. 

References

https://help.salesforce.com/s/articleView?id=release-notes.rn_automate_flow_builder_lwc_launch_screen_flows.htm&type=5&release=240&language=en_US

About MST

At MST Solutions our cornerstone is to adapt, engage and create solutions which guarantee the success of our clients. The talent of our team and experiences in varied business verticals gives us an advantage over other competitors.

Recent Articles

Work with us.

Our people aren’t just employees, they are key to the success of our business. We recognize the strengths of each individual and allow them time and resources to further develop those skills, crafting a culture of leaders who are passionate about where they are going within our organization.