Show Toast Message in Lightning Flows Salesforce

by Rijwan Mohmmed
show-toast-message-in-lightning-flows-salesforce-techdicer

Hello Salesforce Trailblazers! today we are going to discuss Show Toast Message in Lightning Flows Salesforce. Are you ready to enhance your user experience in Lightning Flows? Let’s talk about a powerful tool in your arsenal: Toast Messages.

Toast Messages is a small, unobtrusive notification that sends important information or confirmation to users. Lightning Flows, it’s a fantastic way to provide real-time feedback and keep users informed. We can use this screen flow.

Also, check this: Visualforce Email Template in Salesforce

Key Highlights :

  1. User-Friendly: Toast messages are user-friendly and ensure important information doesn’t get overlooked.
  2. Real-Time Feedback: Users instantly know the outcome of their actions, improving their experience.
  3. Efficient Workflow: Toasts help streamline flows, guiding users through processes smoothly.
  4. LWC: Use LWC in Lightning flow to show the Toast message.
  5. Dynamic: We can pass toast type and message from Flow to LWC.

Code :

Step 1: First of all we create the LWC component for the Toast message, because Lightning Flow doesn’t have the Toast message directly.

ToastInLightningFlow.HTML:

<template>
</template>

ToastInLightningFlow.JS:

import { LightningElement, api } from 'lwc';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
import { FlowNavigationFinishEvent } from 'lightning/flowSupport';

export default class ToastInLightningFlow extends LightningElement {
    @api mode;
    @api variant;
    @api message;
    @api title

    connectedCallback() {
        this.handleShowToast();
        this.handoverCloseAction();
    }

    handleShowToast() {
        const toastEvt = new ShowToastEvent({
            title: this.title,
            mode: this.mode,
            variant: this.variant,
            message: this.message
        });
        this.dispatchEvent(toastEvt);
    }

    handoverCloseAction() {
        const navigateNextEvent = new FlowNavigationFinishEvent();
        this.dispatchEvent(navigateNextEvent);
    }
}

toastInLightningFlow.js-meta.xml:

<?xml version="1.0"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
	<apiVersion>57.0</apiVersion>
	<isExposed>true</isExposed>
	<targets>
		<target>lightning__FlowScreen</target>
		<target>lightning__RecordAction</target>
	</targets>
	<targetConfigs>
		<targetConfig targets="lightning__FlowScreen">
			<property name="title" type="String" label="Enter Title"/>
			<property name="mode" type="String" label="Enter Mode" default="dismissible"/>
			<property name="variant" type="String" label="Enter Varient"/>
			<property name="message" type="String" label="Enter Toast Message"/>
		</targetConfig>
		<targetConfig targets="lightning__RecordAction">
            <actionType>ScreenAction</actionType>
        </targetConfig>
	</targetConfigs>
</LightningComponentBundle>

Step 2: Now we create a Lightning Flow so we can show the toast message. In this Lightning flow we will insert the Contact record.

Step 1: First of all create a recordId variable so we can get AccountId from the record page.

Step 2: To insert a record element add a contact object and add fields.

Step 3: Now we add the screen and drag & drop the LWC component that we created. Also, feed the other details on the right side. This will be a success toast.

Step 4: Add this screen when you get the error on the creation record.

Output :

show-toast-message-in-lightning-flows-salesforce-output

Reference :

  1. Create LWC Toast Messages in Salesforce
  2. Screen Flows
What’s your Reaction?
+1
2
+1
0
+1
0
+1
0
+1
0
+1
0

You may also like

5 comments

Kelly January 22, 2024 - 10:41 am

Thanks for this post Rijwan, it was quite helpful. I wanted to ask how I might add a link to the Rossi message that redirects to the created record? Thank you!

Reply
Rijwan Mohmmed January 22, 2024 - 11:27 am

Hi @Kelly,
You can use below code for link in toast message

https://techdicer.com/link-in-lwc-toast-message/

Reply
Anonymous February 22, 2024 - 7:06 pm

can i get the code for custom lightning path for lead with update path button and if we update the lead status field then path should also get updated.

Reply
Rijwan Mohmmed February 23, 2024 - 4:28 am

Yes we can

Reply
Anonymous February 23, 2024 - 1:39 pm

Can you please help me with that code?

Reply

Leave a Comment