How to Display Toast in Salesforce Lightning Flows?

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

1. Production Link
2. Sandbox 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 

1. @api title; /* Title of the toast */
2. @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! */
3. @api variant; /* Variant of the toast. Should be one of the values, info, success, warning, error */
4. @api iconName; /* Icon name of the toast. We are not using this variable */
5. @api delay; /* Delay of the toast in milliseconds */
6. @api recordName; /* Name of the record which will be displayed over the toast message */
7. @api URL; /* URL of the record where the user will be redirected when the user clicks on the url */
8. @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.

1. Login to Salesforce
2. Navigate to Setup
3. Search for Flows in the Quick Search Box
4. Click on Flows
5. Click on the “New Flow” Button
6. 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

1. Click on the + Icon
2. From the available elements, select Screen Element
3. 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.

Trailhead Link

I have added the flow inside home page

Complete video

Complete code

resources

https://developer.salesforce.com/docs/component-library/bundle/lightning-platform-show-toast-event/documentation