Any help on how to create an toast message alert on my visualforce page

<apex:page controller="MycustomSettingController" lightningStyleSheets="true" >
<apex:slds />
<div class="slds-scope">
    <div class="myapp">     
        <div class="slds-grid slds-wrap">
            <div id="divMainContainer" style="display:flex" class="slds-col slds-size--4-of-4" >
                <div  class="slds-box slds-box_xx-small slds-text-align_center slds-m-around--xx-Large">
                    <apex:form >
                        <div class="slds-box slds-box_x-small slds-text-align_center slds-m-around_x-small">Org Information</div>                                               
                        <apex:pageBlock >
                            Client ID: <br/><apex:inputField value="{!orgInfo.Client_ID__c}" required="true"/><br/>
                            Client Secret: <br/><apex:inputField value="{!orgInfo.Client_Secret__c}" required="true"/><br/>
                            Username: <br/><apex:inputField value="{!orgInfo.Username__c}" required="true"/><br/>
                            Password: <br/><apex:inputField value="{!orgInfo.Password__c}" required="true"/><br/> <br/>
                            Sandbox? <apex:inputCheckbox value="{!orgInfo.Sandbox__c}"/><br/><br/>
                            <apex:commandButton styleClass="slslds-button slds-button_success" action="{!save}" value="Save"/>


You can use below code to show Toast Message in VF Page.

<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="http://www.w3.org/1999/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="http://www.w3.org/1999/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

If you want to use in Lightning,use $A.get("e.force:showToast")

  • Hi, I am new to SLDS. Could you please specify where exactly do you use $A.get("e.force:showToast"). I really need to show a message into my SLDS VF page, and I think this is my missing piece. Thanks – Ivo Dimov Nov 13 '18 at 15:21
  • $A.get("e.force:showToast") is for Lightning Components not for Visualforce Page.For VF Page use the above code. – Gourishankar Nov 14 '18 at 8:02

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.