How to Invoke a Flow from a Global Action

It’s great that we can invoke a flow from an object-specific action, but what if you need to invoke a flow from a global action? You COULD embed the flow in a Visualforce page; however, if you were to do so, the flow wouldn’t run in the Lightning skin. You’d get the ugly-looking Classic flow screen. That’s not a good user experience (UX).

From a global action, you can invoke a Lightning component; therefore, you can embed a flow in a Lightning component. Awesome!

Now, I know what you’re thinking. Great news, Jen, 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!

Disclaimer: We’re creating a Lightning component, also known as an Aura component. We’re not creating a Lightning web component (LWC), which is newer technology and more performant than a Lightning component. Ideally, we would create a LWC; this would be the better route. However, it would be more labor-intensive as you’d need install a tool like Visual Studio Code (VS Code) and Salesforce Tooling to create and push the LWC to your org. If you have a developer resource, have them create you a LWC instead. For this solution, we’re using the Developer Console to create our Lightning component right in our org.

Let’s walk through a use case at a fictional company, Mochi Cupcakes, with our beloved #AwesomeAdmin Addison Dogster.

The business problem

Addison Dogster is the system administrator at Mochi Cupcakes. 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.

The 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 invoked from a global action.

Addison created and activated her screen flow in her org.

She has the Flow Detail screen for her screen flow handy to grab the Flow API Name, which she will need when she creates the Lightning component.

Next, she creates a Lightning component using the Developer Console, accessed via the wrench icon in the upper-right header.

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

Addison copies and pastes the following code in the Component tab. She saves her changes.

<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>

Addison tabs over to the controller and copy and pastes the code below.

({
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*");
},
})

Addison replaces *FlowName* in the code above with her flow API name so the Lightning component knows which flow to invoke. She saves her changes.

Here is Addison’s updated controller with her flow API name inserted:

({
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("Create_a_Cupcake_Order");
},
})

Here are the steps for creating the Lightning component.

Don’t forget to save the component and the controller. Voilà! You created your first Lightning component! (Well, kinda.)

Now, Addison needs to create the Global Action. In Setup, she navigates to User Interface | Global Actions.

• Action Type: Select Lightning Component.
• Lightning Component: Select the Lightning component you just created.
• Height: Specify the height in pixels.
• Label: Provide a name of the global action.
• Name: This is the API name.

Next, Addison needs to place the action onto the Publisher Layout for it to show up in Global Actions. She navigates to Setup | User Interface | Global Actions | Publisher Layouts. She locates the Create a Cupcake Order action she just created in the previous step and drags it into the section.

Note: You may need to override the predefined actions under the Salesforce Mobile and Lightning Experience Actions section.

That’s it! The action should now appear in the Global Actions section in your org! Addison created a Lightning component that invokes a flow invoked from a global action.

Now, it’s your turn! Give this solution a try in your org.

Resources

• Trailhead: App Customization Lite: Understand How Actions Work in Lightning Experience
• Salesforce Help: Global Quick Actions