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.
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.
Coding Patterns For Reusable Lightning Web Components – Factory Pattern
Hi, welcome to the first post in a series on what I think are great coding patterns that you can adopt when creating your own reusable Lightning Web Components or Lightning Components.
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.
Lockdown fun for the whole family
This is the first post and has nothing to do with Salesforce. Here is a game I invented a couple of weeks ago that actually worked for about an hour.
