Introduction
In this blog post, we will see how to display the Toast Notification from Salesforce Lightning Flow Builder. As we all know that there are no such out of box functionality to display the message so we will be using Lightning Web Component.
Use case
You are developing a Screen Flow to create a quick Case/Request from the Account Record Page and the requirement is to show the toast notification whenever the case is created.
dvelop lightinng web component
The first step is to create the Lighting web component which will be responsible for showing the toast notification from Screen flows.
If you are not familiar with how to create the Lightning Web component use the below link to install the code in your org.
installation link
If you do not want to install the package then the complete code is given below.
Usage of LWC Component
Once you have installed the component or used the below code for creating the component. we need to understand how to use the component.
To use the component there are some input values that we need to pass from Flow to LWC. Below are the explanation of each input
- @api title; /* Title of the toast */
- @api message; /*The Message of the toast. If you wanted to display the Clickable url in the toast then the message format will be ‘Record {0} created! See it {1}!’ where {0} is the record Name and {1} is the url to the record. You also need to provide the recordName variable in the template so that the template can be parsed. For Example, the message is Record {0} created! See it {1}! And the recordName is John Doe & the url is https://www.google.com & actionLabel is Here then message in the toast will look like Record John Doe created! See it Here! */
- @api variant; /* Variant of the toast. Should be one of the values, info, success, warning, error */
- @api iconName; /* Icon name of the toast. We are not using this variable */
- @api delay; /* Delay of the toast in milliseconds */
- @api recordName; /* Name of the record which will be displayed over the toast message */
- @api URL; /* URL of the record where the user will be redirected when the user clicks on the url */
- @api actionLabel; /* Label of the clickable button. For Example, Click Here, or Here */
develop screen flow
Once you have installed or created the component. Now, the time is to create the Lightning Flow Builder.
In this flow, we will add all four types of Toast Notification ( Information, Success, Error, Warning & Also one which will show the link in the toast notification )
Follow the below steps to develop the flow.
- Login to Salesforce
- Navigate to Setup
- Search for Flows in the Quick Search Box
- Click on Flows
- Click on the “New Flow” Button
- From the available flow, select Screen Flows
Add Screen element
Now, once you have created the flow. Follow the below steps to add the screen flow
- Click on the + Icon
- From the available elements, select Screen Element
- Give Any Name & Label
Add toast component
While Screen Element is Opened Search for “Toast Component” and Drag & Drop the Component to the canvas
save & test flow
We have added just one screen with info toast. If you want to test another type of toast. Change the value of Toast Variant in the input parameters. The valid values are info, success, error & warning.
Click on Save, Provide the Label, and then activate the flow
Note: – I have the same component in the screen 4 times for different types of flows! You can also add as many as times you want.
use flow inside record page
After activating the flow, We need to add the flow inside the record page because flow can not display toast while we debug the flow.
To add the flow inside the record page, follow the steps from the below link. You can add the flow anywhere you want like, Home Page, Record Page or App Page.
I have added the flow inside home page
Hi,
How do you get the Users to see the toast messages please? As as System Admin, it works on my end, but for the few Profiles I’ve tested, the messages do not show. Is there a system permission needed here?
Thanks for your help.
There are no permission required. You need to make sure that Component is added that’s it.
Hi,
I can get the Navigate to URL used with Button Label and {1} in Toast Message to work. When I click on it, nothing happens. If I use the right-click and Open in new tab, it opens the record.
What am I missing?
How are you passing the values? Are you able to share that information?