function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Alessandro Patricelli 9Alessandro Patricelli 9 

showToast on VisualForce Page isnt working? Help

Hi All,
I am trying to make a VisualForce page that on Load it show a simple JS Toast..
But i am keeping getting the following error:

Uncaught ReferenceError: sforce is not defined
    at showToast

This is my Visual Force Page, what i am doing wrong?:

<apex:page standardController="Account" lightningStylesheets="true" >
    <script type="text/javascript">
        window.onload = showToast();
        function showToast() {
            sforce.one.showToast({
                "title": "Attenzione",
                "message": "Test Message.",
                "type": "warning"
            });
        }
        
    </script>
</apex:page>

Thanks for help :) really apprecciated.
Suraj Tripathi 47Suraj Tripathi 47
Hi,  Alessandro Patricelli 9

According to your solution, you can not use toast on the web page because it is standard toast. You can use this in your developer org. So you can show the toast. Otherwise, there is a second option to show the toast on the web page that is custom toast you have to make a custom toast to show Like this: 
<apex:page >
    <apex:slds />
    <script>
    function toastLaunch(){
        var element = document.getElementById("ToastMessage");
        element.classList.toggle("slds-hidden");
        setTimeout(function(){
            var elementRemover = document.getElementById("ToastMessage");
            elementRemover.remove();
        }, 3000);
        //
    }
    </script>
    <div class="demo-only slds-hidden" style="height: 4rem;" id='ToastMessage'>
        <div class="slds-notify_container slds-is-relative">
            <div class="slds-notify slds-notify_toast slds-theme_success" role="alert">
                <span class="slds-assistive-text">success</span>
                <span class="slds-icon_container slds-icon-utility-success slds-m-right_small slds-no-flex slds-align-top" title="Description of icon when needed">
                    <svg class="slds-icon slds-icon_small" aria-hidden="true">
                        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="{!URLFOR($Asset.SLDS, 'assets/icons/utility-sprite/svg/symbols.svg#success')}" />
                    </svg>
                </span>
                <div class="slds-notify__content">
                    <h2 class="slds-text-heading_small ">Toast Show</h2>
                </div>
                <button class="slds-button slds-button_icon slds-notify__close slds-button_icon-inverse" title="Close" onclick='toastLaunch()'>
                    <svg class="slds-button__icon slds-button__icon_large" aria-hidden="true">
                        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="{!URLFOR($Asset.SLDS, 'assets/icons/utility-sprite/svg/symbols.svg#close')}" />
                    </svg>
                    <span class="slds-assistive-text">Close</span>
                </button>
            </div>
        </div>
    </div>
    <button class="slds-button slds-button_brand" onclick='toastLaunch()'>
        Show Toast
    </button>
</apex:page>

Thank you!

Regards 
Suraj Tripathi