Field Service Lightning – Flow for Dispatcher Console

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.

A lightning runtime screen flow running in the dispatcher console

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:

Flowgre

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. 

Subscribe to this blog

Recent Posts

Chain of Responsibility Pattern in APEX

I was interested in seeing if this was possible in APEX, and was looking around for an implementation of this pattern and wasn’t able to find a reference, so I decided to just have a go and see what I could come up with

How to draw a system context diagram for your Salesforce project

Hello and welcome to the first post in a series of lessons on how to create excellent technical drawings for your Salesforce project. The first one is the System Context diagram, and I was inspired to start this while making toast for my children this morning.

Open CA Progress

I have a few Salesforce certs and like so many people out there one day, I hope to attain the rank of CTA. But currently, I am working towards something a bit different.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s