function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion

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 />
    function toastLaunch(){
        var element = document.getElementById("ToastMessage");
    <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="" xlink:href="{!URLFOR($Asset.SLDS, 'assets/icons/utility-sprite/svg/symbols.svg#success')}" />
                <div class="slds-notify__content">
                    <h2 class="slds-text-heading_small ">Account <a href="javascript:void(0);">ACME - 100</a> widgets was created.</h2>
                <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="" xlink:href="{!URLFOR($Asset.SLDS, 'assets/icons/utility-sprite/svg/symbols.svg#close')}" />
                    <span class="slds-assistive-text">Close</span>
    <button class="slds-button slds-button_brand" onclick='toastLaunch()'>
        Show Toast

User-added image

I hope this will help you

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

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