If you are a SharePoint user, you have likely seen this notification bar, which often appears directly below the global navigation by default. 

Using JavaScript, you can fire your own alerts without having to do any customizations to the SharePoint user interface (UI). This post will look at creating a list-driven notification system using the SharePoint notification bar. While the example is fairly small scaled, it can easily be modified and applied to a full site collection. In other words, no matter where a user is in your site collection, they will see the notification bar with your message. 

The JavaScript code below has different options for how the SharePoint list should be found. You can manually specify a URL, you can get the context of the current site dynamically, or you can place it at the site collection root, and get that value dynamically.

Before you can do anything with the script, you need to get your SharePoint list created. I created a custom list through the UI called Alerts with the column and data types shown below.

This is a screenshot of my list settings page:

For this example, I am just going to call my JavaScript file from one page via a Content Editor Web Part. You can easily add a call to this file from your master page to make it available across all your sites. First, I need to upload the JavaScript file to my site and copy the URL. Next, I’ll follow these steps to get the Content Editor Web Part to reference my file:

1. From the Site Actions menu, click Edit Page
2. Click Add a Web Part from any zone on your page, if you are using wiki pages, use the Web Part button from the Insert ribbon
3. From the Media and Content category, select Content Editor Web Part, then click Add
4. Hover over the web part title, click the drop-down arrow that appears and click Edit Web Part
5. In the tool pane that opens to the right of the page, paste the URL to the JavaScript file you uploaded into the Content Link box
   
    
6. Click OK
7. Click Save from the ribbon and publish your page to remove the checked out status message

Head to the Alerts list you created earlier and create a new item. Make sure that today’s date falls in between the Start Date and End Date you select, otherwise your alert won’t show. Here is what mine looks like:

Now, if you head back to the page where you added your Content Editor Web Part, you should see your message: 

Now I am going to paste the full JavaScript file below and talk you through some of what it is doing.

   1:  <script type="text/javascript">

   2:  //This function checks the date on the list item to make sure that it should be displayed today.

   3:  function dateCheck(STARTDATE, ENDDATE)

   4:  {

   5:      var fDate, lDate, cDate;

   6:      fDate = STARTDATE;

   7:      lDate = ENDDATE;

   8:      cDate = new Date();

   9:      if((cDate <= lDate && cDate >= fDate))

  10:      {

  11:          return true;

  12:      } else {

  13:          return false;

  14:      }

  15:  }

  16:   

  17:  //This function clears out all the existing status messages

  18:  var strStatusID;

  19:  function removeAllInfos()

  20:  {

  21:      SP.UI.Status.removeAllStatus(true);

  22:  }

  23:  //This function appends the status message to the page.  If you uncomment line 33, it will clear everything out first, then write a new status

  24:  function showInfo(STATUS, MESSAGE, COLOR, LINK)

  25:  {

  26:      var fontColor = ""

  27:      if(COLOR == "yellow")

  28:      {

  29:          fontColor="#000000"

  30:      } else {

  31:          fontColor="#ffffff"

  32:      }

  33:      //removeAllInfos();

  34:      strStatusID = SP.UI.Status.addStatus("<font color='" + fontColor + "'><b>" + STATUS + ": </b>", "<span></span>" + MESSAGE + " " + LINK + "</font>", true);

  35:      SP.UI.Status.setStatusPriColor(strStatusID, COLOR);

  36:  }

  37:  // Get the items from the Status list

  38:  function ViewItem() {

  39:      //There are 3 options when connecting to a list.  1. Specific relative URL 2. Current Site 3. Root web for the site collection

  40:      //OPTION 1: These lines set the web to be at a specific URL

  41:      //var context = new SP.ClientContext('/url/to/your/site/);

  42:      //var web = context.get_web();

  43:      //OPTION 2: These lines set the web to be at the current site (where the .js is called from)

  44:      var context = new SP.ClientContext.get_current();

  45:      var web = context.get_web();

  46:      //OPTION 3: These lines set the web to be at the site collection root.

  47:      //var context = new SP.ClientContext.get_current();

  48:      //var site = context.get_site();

  49:      //var web = site.get_rootWeb();

  50:      var list = web.get_lists().getByTitle('Alerts');

  51:      var query = SP.CamlQuery.createAllItemsQuery();

  52:      allItems = list.getItems(query);

  53:      context.load(allItems, 'Include(Title,Status,Color,Start_x0020_Date,End_x0020_Date,Link,Link_x0020_Display)');

  54:      context.executeQueryAsync(Function.createDelegate(this, this.viewSuccess), Function.createDelegate(this, this.failed));

  55:  }

  56:  //If it found an item, then validate the dates and call the function to write the status.

  57:  function viewSuccess() {

  58:      //var TextFiled = "";

  59:      var ListEnumerator = this.allItems.getEnumerator();

  60:      while (ListEnumerator.moveNext()) {

  61:          var currentItem = ListEnumerator.get_current();

  62:          var infoLink;

  63:          //Check to make sure it is a current item

  64:          if(dateCheck(currentItem.get_item('Start_x0020_Date'), currentItem.get_item('End_x0020_Date')))

  65:          {

  66:              //Call the ShowInfo function to set the information bar

  67:              if(currentItem.get_item('Link') && currentItem.get_item('Link_x0020_Display'))

  68:              {

  69:                  infoLink = "<a href='" + currentItem.get_item('Link') + "'>" + currentItem.get_item('Link_x0020_Display') + "</a>";

  70:              } else {

  71:                  infoLink = "";

  72:              }

  73:              showInfo(currentItem.get_item('Status'), currentItem.get_item('Title'), currentItem.get_item('Color'), infoLink);

  74:          }

  75:      }

  76:  }

  77:   

  78:  function failed(sender, args) {

  79:      //Do nothing and fail gracefully so the user isn't really impacted

  80:  }

  81:   

  82:  //Start everything up.  You have to do it on a delay because the necessary SharePoint files aren't loaded immediately.

  83:  ExecuteOrDelayUntilScriptLoaded(ViewItem, “sp.js”)

  84:   

  85:  </script>

Basically, this looks up the Alerts list, gets all the values in the list, filters out any events that don’t have today’s date in the date range and displays the notification bar with the status. In the current form above, the script will stack notifications on top of each other, so if there is more than one event that matches today, there will be multiple notifications shown. You can uncomment line 33 above and only the most recently added alert will display.

The ViewItem() function has 3 different ways that you can look up the Alerts list as discussed earlier in this post, so you can reference a list from multiple sites.

To find out more about our services and solutions, please fill out our Contact Us form.