Display custom alert message in SharePoint using REST API

Display custom alert message in sharepoint using rest api
SharePoint deveopment training course

This SharePoint tutorial explains how to display a custom alert message in SharePoint page using REST API and bootstrap. The same code will work in SharePoint Online and SharePoint 2019/2016/2013.

Display custom alert message in SharePoint using REST API

Here I have created a SharePoint list to keep the alert and set the duration of the alert which will be shown on the page.

Steps for creating a custom alert in SharePoint

Step 1: Login to the SharePoint site and create a custom list as below screenshot.

display custom alert message in SharePoint using REST API
display custom alert message in SharePoint using REST API
display custom alert message in SharePoint using REST API and jquery
display custom alert message in SharePoint using REST API and jquery

Step 2: In the Level column, I have added some option for alert color so you can change the alert settings based on your requirement.

Suppose your alert comes under a WARNING then you can choose Red(Important), If your alert comes under Notification then you can choose Yellow(Notification) like this.

display custom alert message in SharePoint Online
display custom alert message in SharePoint Online

Step 3: Next create a page and add a script editor web part in your page and add the below code.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>

<script src="https://pikasha12.sharepoint.com/sites/DLH/_layouts/15/SP.Runtime.js" type="text/javascript">

<script src="https://pikasha12.sharepoint.com/sites/DLH/_layouts/15/SP.js" type="text/javascript">

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<script>
var CustomAlertLabel = CustomAlertLabel || {};
  
 CustomAlertLabel.MyMessage = (function () {
     return {
         init: init
     };
     function init() {
           SP.SOD.executeFunc('sp.js', 'SP.ClientContext', generateLinks);
                  
         function generateLinks() {   
             //List name where we saved the message and other properties
             var announcementList = 'CustomAlert';
             var siteAbsoluteUrl = _spPageContextInfo.siteAbsoluteUrl;    
             //Get current date with 00:00:00 as time 
             //so that the message will be displayed even if the End Date is Today                
             var today = new Date();   
             var d = today.toISOString().substring(0,10) + "T00:00:00";
                         
             var endpoint = siteAbsoluteUrl + "/_api/web/lists/GetByTitle('" + announcementList + "')/items?$filter=Start_x0020_Date le datetime'" + d + "' and End_x0020_Date ge datetime'" + d + "'";
             //AJAX call to get List Items and filter applied in URL
             $.ajax({
                 url: endpoint,
                 type: "GET",
                 dataType: "json",
                 beforeSend: function (xhr) {
                     xhr.setRequestHeader("accept", "application/json; odata=verbose");
                 }
                 }).then(function (data) {
                     var results = data.d.results;               
                     for (var i = 0; i < results.length; ++i) {   
                       var messageContent = results[i].Body; 
                       var status = results[i].Level;
                        
                       var newDiv = "";
                       //applying css based on the Level of message
                       if(status.match("^Red")) {
                         newDiv = "<div id=messageDiv"+ i +" class='alert-scroll alert-danger'><marquee direction='right'>";
                       }
                       else if(status.match("^Yellow")) {
                         newDiv = "<div id=messageDiv"+ i +" class='alert-scroll alert-warning'><marquee direction='right'>";       
                       }
                       else if(status.match("^Green")){
                         newDiv = "<div id=messageDiv"+ i +" class='alert-scroll alert-success'><marquee direction='right'>";       
                       }
                       else {
                         newDiv = "<div id=messageDiv"+ i +" class='alert-scroll alert-info'><marquee direction='right'>";           
                       }
                          
                         $("#mymessage").append(newDiv + messageContent + '</marquee></div>');  
                         $('.breadcrumb').hide();
                       var disappearTime = results[i].SecondsToDisappear;
                       //Disappear the message based on number of seconds
                       if(disappearTime != null && disappearTime != 0) {
                         disappearTime = disappearTime*1000;
                         $('#messageDiv'+i).delay(disappearTime).fadeOut('slow');                          
                       }
                     }                   
                 });
             }    
         }
 }) ();

     $.ready(CustomAlertLabel.MyMessage.init());
     </script>
 
<style>
    .alert-scroll p {
    display: block!important;
    width: 25%!important;
    margin: 0px!important;
    color: white!important;
}
    .alert-scroll {
    border-radius: 7px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    }

</style>

<div id="mymessage">

</div>

Step 4: Once you click on Save button, You can able to see the alert in top of your page with different color which you have set in your list.

display custom alert message using rest api in SharePoint Online
display custom alert message using rest api in SharePoint Online

Step 5: Suppose I have set Green color as per the below screenshot then

display custom alert message using rest api in SharePoint 2013
display custom alert message using rest api in SharePoint 2013

The alert message should show like below image

display custom alert message using rest api in SharePoint 2016
display custom alert message using rest api in SharePoint 2016

Step 6: Suppose I have set Yellow color as per the below screenshot then

display custom alert message using rest api in SharePoint 2019
display custom alert message using rest api in SharePoint 2019

The alert message should show like below image.

display custom alert message using rest api in SharePoint online
display custom alert message using rest api in SharePoint online

Note: Make sure you have set the time limit of the alert so once it crossed the time , it will automatically disappear from page.

Here I have used this code in a separate page but this alert should be present inside your master page.

Congratulations!! 🎉👏

We have reached the end of our journey. I hope you enjoyed learning with me and now feel confident to continue on to your next adventure.

You may also like following SharePoint Rest API tutorials:

But it doesn’t have to end here. My next article will focus on helping you get started with the very exciting custom Web Parts in SharePoint 2013/2016/2019 and SharePoint online.

To get a notification when my next article is out, you can follow enjoysharepoint on Facebook and follow us on Twitter.

It was a pleasure to be on this journey with you.

Check out Best Alternative to InfoPath -> Try Now

free sharepoint training

SharePoint Online FREE Training

JOIN a FREE SharePoint Video Course (3 Part Video Series)

envelope
envelope

About Rajkiran Swain

Rajkiran is currently working as a SharePoint Consultant in QATAR . Rajkiran having 6 + years of experience in Microsoft Technologies such as SharePoint 2019/2016/2013/2010, MOSS 2007,WSS 3.0, Migration, Asp.Net, C#.Net, Sql Server, Ajax, jQuery etc.He is C#Corner MVP (2 Times).

View all posts by Rajkiran Swain →