+ Start a Discussion
MrunaliniMrunalini 

can we show toast messages on visual force pages using java-script ?

Ashif KhanAshif Khan
Hi Mrunalini,

In VF page to show the toast message you need to use custom toast based on slds
 
<apex:page >
    <apex:slds />
    <script>
    function toastLaunch(){
        var element = document.getElementById("ToastMessage");
        element.classList.toggle("slds-hidden");
    }
    </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 ">Account <a href="javascript:void(0);">ACME - 100</a> widgets was created.</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>

User-added image

I hope this will help you

Regards
Ashif 
MrunaliniMrunalini
Yes Thanks.
Ashif KhanAshif Khan
Hi Mrunalini,
if still facing any problem let us know or if it worked mark as solved.

Regards
Ashif
ethanoneethanone
Can an LWC on the VF page pass its toast event to the ToastMessage element? if so, how?