No. Layers. Onions have layers. Ogres have layers. Onions have layers. You get it? We both have layers

Shrek

Like all good Ogres, this “solutionette” has layers. I hereby humbly submit “The Flowgre” to the good people of the Salesforce community; enabling extensibility via Flow for the Dispatcher console.

It is a way of invoking a Flow using the Lightning Flow runtime from places in Salesforce where you have to use Visualforce to extend the functionality. Yeah, I’m looking at you Field Service Lightning (FSL) dispatcher console. There are other areas where a similar approach to this would work.

It’s pretty simple to launch a Flow from Visualforce directly, but it looks a bit jarring when you are in Lightning experience. The small amount of extra effort is worth it from a user experience perspective, in my opinion.

Solution Summary

The solution makes use of Lightning Out to host a lightning component in a Visualforce page. The lightning component itself simply uses the Lightning:Flow component to invoke the Flow. By using the get parameters that are exposed by the FSL dispatcher console, we can perform actions on multiple selections made by the user and give them a Flow to interact with.

This is how I visualise it:

Code Samples

Visualforce Page

The page you create here is what you will add as a custom dispatcher console action.
Note the flowApiName parameter. This will be passed through to the component and should match the Flow API name of the Flow you want to invoke.
The parameters here will select out the service appointment ids that are checked. You will also need to handle where a single appointment is selected using the id parameter (not shown).

<apex:page>
   <apex:includeLightning />
   <div id="LcDisplayId" />
   <script>
        $Lightning.use("c:FlowWrapperApp", function() {
            $Lightning.createComponent("c:FlowWrapper", { 
                // Set Lightning Component Attributes Property before creating Lightning Component In Visualforce page.
                    serviceappointments : "{!$CurrentPage.parameters.services}",
                    flowApiName :"MyFlow"

                },
                "LcDisplayId",
                function(component) {
                    // create component Callback, Lightning Component has been Created,
                    // Now you can set more lightning Component attributes here,
                    // and do more cool stuff here
                   
                });
        });
   </script>
</apex:page>

Lightning Component

Create a new Lightning Component named FlowWrapper. Add the following code to create the Markup and Controller.

Markup

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId" access="global" >
    <aura:attribute name="serviceappointments" type="List"/>
    <aura:handler name="init" value="{!this}" action="{!c.init}" />
    <lightning:flow aura:id="flowId" />
</aura:component>

Controller

({
    init : function (component) {
        // Find the component whose aura:id is "flowId"
        var flow = component.find("flowId");
        var flowApiName = component.get("v.flowApiName");
        var serviceappointments = component.get("v.serviceappointments");
        var inputVariables = [
        {
            name : 'ServiceAppts', //this is the name of the parameter in flow you will pass the list of appointment Ids into
            type : 'String',
            value : serviceappointments
        }];
 
        // Start your flow here. Reference the flow's Unique API Name.
        flow.startFlow(flowApiName, inputVariables);
    }
})

Lightning App

Create a new Lightning Application called “FlowWrapperApp”. Add the following code and save it.

<aura:application access="GLOBAL" extends="ltng:outApp" >
    <aura:dependency resource="c:FlowWrapper" />
</aura:application>

Flow

Not detailed here but you can just create a simple screen Flow with an input parameter called “ServiceAppts” and make the screen render this to show the end to end data propagation in action. How you handle that parameter is now up to you.

Demo

Note on Visualforce in the dispatcher console

The FSL dispatcher console is hosted in an iFrame which is in a different domain to the Visualforce that you will load. If you have clickjack protection enabled for customer visualforce pages, you will find the page doesn’t load. To get around this, you will need to whitelist the domain the FSL dispatcher runs in by adding it to Whitelisted Domains for Visualforce Inline Frames in session settings. I will publish a more detailed article on domain whitelisting for this purpose soon. 

Recent Posts