Hello friends, In this post we will see a code example that helps you to show toast messages on the visualforce page. As we all know we can show messages on visualforce pages by using apex:pageMessage component but by using toast alerts we can give a boost in case of look and feel to our visualforce page.

Show toast messages in visualforce page

In spring 19 release salesforce introduces the sforce.one.showToast({toastParams}) function in sforce.one object to show toast messages in visualforce page, by using the function you can show different severities like success, error, info, warning.

Note: The feature is limited to Lightning Experience, Lightning communities, and all versions of the mobile app. It will not work in salesforce classic.

Before implementing this feature we all have to make sure that our visuaforce page setting Available for Lightning Experience, Experience Builder sites, and the mobile app should be mark checked. Like I did, please check the below screenshot,


Code Example:

 <apex:page lightningStylesheets="true">
    <script>
    function ShowSuccessToast() {
        sforce.one.showToast({
            "title": "Success!",
            "message": "Hello..! I am Success toast.",
            "type": "success"
        });
    }
    
    function ShowErrorToast() {
        sforce.one.showToast({
            "title": "Error!",
            "message": "Hello..! I am Error toast.",
            "type": "error"
        });
    }
    
    function ShowInfoToast() {
        sforce.one.showToast({
            "title": "Info!",
            "message": "Hello..! I am Info toast.",
            "type": "info"
        });
    }
    
    function ShowWarningToast() {
        sforce.one.showToast({
            "title": "Warning!",
            "message": "Hello..! I am warning toast.",
            "type": "warning"
        });
    }
    </script>
    <apex:form >
        <apex:page >
            <apex:commandButton value="Success Toast" onclick="ShowSuccessToast();" /><br/><br/>
            <apex:commandButton value="Error Toast" onclick="ShowErrorToast();" /><br/><br/>
            <apex:commandButton value="Info Toast" onclick="ShowInfoToast();" /><br/><br/>
            <apex:commandButton value="Warning Toast" onclick="ShowWarningToast();" />
        </apex:page>
    </apex:form>
 </apex:page>
After creating visualforce page with above provided sample code please add the visualforce page in any record detail page or home page in lightning experience with the help of lightning app builder.

Now you can click on the any button and see the output. Cheers..!!

Output:


Hope you like this post, for any feedback or suggestions please feel free to comment. I would appreciate your feedback and suggestions.
Thank you.