Let’s Get Toasty!

/9 Comments/in /by

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}

Eric Smith – December 15, 2019