Display custom alert message in SharePoint using REST API

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.

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.

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.

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

The alert message should show like below image

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

The alert message should show like below image.

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:

• Create a Custom People Directory using REST API in SharePoint
• Retrieve and Display TASK status using REST API in SharePoint
• Display SharePoint list data in jQuery data table using Rest API
• Create Highcharts in SharePoint using Rest API
• Create SharePoint Quote of the day web part using Rest API and Bootstrap
• Google Pie Chart in SharePoint Online (Step by Step tutorial)
• SharePoint 2013 Add Top Navigation Link to a Site Using REST API
• Send Email with jQuery and REST API in SharePoint
• KnockoutJS SharePoint 2013 CRUD Operations using REST API

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.