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), Warning, Error, Info & 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} 

Installation – Install in Production

Sandbox – Install in a Sandbox

Source Code – Source code repository

Documentation – unofficialsf.com



3 thoughts on “Let’s Get Toasty!

  1. This component works great! I use it in many places in the system.
    I just have one question.
    I want to make the message clickable, so I added {url} and then entered URL label and link as you mentioned. It works great on desktop but on the mobile app, I see {1} instead of the message and also it is not clickable.
    So, isn’t it supported on mobile or am I missing something?

    Like

      1. Looks like only the part about replacing the {url} does not work/supported, otherwise it works great.

        Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s