Flow Event Launcher

Launch flows from Enhanced Lightning Grid's row or list button, and have that flow open as a pop-up window overlay (modal).

Developed by @darrylingalls, Sr. Developer at Praxis Solutions LLC

Demo

Version 2.5 Enhancement

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 Enhancement

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 Enhancement

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.

Introduction

The Enhanced Lightning Grid component from Salesforce Labs is a phenomenal component that enables creating a custom related-list table with:

1. Row-Level Buttons with icons
2. Row-Level Action (drop-down button)
3. List-Level Buttons with icons
4. List-Level Actions
5. Multi-Select with List-Level buttons/actions

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

Installing the Flow Event Launcher

There are two ways to install the Flow Event Launcher:

1. Clone the code in this repository, and push it to your Salesforce Org
2. Install the pre-packaged component using the following links

   1. Install to Sandbox: https://test.salesforce.com/packaging/installPackage.apexp?p0=04t1K000002b1c8QAA

   2. Install to Production: https://login.salesforce.com/packaging/installPackage.apexp?p0=04t1K000002b1c8QAA

How to use Flow Event Launcher

There are two steps to set up and use the FEL on any lightning page:

1. 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) \

2. Configure the Sortable Grid action to invoke the FEL component and to pass in required information.

Configuring the Enhanced Lightning Grid

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:

1. Name
   Select a name for the Event - this will show up on the button

2. SDG
   is the lookup to the Sortable Grid you are adding

3. Event
   This is the Lightning Event that pressing the button will fire. \

   • If you deployed our code directly to your org, use: e.c:FlowEvent \
   • If you used our pre-packaged component, use: e.praxis:FlowEvent
     

4. Action Order
   If you create multiple actions, this determines the order buttons appear in the table.

5. Required checkboxes
   You can ensure that only users that have Create/Edit/Delete permissions to the displayed object will see the button

6. 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 \

7. Event Payload
   This is where we define what flow gets launched and other related information. Details below. \

8. Icon
   You can select any icon from the Lightning Design System library, available here:
   https://www.lightningdesignsystem.com/icons/

The Event Payload

The event payload is entered in a JSON format (example below). \ The component accepts the following attributes:

1. Ids (Required)
   A valid list of Salesforce Id’s for the SObjects(s) on the Enhanced Lightning Grid that was selected. EGL support the following variables: Update:Ids can be an array of multiple Parameters
   a. #id# - passes the id of the row (you will only use this in row-level actions)
   b. #ids# - passes the list of ids for the selected rows (you will only use this in list-level actions). As of version 2.0 you can pass multiple values as Flow Inputs. This field can be a single value or be made into an array
   c. #parentrecordId# - passes the id of the parent record (the record viewed on the page)
   d. #AnyAPIName# - you can pass in the value of any field that is displayed in the table, for example #LastModifiedDate#
2. flowName (Required)
   A valid API name of the flow which is expected to be started.
3. flowVariableName (Required)
   The name of the input variable in the launched flow that will accept a **collection of SObjects **that will be passed from the FEL Component.
   _Note that the component doesn’t just pass in the selected IDs, it actually queries the records and passes in the records themselves. Therefore, the input variable must be of type ‘Record’ and must have the ‘Allow multiple values (collection)’ checkbox selected, as well as the ‘Available as Input’.
   As of version 2.0 you can pass multiple values as Flow Inputs. This field can be a single value or be made into an array. Note: You must include the variable names in the same order that you defined their values in the Ids field above. \
4. sObject (Required)
   The API name of the sObject that will be queried and passed into the flow’s input variable
5. Fields (Required)
   List of fields on the sObject that are to be retrieved from Salesforce. The fields can be standard, custom and reference fields. You can use relational fields to obtain values from related parent records through lookup fields.
   Any field that you plan to use inside the flow must be provided here, or queried separately inside the flow.
6. forcePageRefresh (Optional)
   When using this parameter, the FEL component will cause the page to refresh all data once the flow popup (modal) is closed.
   This is done by firing the e.Force:refreshView event, and is different than a full page-refresh. \
7. dialogWidth (Optional)
   This parameter can be used to set the width of the dialog by percent. Please enter a whole number it will always be assume it is a percentage.

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
}

Flow Requirements

Your flow must have an input variable that takes a collection of the SObjects records that you are expecting from the Enhanced Lightning Grid.

Going beyond 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.

Putting it all together

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.

Create Flow

• Create a new Flow and label it whatever you want.

• Create your flow to do what ever you like. In this example you will see a Record Collection, labeled “contactRecords” variable and a Screens element, labeled “Screen Test”. The screen can be configured to meet your needs to display the Record Collection variable.
  • It is important to remember when creating the input variable to check the following boxes: “Allow multiple values (collection)” and the “Available for Input”.
• After creating your screen to display your input variables save the screen and exit.

Configure Enhanced Lightning Grid

• From the Salesforce Application Launcher select “Sortable Data Grids”.

• From the list view create a new Data Grid.

• When entering the information on the Create sortable data grid dialog, remember to select Contacts as the SObject. In the next image you’ll see an example.

• Once the new grid is created select it from the list view then select the “Related” list view tab.
• From here you can configure your grid to display the fields you need from the “Fields” list view. Once that is done you can proceed to create actions. This is where we will configure for the Flow Event Launcher.

• In this example we will discuss the configuration for the “List Collection” as shown in the image below.

• To ensure that the new grid fires off the correct event we define it in the Event field as “e.c:FlowEvent”.
• In our example the action is defined as a “List Multi Select”.
• The event Payload is where we configure the FlowEvent in which the FlowEventListener will listen for.
  • The five fields: ids, flowName, flowVariableName, sObject and fields are listed in the example payload. All the fields are required to be configured with valid input.

Placement of Lightning Component on Lightning Page

• In this example the accounts Lightning Page will be updated to add a new tab to the related list called “Example Contacts”.

• The following components have been placed onto the page:
  • Enhanced Lightning Grid - Click on the component and make any component level configurations that are needed, such as; Visibility, Icon, name of component, etc..
  • FlowEventListener - UI (less) will not show on the page at run-time. No configurations needed.

• Click Save and then Activate

Let’s see it in action

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.