How To

Invoke a Flow from a Global Action

FlowAndLightningCurrently, we are only able to invoke a flow from an object specific action. But what if you have a need to invoke a flow from a global action? You COULD embed the flow in a visualforce page. However, when you embed a flow in a visualforce page, the flow will not run in the Lightning skin. You get the ugly looking Classic flow screen. Yuck!

From the global action options, you can invoke a lightning component from a global action so I wondered if you can embed a flow in a lightning component. The answer is YES!

Now, I know what you’re thinking. Cool, but I don’t know how to create a lightning component. I’m not a developer.

Do you know how to copy and paste? If you do, you’ve got this.

Here are a few lessons learned from implementing this use case:

  • How to invoke lightning component from a global action in Lightning Experience.
  • How to create a custom lightning component that references a flow.

Business Case:  Addison Dogster is the system administrator at Universal Containers. Mary Markle is the Director of Sales Manager. Mary’s sales reps would like to access the flow screen Addison is building from anywhere in Salesforce.

Solution: Ideally, Addison would like to invoke flow from a global action, but this is not a current capability. Being the #AwesomeAdmin that Addison is, she was able to solution this requirement by creating a lightning component that references the flow that is invoked from a global action.

FinishedProduct.GIF

View image full screen

Quick Steps:

Pre-Requisite: You are using Lightning Experience.

  1. Create and activate a screen flow.
  2. Create a Lightning Component using the Developer Console.

Note: The important part for exposing the lightning component to a global action or quick action is the code “force:lightningQuickActionWithoutHeader.

The code starts here:

<!– ,force:lightningQuickActionWithoutHeader –>
<aura:component implements=”flexipage:availableForAllPageTypes, flexipage:availableForRecordHome, force:hasRecordId,force:lightningQuickActionWithoutHeader” access=”global” >

<aura:handler name=”init” value=”{!this}” action=”{!c.init}” />
<lightning:flow aura:id=”flowData” />
</aura:component>

Code ends here.

Go to the Flow screen and replace in the code the “FlowName” with your Flow’s API name.

Tab over to the Controller and copy and paste the following code:

({
init : function (component) {
// Find the component whose aura:id is “flowData”
var flow = component.find(“flowData”);
// In that component, start your flow. Reference the flow’s Unique Name.
flow.startFlow(“FlowName“);
},
})

This is where you find your flow name API/unique name.

FlowAPINameGIF.GIF

This is an animated gif showing you the steps for creating the lightning component,

DevConsole.GIF

View the image full screen

Don’t forget to save the component and the controller. Voila! You created your first lightning component! (Well, kinda…)

3. Create a Global Action in Setup, User Interface | Global Actions.

  • Action Type: Select “Lightning Component”
  • Lightning Component: Select the lightning component you created in Step 2
  • Height: Specify the height in pixels
  • Label: Provide a name of the global action
  • Name: This is the API name

GlobalAction.GIF

View the image full screen

4. Now, we need to place the action onto the Publisher Layout for it to show up in Global Actions in Setup | User Interface | Global Actions | Publisher Layouts. You may need to override the predefined actions under the Salesforce Mobile and Lightning Experience Actions section. Then locate the action you just created in the previous step and drag it into the section.

PublisherLayout

View image full screen

That’s all!

You’ve created your first lightning component that invokes a flow that you’ve executed from a global action.