Tuesday, December 17, 2019

LWC Toast Messages in Classic Environment Using Lightning Out

Usually we will use Lightning Out feature to use the any lightning components to worked/used in classic environment .Basically we will be embedding our lightning components inside the visual force page to use them in Classic environment.

If your using LWC Lightning Out feature and if you want to show the any notifications similar to apexpagemessages in visual force pages we will be using the toast messages in lightning environment.But unfortunately the toast messages will not work in classic environments.

To overcome this issue I have built a generic component with help of slds styles to bring the same style of toast messages so that we can use this component in classic as well.

genericToastMessages.html


<template>
    <template if:true={showAnyMsg}>
        <div class={notifcationThemeClass} role="alert">
            <span class="slds-assistive-text">{notificationtype}</span>
            <span class={notifcationContainerClass} title="Description of icon when needed">
                <svg class="slds-icon slds-icon_x-large" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
                    <use xlink:href={iconClass}></use>
                </svg>
            </span>
            <h2>{notificationmessage}</h2>
          
        </div>
    </template>
</template>

genericToastMessages.js


/* eslint-disable no-console */
/* eslint-disable no-unused-vars */
/* eslint-disable no-else-return */

import { LightningElement,api, track } from 'lwc';
export default class GenericToastMessages extends LightningElement {
    @api notificationtype; //='success';
    @api notificationmessage;//='All working!';
   
   get showAnyMsg()
   {
        if (this.notificationtype !== undefined && this.notificationmessage !== undefined)
            return true;
       else return false;
   }

   get notifcationThemeClass() {
     return (
            "slds-notify slds-notify_alert slds-theme_alert-texture slds-theme_" +this.notificationtype
        );
    }

    get notifcationContainerClass() {
       return (
            "slds-icon_container slds-icon-utility-" +this.notificationtype +" slds-m-right_x-small"
        );
    }

    get iconClass() {
        return (
            "/apexpages/slds/latest/assets/icons/utility-sprite/svg/symbols.svg#" + this.notificationtype
        );
    }
}

This component mainly takes 2 params as an input or attributes those are

  • notificationtype - success/error/warning/info
  • notificationmessage - Any message you want to show to user

How to call this component from other components

Just include the below 2 lines in your component where you want show notification


 <template if:true={showErrMsg} >
<c-generic-toast-messages notificationtype="error/success"
 notificationmessage="All Records Updated successfully">
</c-generic-toast-messages>
        <div class="slds-m-bottom_x-small"></div>
</template>


Other way of doing is passing the type and messages dynamically even in your parent component.You can even find example in the post How To Select And Update Multiple Records Using LWC


 <template if:true={showErrMsg} >
<c-generic-toast-messages notificationtype={notifType} 
notificationmessage={notifMsg}>
</c-generic-toast-messages>
        <div class="slds-m-bottom_x-small"></div>
</template>


In the above code {notifTpe} and {notifMsg} are the parent component js controller variables where I'm setting the value basis on the server response.





Hope this helps you..Enjoy..!


No comments: