SharePoint "Alerts" Banners

This is a post on creating a SharePoint Alerts banner using a list and the SharePoint Status Bar function.
I had the hardest time finding info on this feature, so I am creating a mirror of this one from siVom on Reddit
https://www.reddit.com/r/sharepoint/comments/4o42hv/sharepoint_alerts_banners/ 

Someone had asked this in another thread but I posted too late so I figured I'd share with everyone else. If you've ever been looking to see how SharePoint surfaces those "alert" banners that you typically see in Central Admin when something goes bad, then this is the script you can use. This has worked in 2010/2013 for a few years and has been modified overtime.

Full disclosure: I am not the original author. Our team did add an option to activate/deactivate the alerts and updated the function processResult section so this works in Chrome/IE (again, not our code).

You basically just embed this code into the page you want alerts to appear on, modify the "YOURSITE" url to what your site is, modify the "YOURLISTNAME" to the list you create with the options below:

http://i.imgur.com/BPkXU0I.png

Options:

Title - Single Line of Text - Beginning part of message Color - Multiple Choice - Red, yellow, green blue Message - Multiple lines of text - Summary Active - Yes/No - Whether or not it displays

The end result is something like this that runs across your entire top banner:

http://i.imgur.com/3rEa8r9.png

​ This part keeps dropping off the code brackets for some reason but its all one big script:

<div class="ms-rtestate-read ms-rte-embedcode ms-rte-embedil ms-rtestate-notify s4-wpActive" contenteditable="false"> <script language="javascript" src="https://code.jquery.com/jquery-2.2.4.min.js"></script> <script type="text/javascript">

ExecuteOrDelayUntilScriptLoaded(statusinit, "sp.js");

$.fn.SPFilterNode = function(name) {
   return this.find('*').filter(function() {
       return this.nodeName === name;
  });
};

function statusinit() {

    var statusId = '';
    var notifyId = '';


    function AddStatus(title, message, color)
    {
            statusId = SP.UI.Status.addStatus(title, message, true);
            SP.UI.Status.setStatusPriColor(statusId, color);
    } 

        $(document).ready(function() {
            var soapEnv =
                "<soapenv:Envelope xmlns:soapenv='http://schemas.xmlsoap.org/soap/envelope/'> \
                    <soapenv:Body> \
                         <GetListItems xmlns='http://schemas.microsoft.com/sharepoint/soap/'> \
                            <listName>YOURLISTNAME</listName> \
                            <viewFields> \
                                <ViewFields> \
                                   <FieldRef Name='Title' /> \
                                   <FieldRef Name='Color' /> \
                                   <FieldRef Name='Message' /> \
                                  <FieldRef Name='Active' /> \
                               </ViewFields> \
                            </viewFields> \
                        </GetListItems> \
                    </soapenv:Body> \
                </soapenv:Envelope>";

            $.ajax({
                url: "https://www.YOURSITE.com/_vti_bin/lists.asmx",
                type: "POST",
                dataType: "xml",
                data: soapEnv,
                complete: processResult,
                contentType: "text/xml; charset=\"utf-8\""
            });
        });

        function processResult(xData, status) {
        $(xData.responseXML).SPFilterNode("z:row").each(function () {
            if ($(this).attr("ows_Active") == '1') {
                AddStatus($(this).attr('ows_Title')+":",$(this).attr('ows_Message'), $(this).attr('ows_Color'));
            }
    });

    }
}</script></div>

You can have multiple alerts, it just stacks them. The colors do not multiple though, whatever the most severe color enabled is the one that wins. (Eg. If you have 1 "red" alert, all alerts are now red)

Hope it helps someone.

To add onto this article, in SharePoint 2016 I had to add in this CSS to get the bar to load at the top of the page

#contentRow > #contentBox > #DeltaPageStatusBar > #pageStatusBar{
position:absolute;
top:-60px;
left:-10px;
width:99.89%;
}

Share on Google Plus

About Tom DeMeulenaere

Highly accomplished information technology professional with extensive knowledge in System Center Configuration Manager, Windows Server, SharePoint, and Office 365.