Lightning Component For Notification

Lightning Feb 15, 2017

A custom notification component that can be used as generic notification for your application. It is a simple plug and play. Some of features are:

  1. It has major two notification types: bar, Popup
  2. It handles all types of information notificatons: 'error, warning, success, info'
  3. It has ability to get redirected to another page in case of any confirm action.

Screenshots

Alert

Popup

Parameters available

Attribute Required? Description
type Yes Type of notification - Default,Success,Warning,Offline,Error
message Yes The message to be shown
show Yes Set this to hide / show message
notificaionType Optional type of notification to be shown i.e bar,popup. Default is bar.
popupheader Optional The header to be shown for popup notification
redirectUri Optional Url on which to be redirected once 'OK' button is clicked for popup notification.

Special methods

There are two methods that can be used within the lightining component's JS controllers to display these notifications directly.

  1. setNotification - for bar type
  2. setPopup - for popup type

Parameters to be used in different scenarios

Alert bar
<c:Notification aura:id="notifyAlert" show="true" type="error" message="This is a sample alert error" />
Popup bar
<c:Notification aura:id="notifyPopup" show="true" type="Warning" message="Are you sure you want to redirect?" popupheader="Confirm" redirectUri="https://google.com"/>
Calling through lightning's JS Controller
<!-- html's code -->
<c:Notification show="false" type="" message="" aura:id="notifyComp" />

<!-- controller's code -->
<!-- set alert-->
displayNotification : function(component, msg, type){
    component.find("notifyComp").setNotification(true ,type ,msg ,"forever");
}

<-- set popup-->
displayPopup : function(component, type , header, message){
    component.get("notifyComp").setPopup(true, type, header, message);
}

To download all its code, you can also download/deploy directly from here.

Hope this helps. Happy coding!

Lightning Utilities - Salesforce

Lightning Component For Lookup - LookupSobject

Lightning Component For Spinner

Related Tags:

Lightning   Utilities   Salesforce   Component