How to use Lightning Toast in Visual force Page

As of now while including the lightning components in vf page some standard functionalities doesn't work.
One among them is Toast functionality . There is a workaround to use Toast in VF pages

Below are steps, Create new lightning component

1. Create Lightning Component VFToast.cmp

<aura:component >
    <aura:attribute name="toastmsg" type="String" default=""/>
    <aura:attribute name="toastType" type="String" default=""/>
    <aura:attribute name="toastcss" type="String" default=""/>
   <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
    <div class="slds-notify_container slds-is-relative" id="toastCmp">
        <div  class="{!v.toastcss}" role="alert">
            <div class="slds-notify__content">
                <h2 class="slds-text-heading_small ">{!v.toastmsg}</h2>
            </div>
            <button class="slds-button slds-button_icon slds-notify__close slds-button_icon-inverse" title="Close" >
                <span onclick="{!c.closeIcon}">X</span>
                <span class="slds-assistive-text">Close</span>
            </button>
        </div>
    </div>
</aura:component>

2. VFToastController.js

({
    doInit : function(component, event, helper) {
        console.log('Oops , i m still in doInit ');
        var toast = component.get("v.toastType"); 
        console.log(toast);
        if(toast == 'error'){
           component.set("v.toastcss",'slds-notify slds-notify_toast slds-theme_error');
        }
        else if(toast == 'success'){
            component.set("v.toastcss",'slds-notify slds-notify_toast slds-theme_success');
        }
        else if(toast == 'warning'){
            component.set("v.toastcss",'slds-notify slds-notify_toast slds-theme_warning');
        }
},
closeIcon : function(component, event, helper) {
        console.log('Oops , i m still alive :O ');
        if(document.getElementById("toastCmp"))
            document.getElementById("toastCmp").style.display = "none";
}
})


Call the above component according to uses

For showing Error Message

<c:VFToast toastmsg="{!v.FileErrorMessage}" toastType="error"/>

  For showing Success Message

 <c:VFToast  toastmsg="{!v.Successmsg}" toastType="success"/>

For showing Warning Message

 <c:VFToast  toastmsg="{!v.Successmsg}" toastType="warning"/>

Comments

Post a Comment

Popular posts from this blog

Lightning Data Service