Show flash messages and notifications in SharePoint 2013

This SharePoint tutorial will discuss, how to show flash messages and notifications on the home page in SharePoint 2013 using JavaScript.

The flash message will be displayed in a different background color. And the notification will appear on the right side of the SharePoint page.

Show flash messages and notifications in SharePoint

SharePoint 2013 provides SP.UI.Status class to add a status message to the SharePoint page.

Below is the code to show a status message:

<script type="text/javascript">
var statusId = ' ';
ExecuteOrDelayUntilScriptLoaded(ShowStatusMessage, "sp.js");
function ShowStatusMessage()
{
this.statusId = SP.UI.Status.addStatus("NewsFlash", "This is is a testing site.");

SP.UI.Status.setStatusPriColor(this.statusId, "yellow");

}
</script>

It will appear like below:

Show flash messages in sharepoint 2013

Remove Status Message from SharePoint

The below code to remove status message:

<script type="text/javascript">
function RemoveStatus() {
SP.UI.Status.removeStatus(statusId);
statusId = ";
}
</script>

<input id="buttonRemoveStatus" type="button" value="Remove Status" onclick="RemoveStatus()" />

Show Notification Message:

<script type="text/javascript">
var notifyId = ";
function AddNotificationMessage() {
notifyId = SP.UI.Notify.addNotification("This is a notification", true);
}
</script>

<input id="btnNotificationMessage" type="button" value="Add Notification" onclick="AddNotificationMessage()" />

The notification will appear like below:

Show flash messages in sharepoint 2013 using javascript

Remove Notification Message:

<script type="text/javascript">
var notifyId = ";
function RemoveNotificationMessage() {
SP.UI.Notify.removeNotification(notifyId);
notifyId = ";
}
</script>

<input id="btnRemoveNotificationMessage" type="button" value="Remove Notification" onclick="RemoveNotificationMessage()" />

You may like following SharePoint tutorials:

This tutorial, we learned how to display flash messages and notifications in SharePoint 2013/2016 or SharePoint Online pages.

Donwload Hub site pdf

Download SharePoint Online Tutorial PDF FREE!

Get update on Webinars, video tutorials, training courses etc.

>