Implement a Toast in a Flow

Of course, I'm not talking about actual toast, you can save that one for breakfast. I'm talking about a Toast Message in Salesforce. You know, the ones that show up when you create a record or delete a record? Here's a neat trick for all those out there who enjoy Salesforce's Flow Builder.

I've always considered myself an above-average flow creator. From Field Service Lightning flows for the mobile app to an all-encompassing menu button for Service Cloud that gives end-users the power to create records, update related records, submit approvals, and so much more without ever leaving the original record. What elevates the game is if you could magically have a way for them to open the record they just created right afterward. Well keep on reading and I'll tell you how.

In my last article, we learned about how to make Confetti fly across a record page from the click of a button. If you haven't tried that one, I definitely recommend giving it a read and try implementing it for yourself. Click here to check it out.

Time to get to what you came to this article for. The toast message in a flow, this one is a little bit more difficult so as always reach out or comment on my post for help.

Let's get into it!

Head over to your developer org or create a new one here. Once you're in your dev org, go to the gear icon in the top and open up developer console.

Click File > New > Lightning Component now give it a fun name. I named mine ShowToast_Flow.cmp. This component is going to have a controller, helper, and a design file so go ahead and open them up on the right side of your developer console.

This first one is the Component.

<aura:component implements="lightning:availableForFlowActions">
    <aura:attribute name="type" type="string" default="success" />
    <aura:attribute name="title" type="string" />
    <aura:attribute name="message" type="string" />    
    <aura:attribute name="key" type="string" default="" />
    <aura:attribute name="mode" type="string" default="dismissable" />
    <aura:attribute name="duration" type="string" default="10" />
    <aura:attribute name="urlLink" type="string" />
    <aura:attribute name="urlLabel" type="string" />

</aura:component>

Now you have the Controller.

({
	    invoke : function(component, event, helper) {


        var type = component.get("v.type").toLowerCase(); //force user entered attribute to all lowercase
        var title = component.get("v.title");
        var message = component.get("v.message");
        var duration = component.get("v.duration")+"000"; //convert duration value from seconds to milliseconds
        var mode = component.get("v.mode").toLowerCase(); //force user entered attribute to all lowercase
        var key = component.get("v.key").toLowerCase();   //force user entered attribute to all lowercase


        var isURL = message.toLowerCase().includes('{url}');  //Did the user include '{url}' in their message?


        if(!isURL){
            helper.showToast(type, title, message, duration, mode, key);
        }


        if(isURL){
          var messageUrl = message.replace('{url}', '{1}');
          var urlLink = component.get("v.urlLink")
          var urlLabel = component.get("v.urlLabel");
          //Add 'https://' to the URL if it is not already included
          if(urlLink.toLowerCase().indexOf('http') == -1){
              urlLink = 'https://' + urlLink;  
          }
          helper.showToastUrl(type, title, messageUrl, urlLink, urlLabel, duration, mode, key);
        }
        
    }
})

Next up, the Helper.

({
	  //Standard Show Toast Event
    showToast : function(type, title, message, duration, mode, key) {
        var toastEvent = $A.get("e.force:showToast");
        toastEvent.setParams({
            "title": title,
            "message": message,
            "type": type,
            "duration": duration,
            "mode": mode,
            "key": key
        });
        toastEvent.fire();
    },


    //Show Toast Event updated to include a message that contains a link
    showToastUrl : function(type, title, messageUrl, urlLink, urlLabel, duration, mode, key) {
        var toastEvent = $A.get("e.force:showToast");
        toastEvent.setParams({
            "title": title,
            "message": messageUrl,
            "messageTemplate": messageUrl,
            "messageTemplateData": ['Salesforce', {
                url: urlLink,
                label: urlLabel,
            }],
            "type": type,
            "duration": duration,
            "mode": mode,
            "key": key
        });
        toastEvent.fire();
    }
})

Lastly, the design file.

<design:component >
    <design:attribute name="type" label="Type (success, error, warning, info, other)" default="success" />
    <design:attribute name="title" label="Title" />
    <design:attribute name="message" label="Message" />
    <design:attribute name="key" label="Icon (only for Type=other)" />
    <design:attribute name="mode" label="Dismissal Mode (dismissible, pester, sticky)" default="dismissible" />
    <design:attribute name="duration" label="Duration in Seconds (minimum is 5, default is 10)" default="10" />
    <design:attribute name="urlLink" label="URL Link" />
<design:attribute name="urlLabel" label="URL Label" />
</design:component>

Now don't forget to save, otherwise, you will definitely run into problems. Hop back over to Setup and in the Quick Find box type "Flows" and click on Flows under Process Automation. Now I am assuming that you know how to create a flow or at least a basic screen flow. However, if you don't, that's 100% okay because at one point I didn't either. Pause here and head over to trailhead.salesforce.com and follow along there, once you have the flow built, come back and continue.

After the Create Records element that you have at the end of your flow or Update Records, either one works. Grab the "Actions" element and drag that over. Now type in the search of the Actions element the name of your class.

Make sure you add the Action at the end of the flow after the create or update elements.

Once you have the Action selected you should get a screen like this.

Don't get intimidated, I got you! You have multiple options here, the first few you can skip over. Click include on the Message section and this is where you will type the message of your toast. Where you want the link to the record you just created is where you'll add the {url}. Keep it all lowercase, it will error out if you have any capital letters in the message.

Next up, in the Title go crazy with capital letters this is what the above message and title look like printed out.

Two more elements and then you will be set. Click include on the URL Label and URL Link. In the label write whatever you want to display for the link. For example, if you are creating a new record you can put the record.name in the label.

Now, this is where we will add the link to the record. Click new resource in the URL box, well you don't have to do it in the URL Link box but you're already there so might as well. Choose Formula as your resource type, give it an API name, and select text as your data type.

In the Formula field use this formula:

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

Change the {recordId} to the recordId of the record you just created or updated and click done. Now save and debug to make sure the flow works and the toast prints out in the logs. Then go active it and either put it on a record page or put it in a button and test it out.

Follow me on Linkedin for more articles, fun tips, and tricks, or just to be one of my connections. If you enjoy Salesforce and self-improvement as much as I do, we'll be great connections.

About The Author:

Armaan Virani - Salesforce Functional Architect @ Sense Corp.

My story is a simple one. The one where I found enjoyment and a passion for creating solutions to show businesses how Salesforce can improve their lives and bring them bags of money and employee happiness on day one, primarily in the Service and Field Service industry. I hold 2 Salesforce certifications, one for Salesforce Certified Administrator and Salesforce Certified Service Cloud Consultant.

During the day you can find me working to comprehend my client's processes, challenges, and goals. I strive to paint them a picture of how Salesforce can be used to help them accomplish what they want in the way they want it. Helping them understand the magic that Salesforce can bring to their business. I also have a passion to help others grow, mentor, and teach them, give them opportunities to show their potential like I was once given.

Check out more @ https://www.armaansvirani.com

Sources: Eric Smith