Last Updated on June 12, 2022 by Rakesh Gupta

Have you ever come across a situation in Flow where you wanted to redirect your users to a newly created record but did not know how to handle/configure/implement it?

Yep, pretty frustrating memory – who could forget? Well, thanks for reading my blogs, you’re in luck! Using different use cases, I have written around a hundred articles on Salesforce Flow to guide users on how to use Flow Builder. You just landed at the right place to learn about it. 

This Solution will only work in Lightning Experience. 

By default, when a flow finishes, (1) a new interview starts and users see the first screen of the flow; or (2) you can redirect users either to an old record or to the record from where s/he started the flow. 

In this article, I am going to show you how, you can create a Lightning component, that calls Flow Local Action to redirect users to newly created record. 

Before we move ahead, let us understand what is a ‘Flow Local Action’ and, its power.

When you use Lightning components as flow actions, you can execute actions in the client-side (browser) rather than going through the Salesforce server. Like Lightning Components, Flow Local Actions executes on your device in the browser. For example, you can perform the following actions:

1. Open a newly created record in another browser tab
2. Open a list view
3. Display pop-up alert 
4. Play Sound (For example, when an opportunity is closed-won)
5. Use the Camera of the laptop/workstation 
6. Reload the web page
7. Open a URL in another window or tab
8. Get the data from a third-party server without going to the Salesforce server etc.…

Once you configure the Lightning component markup; (i) client-side controller; and, (ii) design resource, appear in Flow Builder as a Local Action. 

Today, in this article, I am going to show you how you can create a Lightning component that calls Flow Local Action to redirect the user to the newly created lead record.

Business Use Case

Edward Backhouse is working as a System administrator at GurukulOnCloud. Edward received the following requirement from his manager – create a lead capture form which looks like the following screenshot:

Once a user clicks on the Finish button, redirect them to the newly created lead record. Later, Edward has to put this form on the Home Page Layout and open it for the entire world. 

Pre-requests

Please go through these articles first:

1. Getting Started with Salesforce Flow Designer – Part 2 (Do You Know How Screen Element Bestows Power on Flow Builder?!)
2. Create and Edit Aura Components (Source Trailhead)

A solution for the above business requirement

To solve this requirement, we will use many ingredients – including, Salesforce Flow, Lightning Component, and a Flow Local Action. 

Let’s take the discussion further and understand how you can develop this solution end-to-end. Perform the following steps to create the solution using the new Flow Builder: 

1. Log-in into your developer org.
2. Click on Setup (Gear icon) | Developer Console. 
3. To Create a new lightning component, click on File | New Lightning Component, and configure it – as shown in the following screenshot:
4. Now copy paste the following code – feel free to change it based on your business requirement.

   1. Component Markup                                          
      <aura:component implements="lightning:availableForFlowActions" access="global" >
      <aura:attribute name="leadId" type="String" access="global"/>
      </aura:component>

   2. Client-side Controller                            
      ({
      invoke : function(component, event, helper) {
      var redirectToNewRecord = $A.get( "e.force:navigateToSObject" );
      
      redirectToNewRecord.setParams({
      "recordId": component.get( "v.leadId" ),
      "slideDevName": "detail"
      });
      redirectToNewRecord.fire();
      }
      })

   3. Design Resource
      <design:component>
      <design:attribute name="leadId" label="Id of the New Record" />
      </design:component>
      

5. Things to understand before proceeding to the next step: 
   1. lightning:availableForFlowActions: Implement lightning:availableForFlowActions interface to make sure that lightning component is available as flow local actions. 
   2. When the local action is executed, the flow calls the invoke method, which uses the force:navigateToSObject event to navigate to the created record. The code runs asynchronously in your client-side controller
   3. If you want to make an attribute’s value customizable in Flow Designer, add it to the component’s design resource. That way, flow creator can pass values between that attribute and the flow when s/he configures the Core Action element. The leadId attribute is declared in the design resource so that it is configurable in the local action.
6. The next step is to create a flow that uses the above lightning component. To do so, navigate to Setup (Gear Icon) | Setup | Process Automation | Flows.
7. Now click on the New Flow button; it will open Flow Builder for you.
8. Next, we will use the Screen element to create a lead capture form. Drag and drop a Screen element onto Flow Builder and configure it – as shown in the following screenshot:
9. The next step is to insert the data entered by the user, in the lead capture form, to Salesforce. For this, we will use a Create Records element. Drag and drop a Create Records element onto Flow Builder and configure it – as shown in the following screenshot:
   
10. Now we will use our next flow element i.e. core action (NavigateToNewRecord) which we created in step 4. This local action takes the user to a lead record page in the Lightning Experience. Drag and drop an Action element onto Flow Builder and configure it – as shown in the following video:
11. In the end, Edward’s Flow will look like the following screenshot:
12. Once you’re done, Save the flow and name it NavigateToNewRecord, with Type: Screen Flow. Do not forget to activate the Flow by clicking on the Activate button.
13. The final step is to add the NavigateToNewRecord to the Lightning Experience Home page. Follow the instruction as shown in the following video to add a Flow to Lightning Experience home page:
14. Once you are done, click on the Save button. 

Proofreader: - Munira Majmundar