Let’s Get Toasty!

There has been a simple Show Toast action available on unofficialsf.com that you could use in a Flow to display a pop-up toast panel with a message of your choice. Recently I’ve seen users asking for things like being able to control the display time or including a clickable link in their message.

I decided to add those options to the component along with additional features such as the display mode, custom icons and a title.

Read on to see how you can install and use this enhanced component in your own org.

How It Works

This action uses the force:showToast event

It takes multiple attributes. You can control the message, display type and mode, duration and even include a clickable link in the message.

Using the Component

You can use this Lightning Component in a Flow to configure and display a Toast message.

Parameters

(Required)

  • Type – Success (default), WarningErrorInfo Other
    • Other is styled like Info but is displayed without an Icon unless you specify a custom icon to use.
  • Message – The message to display in the toast
    • To include a clickable link in the message, place the characters {url} in your message and provide values for the URL Link and URL Label parameters.

(Optional)

  • Title – Text to appear above the message in a slightly larger font
  • Icon – The name of the Utility icon to display when choosing a Type of Other
  • Mode – Dismissible (default), Pester Sticky
    • Dismissible will display the toast message until the close button is clicked or the duration time has elapsed.
    • Pester will display until the duration time has elapsed. No close button will be available.
    • Sticky will remain displayed until the close button is pressed
  • Duration – The default is 10 seconds and the minimum is 5 seconds.
    • The duration attribute only applies to Dismissible and Pester modes
  • URL Label – This is the Label for the link in your message
    • To include a clickable link in the message, place the characters {url} in your message. At run-time the message will be updated to replace {url} with the value of your URL Label parameter and it will link to the address you specified in the URL Link parameter.
  • URL Link – This is the URL for the link in your message

Sample Usage

This first example shows how a Toast Message can be activated with just a message and defaults.


This example generates a Warning message with a Title, 15 second duration and no close button.


This example generates a Toast Message with a Custom Icon and will be displayed until the close button is clicked.


This last example includes a Link to a newly created record from the Flow.

{!vContactId} holds the record ID of the new Contact
In the message, {url} will be replaced with a Link defined by URL Label and URL Link
This is the URL Label
This is the URL Link

fContactRecordURL is a special formula you can use to combine the correct URL with the currently running domain name and the recordId you want to display.

LEFT({!$Api.Partner_Server_URL_340},FIND("/services", {!$Api.Partner_Server_URL_340})) & {!vContactId} 

Eric Smith – December 15, 2019

Subscribe
Notify of
guest
8 Comments
Inline Feedbacks
View all comments
Gidi

Eric, thank you very much for enhancing this action!!!
This enhancement was in my wish list 🙂

Gidi

Bill

Eric, This is a great addition, I’ve tried installing this in a sandbox environment, but its not available in the list of actions. Am I missing a step to activate it after installing?

Bill

No, I was trying to add it to a flow triggered from Process Builder

Bill

Thanks, that’s the issue, I can see it now on a screen flow. Does anyone know if there’s a way to display a toast when a process builder completes?

Masahiro

Hi Eric,

I tried using Toast with the link to the newly created Opportunity in the flow. However the toast didn’t appear. Is this because I call the flow from URL in the custom button?

Here’s the demo.
https://drive.google.com/file/d/1xPWyQoZ7RtDL4JSntfhqZ3ZuiM-HdJyI/view?usp=sharing

and debug mode shows the toast node seems working fine.
https://drive.google.com/file/d/1j0YBCvRSJX2GoomPQsS6OHJIxsDBSuwI/view?usp=sharing

Thanks you for your advice!