Redirect to external URL from a Flow

Flow Builder Lightning ComponentLeave a Comment on Redirect to external URL from a Flow

Redirect to external URL from a Flow

For a while the company I work at has been using a CPQ tool that is very specific to our business, and has been custom built as a standalone web application on the Heroku platform. The URL of the tool takes a Salesforce Opportunity ID as GET parameter, and uses standard Salesforce REST to retrieve Account, Contact, Opportunity data (which is then displayed on the quotes we send out).

Current way of working is to open the tool from an Opportunity record in Salesforce, by clicking on a Custom Button (Content Source=URL), in which the Opportunity ID is passed on as a Merge Field. This means that for an user to be able to make a quote and send it to the customer, a new Opportunity should be created. This is also a business requirement, as Opportunities are used to track the progress of an account manager in the sales pipeline.

To be able to make process faster (read less clicks), we started thinking of a way to create an Opportunity in the background before opening the CPQ tool. The starting point of this user flow could be the Account detail page, or the Contact detail page, just like it is the starting point of creating a new Opportunity. Next the user should be able to fill in a couple of fields, which are mandatory to create an Opportunity. This all sounds like a screen flow which can be built using the Lightning Flow Builder. The only doubt I had was whether we could redirect to another page from a Flow.

I stumbled upon a blog post which resulted to be very helpful:

Redirect Flow Users with a Local Action

What is described here is a functionality available in the new Lightning Flow Builder, which changes the way the flow finishes and redirects the user to another page instead of starting a new interview (default behaviour). The article says that a local action can be built which takes care of the redirect, and this local action can be added to the Flow with a Core Action element. This seems to be exactly what we need, only that the code example provided redirects to another record in Salesforce, not to an external URL.

A local action is actually a Lightning Component, so a bit of searching on Lightning Components and the word “redirect”, lead me to the following page:

Lightning component redirect to URL in the same tab – Salesforce Stack Exchange

With all these code examples I could start creating a new Lightning Component (which I did from the Developer Console, click New -> Lightning Component). For the Component Markup it is important to implement the lightning:availableForFlowActions interface. To be able to pass the external URL in the Component an attribute “url” is added.

<aura:component implements="force:lightningQuickAction,lightning:availableForFlowActions">
   <aura:attribute name="url" type="String" />
</aura:component>

The url attribute is also declared in the design resource so that it’s configurable in the local action in the Flow Builder.

<design:component>
   <design:attribute name="url" label="url" />
</design:component>

Next up is the controller, in which a lightning event “navigateToURL” is declared, and before it is fired, the url parameter that was declared earlier is passed.

({    invoke : function(component, event, helper) {
   // Get the url parameter
   var url = component.get("v.url");
   
   // Get the Lightning event that opens the url in a new tab
   var redirect = $A.get("e.force:navigateToURL");
   
   // Pass the url to the event
   redirect.setParams({
      'url': url
   });
        
   // Open the url
   redirect.fire();  
    
}})

The new Lightning Component is now ready to be used in a Flow. To add it to the flow, drag an element called Action (it used to be called Core Action) onto the canvas, and in the following dialog set Filter By pick-list to Type. You are now able to select Core Action and will be presented a search box to search for Lightning Components which implement the lightning:availableForFlowActions interface. Selecting the navigateToUrl component will present me a dialog in which I can configure the url to redirect to as an input value.

The complete Flow looks like this. The url parameter that is used in the local action is actually a Formula resource which concatenates a constant (the base url of my web application) and the ID of the Opportunity that is created in the Create Opportunity element.

With the Flow linked to the Account record page as a Quick Action, our mission is completed, our sales users are now able to create an Opportunity and open the external tool to create a custom quote in a couple of clicks.

Leave a Reply

Your email address will not be published. Required fields are marked *

Back To Top