Lightning Component For Notification

Lightning Component For Notification

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 install Lightning Utilities unmanaged package or you can also download it from Lightning-Utilities github repo.

Hope this helps. Happy coding!

Lightning Utilities - Salesforce

Lightning Component For Lookup - LookupSobject

Lightning Component For Spinner

Lakshay Katney Avatar

Lakshay Katney

Saleforce developer by profession but I like to work with various technologies.I blog about Force.com, Hybrid Apps, PhoneGap, AngularJS, BackboneJS, JavaScript in general. I am Angular & NodeJS fan.

Read More
Share this page
Top 15 Posts