Developed by @darrylingalls, Sr. Developer at Praxis Solutions LLC
Version 2.5 introduced the ability to use the FEL component in Lightning Communities/Digital Experience. Fixed an issue where using the FEL component in Console mode would cause multiple tabs to launch a flow.
Version 2.0 introduced the ability to create flows that can take more than one input parameter. Two parameters: "flowVariableName" and "Ids" have been modified to be arrays to allow for defining multiple variable names and their input values. Please see the section "Sample Event Payload passing multiple parameters to a flow" for an example of the payload.
Version 2.0 introduced the ability to create flows that can take more than one input parameter. Two parameters: "flowVariableName" and "Ids" have been modified to be arrays to allow for defining multiple variable names and their input values. Please see the section "Sample Event Payload passing multiple parameters to a flow" for an example of the payload.
The Enhanced Lightning Grid component from Salesforce Labs is a phenomenal component that enables creating a custom related-list table with:
You can find the Enhanced Lightning Grid on the Salesforce AppExchange here or on Github here
One of the common questions we’ve seen posted online is - how can I launch a flow from buttons on Enhanced Lightning Grid (ELG) components. You could use the lightning event (e.force:navigateToURL) to navigate to a flow page, but this navigates away from the page, which may not be what you want. We’ve created the FlowEvent Launcher (FEL) to launch flows from ELG as a popup (modal):
There are two ways to install the Flow Event Launcher:
Install the pre-packaged component using the following links
Install to Sandbox: https://test.salesforce.com/packaging/installPackage.apexp?p0=04t1K000002b1c8QAA
Install to Production: https://login.salesforce.com/packaging/installPackage.apexp?p0=04t1K000002b1c8QAA
There are two steps to set up and use the FEL on any lightning page:
Drag the FlowLauncher component on to the page. It will be invisible, though it’s sitting there listening for a Lightning Event, which will tell it to jump into action \ (note: while on the Lightning App Builder, the component will appear to add some white-space where you placed it, but when viewing a page, it will be fully invisible) \
Configure the Sortable Grid action to invoke the FEL component and to pass in required information.
The crucial part of making the FlowEventListener respond and open the flows will be to configure the Enhanced Lightning Grid properly.
When you click the New button In the actions related list of the Sortable Data Grid page, the below page shows up. We’ll walk you through each field to make sure the setup process is as clear as can be:
Name\ Select a name for the Event - this will show up on the button
SDG\ is the lookup to the Sortable Grid you are adding
Event\ This is the Lightning Event that pressing the button will fire. \
Action Order \ If you create multiple actions, this determines the order buttons appear in the table.
Required checkboxes \ You can ensure that only users that have Create/Edit/Delete permissions to the displayed object will see the button
Action Type \ You can select the following options: \ a. Row: the action will appear on each row in the action drop-down button \ b. List: the action will appear on the table’s header in the action drop-down button \ c. Row Button: the action will appear as a distinct button on each row \ d. List Button: the action will appear as a distinct button on the table’s header \ e. List Multi-Select: same as List Button, but will only be active when records are selected \
Event Payload \ This is where we define what flow gets launched and other related information. Details below. \
Icon \ You can select any icon from the Lightning Design System library, available here: \ https://www.lightningdesignsystem.com/icons/
The event payload is entered in a JSON format (example below). \ The component accepts the following attributes:
Sample Event Payload With only default Id's Parameter
{
"ids" : "#ids#",
"flowName" : "My_Cool_Flow",
"flowVariableName" : "varSelectedLines",
"forcePageRefresh" : true,
"sObject" : "myCustomObject__c",
"fields" : [ "Id", "Name","My_Field__c","LastModifiedDate","OwnerId","Owner.FullName"]
}
Sample Event Payload passing multiple parameters to a flow:
{
"ids" : ["#ids#","#parentrecordId#"],
"flowName" : "My_Cool_Flow",
"flowVariableName" : ["varSelectedLines", "varParentId"] ,
"forcePageRefresh" : true,
"sObject" : "myCustomObject__c",
"fields" : [ "Id", "Name","My_Field__c","LastModifiedDate","OwnerId","Owner.FullName"],
"dialogWidth" : 50
}
Your flow must have an input variable that takes a collection of the SObjects records that you are expecting from the Enhanced Lightning Grid.
The FEL component can more than just an extension to the Enhanced Lightning Grid component. In its most basic form, it simply sits on a page, invisible, and waits for a Lightning Event of the type e.praxis:flowEvent. These events can be fired from other places, including custom components and potentially other 3rd party components. Whereever you see a reference to firing a lightning event like e.force: that means you can also call the FEL in the same way as described above.
We will quickly outline the steps to make a quick Flow that takes a collection of Contacts and displays them into a Screen Element. Next, we will show how to setup the Event Flow Listener in a Lightning Page. Finally, the last step will be to configure the Enhanced Lightning Grid to display both row and list level buttons to communicate with the FlowEventListener and to have your flow launched into a Modal Dialog.
Navigate to the accounts page and click on the “Example Contacts” related list. Select as many rows from the Enhanced Lightning Grid. Press the “List Collection” button at the top right of the list.
Boom, you should see the flow showing in a modal dialog.