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:
- It has major two notification types: bar, Popup
- It handles all types of information notificatons: 'error, warning, success, info'
- It has ability to get redirected to another page in case of any confirm action.
Screenshots
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.
- setNotification - for bar type
- 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!
Related Articles
Lightning Utilities - Salesforce