Getting Started with Salesforce Flow – Part 4 (Need to Redirect a User to a New Record?)

Getting Started with Salesforce Flow – Part 4 (Need to Redirect a User to a New Record?)

Last Updated on December 19, 2020 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:

Screen Shot 2019-01-09 at 7.53.19 PM

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:Screen Shot 2019-04-14 at 9.14.15 PM
  4. Now copy paste the following code – feel free to change it based on your business requirement. Flow blog - 4.1
    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: Blog 4 - 4.1
  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:Blog 4 - 4.2
  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:Blog 4 - 4.4
  12. Once you’re done, Save the flow and name it NavigateToNewRecordwith 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. 

It’s time to test the Flow!

Now, if a User creates a record using flow component that we added to the Lightning Experience Home page, they will redirect to new lead record as soon as they click on the finish button.

–> If you like this article, or would like to share some ideas for enhancements then, please do so. I will very much appreciate it. Thanks in advance. 

Proofreader: - Munira Majmundar
Have feedback, suggestions for posts, or need more information about Salesforce online training offered by me? Say hello, and leave a message!

15 thoughts on “Getting Started with Salesforce Flow – Part 4 (Need to Redirect a User to a New Record?)

  1. I have the same fate as Steve. It stated “Page does not exist. Enter a valid URL and try again”. I believe the problem lies in the Lightning Component. I do not know how to code and where to make the change 😟

  2. This doesn’t work for me. It just says page doesn’t exist and enter a valid URL. Also since it’s only one screen to this flow. I only have a next button and not a finish button.

  3. I followed your exact steps but when I went to select the core action in the flow it was not listed. Why? I have never developed before am I missing a step where I need to activate the local action from the developer console? All I did was save it.

  4. This was very helpful and easy to follow these steps, thank you! Is it possibly to redirect to newly created record & have it open in edit mode?

  5. Brilliant!! Is it possible to use this when you’re lauching the flow from an action instead of from a lightning component.

  6. Hi Rakesh, this is the error I getting after adding this flow component to the home page

    “We can’t launch this flow because of a variable error. Send this error message to your admin. The value null is being provided for variable VarTEmailAddress but isn’t compatible with the variable’s data type (String). Check the places where you implemented the flow ‒ such as through a Lightning page or a custom button ‒ and make sure that all provided values are compatible with the variables’ data types.”

    What could be wrong?

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.