Salesforce Lightning Custom Notification Style

#Salesforce #Lightning #Notification #SLDS

As a Salesforce Lightning Developer, many times you need to create custom notifications, below are some generic notification style with sample code which you can use in the custom lightning component.

Alert Notification

Usage — Can be used to display the notification on Component Page as an inline message.

Success

Preview

Sample Code

<div class=”slds-notify slds-notify_alert slds-theme_alert-texture slds-theme_success” role=”alert”>

<span class=”slds-icon_container slds-m-right_x-small” title=”Success Sample Notification”>

<lightning:icon iconName=”utility:success” alternativeText=”info” size=”x-small” variant=”inverse”/>

</span>

<h2>Success Sample Notification, Success Sample Notification</h2>

</div>

Error

Preview

Sample Code

<div class=”slds-notify slds-notify_alert slds-theme_alert-texture slds-theme_error” role=”alert”>

<span class=”slds-icon_container slds-m-right_x-small” title=”Description of icon when needed”>

<lightning:icon iconName=”utility:clear” alternativeText=”info” size=”x-small” variant=”inverse”/>

</span>

<h2>Failure Sample Notification, Failure Sample Notification</h2>

</div>

Warning

Preview

Sample Code

<div class=”slds-notify slds-notify_alert slds-theme_alert-texture slds-theme_warning” role=”alert”>

<span class=”slds-icon_container slds-m-right_x-small” title=”Description of icon when needed”>

<lightning:icon iconName=”utility:warning” alternativeText=”Warning” size=”x-small” variant=”inverse”/>

</span>

<h2>Warning Sample Notification, Warning Sample Notification</h2>

</div>

Information

Preview

Sample Code

<div class=”slds-notify slds-notify_alert slds-theme_alert-texture slds-theme_info” role=”alert”>

<span class=”slds-icon_container slds-m-right_x-small” title=”Description of icon when needed”>

<lightning:icon iconName=”utility:info” alternativeText=”info” size=”x-small” variant=”inverse”/>

</span>

<h2>Information Sample Notification, Information Sample Notification</h2>

</div>

Toast Notification

Usage — Can be used to display Notification on User action at Database level

Generic helper.js method

showToast : function(component, title, type, message) {

var toastEvent = $A.get(“e.force:showToast”);

toastEvent.setParams({

“title”: title,

“type” : type,

“message”: message,

“mode”: “dismissible”

});

toastEvent.fire();

},

Success

Preview

Controller.js Code

helper.showToast(component, ‘Success’, ‘success’, ‘Success Toast Notification.’);

Error

Preview

Controller.js Code

helper.showToast(component, ‘Error’, ‘error’, ‘Failure Toast Notification.’);

Warning

Preview

Controller.js Code

helper.showToast(component, ‘Warning’, ‘warning’, ‘Warning Toast Notification.’);

Info

Preview

Controller.js Code

helper.showToast(component, ‘Information’, ‘info’, ‘Info Toast Notification.’);

Hope this will help you!

Say Hello To Me On: Twitter | Facebook | Linkedin | MyBlog | Blogger

#HappyLearning #Lightning #Salesforceguy

--

--

Salesforce Evangelist || Blockchain Enthusiast || Architect || Trainer || Blogger || Believes in turning Ideas to reality || Day Dreamer || Happy Person

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Swayam Chouksey

Salesforce Evangelist || Blockchain Enthusiast || Architect || Trainer || Blogger || Believes in turning Ideas to reality || Day Dreamer || Happy Person