From Narender Singh: Launch a Quick Action at the End of a Flow
Narender’s investigation reveals you can use navigation extension like Navigate Everywhere and OpenURL to get Quick Actions to pop up. You just need to use the correct URL syntax.
From Gerald: Using Flow to Create a Synchronized ‘Co-Work’ Chat Session
Gerald Ehret-Franck is a Salesforce Principle Solution Engineer (previously he came from Rivia) who has crafted a powerful combination of extensions that enable flows to be inserted into chat sessions and used to managed those same chat sessions. The pinnacle of his achievement, though, is this surprisingly easy-to-implement synchronized coworking solution, where agents can see and assist their users in real time.
Why doing so? This will help you create great experience from both the Customer and Agent perspective in order to :
- Improve Customer Satisfaction and Loyalty
- Improve Agent efficiency and Reduce Average Handle Time
- Improve Quality by reducing copy/paste error
Demo
Overall Architecture
Configure
This example describe the configuration used for the demo above
Install
You will need to install the packages from these three extensions:
- How to Run a Screen Flow in a Chat Session
- Manage Chat/Messaging Session with Flow
- Enabling Flow Screens to Respond to Platform Events
Step 1 – Create a platform event
This platform event will be used to synchronise the customer flow with the agent flow. the platform event has two fields
- id => to identify the platform event between agent and customer
- use_of_fund_reason => to store the customer’s answer and share it with the agent
More information about Platform Event on Salesforce Help.
How does the id get used? Let’s say you’re having two customers (A & B) having a chat session at the same time with two different agents (A & B) and both of them running the “synchronized” flow. When customer A is filling his form you want only the agent A’s running flow to react to the platform event created by customer A. You don’t want the agent B’s running flow to react. That’s exactly what this id is for. Customer A will create a platform event with an id and agent A is reacting to only platform events with that id.
How does Agent A and customer A knows which id to use? In the demo you may have notice that customer A’s flow has been initiated by Agent A. When Agent A initiates a flow on the customer side for customer A, agent A initiates this customer side flow with one parameter : the id customer A must use to create platform events. This id can be auto-generated and unique, it can be the ChatTranscriptId or the CaseId (assuming the same customer is not discussing with two different agents for the same case!).
If you need more data to synchronise between customer and agent, just add more fields to the platform event
Step 2 – Create Permission
You need to create a permission set to allow users to create and read the Platform Event created. A platform event is a Salesforce Object and will appear as any other objects in the “Object Settings” section of your permission set. You should assign the proper permission to both internal and external users.
More information about Permission Set on Salesforce Help.
Step 3 – Create the Customer side flow
This flow demonstrates the key elements necessary to create a Synchronized Co-Working chat session.
The first node is a screen that will display the question in the form
The second node is a create record node and will create the platform event
The third node is a screen that will display the results
Step 4 – Create a lightning component to listen to the platform event
Refer to following post.
Step 5 – Create the Agent side flow
Remember that in the demonstration, the flow was initiated from the Case and not the Live Chat Transcript
The first node is a Get Record node in order to retrieve the LivechatTranscriptId from the Case Id. The Case Id will be passed in a variable named recordId
The second node is a Screen that will:
- Display the question in the form
- FlowManageChatSessionSC : Send an administrative message to launch the customer side flow in the customer chat window. The message we are sending is a formula fields: “lwc:flow:Use_of_Funds_Customer&recordId=”+{!recordId}. The Chat Lightning Web Component Pack we have installed will react to this message and instead of displaying the message, it will launch the flow
- FlowManageChatSessionSC: Send the script message automatically in the chat window which is “A form regarding the use of funds must be completed, I am sending you the form in the chat window”
- FlowEventListener: Listen to the platform event.
- Input: we use the Case Id as the id
- Ouput : we store the data in a variable named UseOfFund
The third node is a screen that will:
- FlowManageChatSessionSC: Send the script message automatically in the chat window which is “Thank you for completing the questionnaire 😃, we have noted that the use of funds concerns “+{!UseOfFund}. In the demo the value for the variable UseOfFund is 🛠Renovation Work
- Display Image
- Display the result
We can then store the value in the Case.
From Gerald: Enabling Flow Screens to Respond to Platform Events
You can drop this extension into a Flow Screen and use it to respond to platform events by carrying out flow navigation.
You can refer to this following post Using Flow to Create a Synchronized ‘Co-Work’ Chat Session to have a example of what you could do with this component!
Platform Event
The Platform Event should have at least the following fields :
- Id => to identify the platform event between agent and customer
- flowNavigationRequest => allows to control the flow navigation of the flow receiving and reacting to the Platform Event. Possible values are : none, next, back, pause, end.
- Value1, value2, value3, value4, value5 => example of value the Platform Event will carry out. Note : you can change those fields based on the type of information to carry out.
Permission Set
You need to create a permission set to allow users to create and read the Platform Event created. A platform event is a Salesforce Object and will appear as any other objects in the “Object Settings” section of your permission set. You should assign the proper permission to both internal and external users.
Component
The component has the following attributes:
- Id => to identify the platform event between agent and customer
- eventAPIName => the API name of the platform created
- flowNavigationRequest => When the component receives a platform event, this attributes allows to control the flow navigation. Possible values are : none, next, back, pause, end. Note : The platform event has also an attribute “flowNavigationRequest” that takes precedence over the one in the component.
- Value1, value2, value3, value4, value5 => example of value the component will be able to retrieve from the Platform Event. Note : you can adapt those attributes to reflect the field created on your Platform Event.
Install
1.0 Unmanaged 11-25 https://login.salesforce.com/packaging/installPackage.apexp?p0=04t1v000002GyT7
Source
The code is available in this github repository
From Gerald: Insert Screen Flows into Chat Sessions
It’s easy to inject running Flow screens into Salesforce chat sessions using the new Chat Lightning Web Component Pack. This post covers the basics. You may want to also explore the more advanced Synchronized Chat capabilities you can add in this post.
To create a richer chat experience that includes Flow screens, you can replace the default chat component with the richer Chat Lightning Web Component Pack available on the Appexchange as a Salesforce Labs.
Chat Lightning Web Component Pack is the most complete set of example Lightning Web Components for Chat ever assembled! If you are looking for the fastest way to add rich media to your Salesforce Chat and Einstein Bot experience, look no further! The package includes many more capabilities.
How to use it?
Generating a screen flow is done by ‘sending’ a special chat message in the following format: lwc:flow:{flowURL}:{height}.
This message will not be seen by the customer but instead the component will interpret this message and display a flow instead. Parameters:
- flowURL: the API name of your flow, with URL params to set input (ie “myFlowName¶m1=val1¶m2=val2)
- height: the height in pixels that you want the iFrame to be
let’s have a quick example
- Flow API name : MyFlowName
- The flow has one input variable : ContactId
The syntax will be : lwc:flow:MyFlowName&ContactId=003000000000000000 with “003000000000000000” being the id of the Contact to pass as input variable.
To generate these special chat codes, you can enable your agents to run a simple Flow.In the above video, you can see the agent running a flow that in turn causes the chat session to launch a flow.
Sending the Special Chat message from Flow
From a flow, you can send a message automatically in the chat as described in this post. The previous article provides a package for installing the Manage Chat/Messaging Session with Flow Extensions. From your flow create a formula variable that will output the appropriate syntax and send it automatically with the Manage Chat/Messaging Session with Flow Extensions.
Sending the Special Chat message from other places
- From an Einstein Bot you can easily generate the appropriate message with the right syntax. Einstein Bot can leverage variable, example below.
- Using Quick Text and merge fields, agents can also generate the appropriate message with the right syntax.
How to get in my org?
Install the package you can found here : Chat Lightning Web Component Pack
For more information here is the user guide
Open-source package, so you can modify for your use cases here: https://github.com/Colatabajonies/Chat-Lightning-Web-Component-Pack
From Gerald: Manage Chat Sessions from Flow
These two extensions are designed to enable a service agent to use a flow to manage elements of a chat session which rely on the Conversation Toolkit API .
The supported features include:
- Send Message – the message will then be immediately sent
- Load Message – the message will be set in in the agent’s text box so the agent can change/personalize it
- Request File Transfer from Customer – Initiates the process of transferring a file from a customer to an agent
- End Chat – Ends a chat in which an agent is currently engaged.
The functionality is available as both a screen component and a Flow action.
Attributes
- sessionId : the id of the LiveChatTranscript or the MessagingSession.
- actionType : the type of action you want to perform. Supported action are : sendMessage, loadMessage, endChat, requestFile.
- message : the message you want to set or send.
- recordId : (for initFileTransfer only) the id of the record to attach the file after transfer.
Screen Component
How to use it?
Just drag and drop the component on a screen and fill the parameter. See example below:
In case your flow is not started from the LiveChatTranscript object or the MessagingSession object, you can also retrieve the LiveChatTranscriptId or the MessagingSessionId using a Get Record node in your flow. The example below retrieves the LiveChatTranscriptId from the CaseId:
Action
How to use it?
Just drag and drop an Action node and fill the parameter. See example below:
In case your flow is not started from the LiveChatTranscript object or the MessagingSession object, you can also retrieve the LiveChatTranscriptId or the MessagingSessionId using a Get Record node in your flow. The example below retrieves the LiveChatTranscriptId from the CaseId:
How to get it in my org?
Install the following package : FlowManageChatSession
The package will add two Lightning Component :
- ManageChatSession : you can use this extension as an Action
- ChatSessionManagerSC : you can use this extension as a screen component in Flow Screens
The code is available on github as well
End-to-end example
In this scenario we will start a flow from a Case during a Web Chat conversation. The flow initiated by the Agent will send a message to the customer.
You need first to enable and configure Web Chat. If you’re not familiar with Web Chat, you can refer to this great Trailhead module : Web Chat Basics.
Screen Component
Create a flow with an input variable recordId. The id of the Case will be passed in this variable:
Add a Get Record node so you can retrieve the LiveChatTranscriptId from the Case id:
Add a Screen node and drag and drop the FlowManageChatSessionSC component into your screen
Finally your flow should look like this:
Let’s put it all together and see how it look like from an Agent point of view:
Action
Now let say you would like to provide the same end results but this time leveraging the Action component.
Create a flow with an input variable recordId. The id of the Case will be passed in this variable:
Add a Get Record node so you can retrieve the LiveChatTranscriptId from the Case id:
Add a Action node and and fill the parameter
Add a Screen node and drag and drop the FlowManageChatSessionSC component into your screen
Finally your flow should look like this:
Let’s put it all together and see how it look like from an Agent point of view:
Luke Freeland Does ‘Get All Fields’ Benchmarking
Continuing his work in Flow Benchmarking (Salesforce Record Automation Benchmarking by Luke Freeland), Luke has done some more interesting benchmarking with performance data on forcing Flow to store all fields in the new ‘Get All Fields’ feature. Interesting stuff and worth considering when forcing Flow to truly store all of the fields in a record collection.
Check it out: https://metillium.com/2020/11/flow-get-records-benchmarking/
From Josh Dayment – Barcode Scanning Component for Flow
The Barcode Scanner component provides you a way to scan various types of Barcodes using a flow and the Salesforce Mobile App, Mobile Publisher for Salesforce, or Mobile Publisher for Communities in Flow screens. It allows you to take the data stored in that barcode and return the variable to be used later downstream in your flow or instantly show Salesforce Data to users in the app all from scanning a barcode. This component uses the existing BarcodeScanner API.
In my example use case I am using it for contactless check in at a job fair. We have a custom object called Registration where I have a QR Code I generated using an formula field using the open API from goqr.me (ex: IMAGE(“https://api.qrserver.com/v1/create-qr-code/?size=150×150&data=”&Id ,”Scan QR code”) I am using the recordId from my Registration that is passed through into the output value of the component.
Flow Setup is really simple right now there are no inputs the barcode is what provides your data as a string to the flow itself. The output variable of scannedBarcode is a string variable that can be used in your flow.
See the scan in action below.
Install
View Source
From Chase Kaiser – Tips on Managing Your Flow Tabs
If you are like me, you break your more extensive flows into multiple (sometimes dozens) of subflows. When building out and debugging these subflows concurrently, it can be a massive pain to navigate between them all as Salesforce gives each tab the generic “Flow Builder” title, leaving you with a mess like the screenshot below.
Tab Modifier is a browser extension created by u/sylouuu that allows you to quickly rename your tabs by simply right clicking anywhere on the page and selecting “Rename Tab”.
Once renamed, the new tab titles are stored in your browser and will permanently override the standard “Flow Builder” title unless modified or deleted in the extension options, making it infinitely easier and less frustrating to work with multiple flows at the same time.
Copy & Paste of Images in Flow
Want to easily paste in imges from the clipboard or upload them from your desktop, and then use them in emails and rich text record fields? You can do that with Input Rich Text. Here’s a new video that focuses on image manipulation:
Install the Rich Text Input extension here.
From Chase Kaiser: A New Quick Choice Feature – “InstantNavigation Mode”
“InstantNavigation Mode” is a new feature added to the Quick Choice component (now located in the new flowscreencomponentsbasepack) that, when set to true, triggers a navigateNext event when a visual card is selected. This allows for fast navigation through a flow, especially when additional processing is needed based on the selection before further inputs/screens can be rendered to the user.
Below, you can see how useful this can be in a mobile form factor, providing a push-button command console:
Why it was added
Currently, in order to achieve this effect an admin can either:
- Require the user to click Next in the footer on each screen to process the current input. This can lead to a lot of extra clicks in flows that require larger amounts of user input and broken into multiple screens for interim processing.
- Use conditional visibility to determine the next input shown to the user on the same screen, allowing more data to be entered on a single screen. This, however, requires that any processing elements (Get, Assign, Loop, etc.) required for each of the initial options must be executed before the screen is rendered so that each conditional input can be displayed should the user choose the corresponding option.
“InstantNavigation Mode” solves both of these issues by eliminating the extra clicks required when using standard flow navigation buttons and (with a subsequent decision element) ensures that only elements relevant to the user’s selection are executed, improving flow efficiency (a bonus side effect of which is reducing counts towards Salesforce’s governor limits, especially since they reset between each screen).
How It Works
A new InstantNavigation mode checkbox is now available in the property editor, as shown to the left.
Solution: Replacing Traditional Lightning Buttons To Create Navigation Menus
In addition to its use as a quick-picklist, “InstantNavigation Mode” can be used as a nice replacement for the lightning-button component since the number of “buttons” is dynamic and look much cleaner as the size of each is larger and the width is uniform rather than being determined by the length of the label. Another advantage to using Quick Choice navigation is the option to include custom images and descriptions in each menu item to further aid your users in getting where they need to go quickly.
*NOTE – The “Next or Finish” navigation control must be enabled in the screen setup options in order for the navigateNext event to fire when an option is selected. A footer is not required but will not affect the component’s ability to navigate should you wish to include one.
