Make Salesforce Screen flows more Interactive with Toast Messages

Screen flows are most widely used and powerful automation tool providing guided and interactive steps for users in Salesforce. However, there is no default way to provide quick, uninterrupted pop up like feedback on user actions in screen flows. Here, We will see how you can make Salesforce Screen Flows more Interactive with Custom Toast messages.

Why Toast Messages in Screen Flow

Toast messages are great way to provide end user a quick pop up alert or feedback of success, error, warning or just information without interrupting main screen interactions.

Several use cases to add toast messages in screen flows :

• Provide Instant feedback after completing process on screen flow
• Provide Informative Pop up on their progress while users go through multi-steps screen flow
• Provide seamless interaction without navigating away from the flow screen

As of today, in Salesforce Screen flows, We don’t have any standard way to add toast messages to screen flows.

So Let’s build our reusable custom Toast message component that we can add into any screen flows.

Business Use Case

The SalesforceFox company has appointment booking system for their users. On record page, User can click to confirm appointment with client. When this confirm button launches Screen flow to provide confirmation screen, user can click on Confirm. After that, this flow sends Automatic emails to client in background for their appointment confirmation.

However, sometime clients are not receiving appointment confirmation email due to email delivery failure. therefore, Now, User wants quick pop up message which confirms them if email has been delivered or not.

Now, Let’s implement this new requirement to make this existing salesforce screen flows more Interactive with Toast Messages.

🔴 New Approach (Winter ’26) : Direct LWC Local actions 🔴

Great news ! In Winter ’26 release, Salesforce has introduced a game-changing feature that significantly simplifies toast message implementation in screen flows.

You can now use LWC directly as local actions to be called from screen flow without needing an Aura wrapper that we had to do before this release.

with API version 65.0 or above in LWC, we can use target called lightning_FlowAction in .xml file of LWC. So now, we can call this LWC directly from Screen Flow via Action.

Inside LWC controller we need to implement method called invoke() with @api decorator to trigger action from screen flow

If your sandbox already has winter’26, Let’s See how we are going to have FlowAction in LWC

Now, copy LWC component from Step 1 below and the replace .js & .xml files as per new approach shown here

// Winter'26 new approach to call LWC from Screen Flow
import { api, LightningElement } from "lwc";
import { ShowToastEvent } from "lightning/platformShowToastEvent";

export default class ShowToastExampleComponent extends LightningElement {
  
  @api toastTitle;
  @api toastMessage;
  @api toastVariant;

  @api
  invoke() {
    this.ShowToastMessage();
  }
 
  ShowToastMessage() {
    this.dispatchEvent(
      new ShowToastEvent({
        title: this.toastTitle,
        message: this.toastMessage,
        variant: this.toastVariant
      }));
 }
}

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
   <apiVersion>65.0</apiVersion>
   <isExposed>true</isExposed>
   <targets>
       <target>lightning__FlowAction</target>
   </targets>
   <targetConfigs>
       <targetConfig targets="lightning__FlowAction">
           <property name="toastTitle" type="String" label="Add Toast title" />
           <property name="toastMessage" type="String" label="Add Toast message" />
           <property name="toastVariant" type="String" label="Add Toast variant" />
       </targetConfig>
   </targetConfigs>
</LightningComponentBundle>

• Direct LWC Support: Use lightning_FlowAction target to call LWC directly from Flow Actions
• No More Aura Wrapper: Eliminate the need for intermediate Aura components
• Simplified Architecture: One component instead of two Better Performance: Direct execution without additional layers

Now you can skip step 2 & 3 from below Step-by-step implementation and directly go to step 4 to find this LWC directly in Screen flow action and add your toast messages

Step-by-Step implementation (Before Winter ’26)

1. Building LWC to generate Toast Message

This LWC is only to sent toast message so it will not display anything

<template>
    <!-- nothing to display here -->
</template>

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

export default class CreateToastMessage extends LightningElement {
     toastMessage;
     toastVariant;
     toastTitle; // Optional
  
     @api
     showToastMessage(toastMessage, toastVariant, toastTitle) {

        this.toastMessage = toastMessage;
        this.toastVariant = toastVariant;
        this.toastTitle = toastTitle;

        const event = new ShowToastEvent({
            title: this.toastTitle || '',
            message: this.toastMessage,
            variant: this.toastVariant
        });
        this.dispatchEvent(event);
    }
}

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>64.0</apiVersion>
    <isExposed>true</isExposed>
</LightningComponentBundle>

2. Where to put this LWC: CreateToastMessage on Screen flow

LWC’s .xml configuration can have target called lightning_FlowScreen. This allows us to place it inside screen of flow. However, if we look our requirement, we don’t want to show toast message when user is on screen rather we want to show toast message once screen flow action is done and email are sent.

In most of the scenario, Toast messages are to be displayed at end of screen flow when user finished actions on screen. So putting this CreateToastMessage lwc on screen will not fulfill our requirement.

How about using Action element in the Flow and then this action element calls above LWC !

Unfortunately, from Flow Action we can not call any LWC . because as of now, LWC doesn’t have any target to configure in its .xml file which allows them to be called from Flow Action. However Aura component has availableForFlowActions interface which allows Aura component to be called from flow action.

Therefore, we will invoke an Aura component (let’s call it wrapper) from a Screen Flow action. then, Inside this Aura component, the LWC will be triggered to generate a Dynamic Toast message.

3. Create Aura Wrapper to be called from Flow Action

This Aura wrapper which implement availableForFlowActions can be called from Action element inside Flow. Inside actions element, We will pass data necessary to create toast like Toast Title, Toast Message and Toast Variant Type. Before that, these data variables will be defined as input variables in Aura Wrapper.

This Aura wrapper will call above CreateToastMessages LWC’s method which is creating toast message.

<aura:component implements="lightning:availableForFlowActions">
	<!-- Defining LWC inside Aura -->
    <c:createToastMessages aura:id="createToastMessages"/>  
    
    <aura:attribute name="toastTitle" type="String" />
    <aura:attribute name="toastMessage" type="String" />
    <aura:attribute name="toastVariant" type="String" />
    <aura:handler name="init" value="{! this }" action="{! c.invoke}" />
</aura:component>

({
    invoke: function (component, event, helper) {
        var type = component.get("v.toastVariant");
        var message = component.get("v.toastMessage");
        var title = component.get("v.toastTitle")? component.get("v.toastTitle") : "";
        component.find("createToastMessages").showToastMessage(message, type, title);
    }
})

<design:component>
   <design:attribute name="toastTitle" label="Add Toast Title" />
   <design:attribute name="toastMessage" label="Add Toast Message" required="true"/>
   <design:attribute name="toastVariant" label="Add Toast Type (Success, Info, Warning, Error)" required="true"/>
</design:component>

Now, let’s see how using this Aura wrapper we can generate dynamic toast messages from screen flow.

4. Set up Flow Action to create Toast message

i. Add Action element to Screen flow & find ToastWrapper Aura component

ii. Now Add Custom Toast Message as per requirement

1. adding toast message to inform successful delivery of email

2. Adding toast message to inform failure of email delivery

How the Entire Screen Flow with toast messages Appears

Toast Messages in Action

Consideration

• Here, We are calling an Aura component wrapper with availableForFlowActions from the Flow’s Action element. This wrapper works only in Screen Flows.
• because, other flow types (like autolaunched or scheduled flows) run on in backgroubd (the server-side). These flows cannot access client-side frameworks like Aura or LWC.
• Therefore, we can not have custom toast messages in any flows other than screen flows.

Feel free out reach out or add comment below for any further information/concern