Back in June, I wrote a post on how to create a site notification system on a SharePoint 2010 site.  I got a comment on that post asking if it would work with SharePoint 2013, so I thought I would update this with a new post on working with this in 2013.  I really didn’t have to change anything except the color that the text renders in the dialog message.  Everything else works as it did before.  Nice!

I am going to copy the full post here updated for 2013 just to keep everything together.

image

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.

Column Name

Data Type

Required

Status

Choice (Important, Critical, Warning, Normal). These can be whatever you want, they just get extra emphasis in the notification bar.

Yes

Message Text

Single line of text

Yes

Color

Choice (red, yellow, blue, green)
These are the only choices SharePoint makes available by default. These must be lowercase.

Yes

Start Date

Date and Time

Yes

End Date

Date and Time

Yes

Link

Single line of text

No

Link Display

Single line of text

No

This is a screenshot of my list settings page:

image

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
    image
  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:

image

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

image

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

   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:      
  10:      if((cDate <= lDate && cDate >= fDate)) 
  11:      {
  12:          return true;
  13:      } else {
  14:          return false;
  15:      }
  16:  }
  17:   
  18:  //This function clears out all the existing status messages
  19:  var strStatusID;
  20:  function removeAllInfos() 
  21:  {
  22:      SP.UI.Status.removeAllStatus(true);
  23:  }
  24:  //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
  25:  function showInfo(STATUS, MESSAGE, COLOR, LINK) 
  26:  {
  27:      //removeAllInfos();
  28:      strStatusID = SP.UI.Status.addStatus("<font color='#000000'><b>" + STATUS + ": </b>", "<span></span>" + MESSAGE + " " + LINK + "</font>", true);
  29:      SP.UI.Status.setStatusPriColor(strStatusID, COLOR);
  30:  }
  31:  // Get the items from the Status list
  32:  function ViewItem() {
  33:      //There are 3 options when connecting to a list.  1. Specific relative URL 2. Current Site 3. Root web for the site collection
  34:      
  35:      //OPTION 1: These lines set the web to be at a specific URL
  36:      //var context = new SP.ClientContext('http://path/to/your/site');
  37:      //var web = context.get_web();
  38:      
  39:      //OPTION 2: These lines set the web to be at the current site (where the .js is called from)
  40:      var context = new SP.ClientContext.get_current();
  41:      var web = context.get_web();
  42:      
  43:      //OPTION 3: These lines set the web to be at the site collection root.
  44:      //var context = new SP.ClientContext.get_current();
  45:      //var site = context.get_site();
  46:      //var web = site.get_rootWeb();
  47:      
  48:      var list = web.get_lists().getByTitle('Alerts');
  49:      var query = SP.CamlQuery.createAllItemsQuery();
  50:      allItems = list.getItems(query);
  51:      context.load(allItems, 'Include(Title,Status,Color,Start_x0020_Date,End_x0020_Date,Link,Link_x0020_Display)');
  52:      context.executeQueryAsync(Function.createDelegate(this, this.viewSuccess), Function.createDelegate(this, this.failed));
  53:  }
  54:  //If it found an item, then validate the dates and call the function to write the status.
  55:  function viewSuccess() {
  56:      //var TextFiled = "";
  57:      var ListEnumerator = this.allItems.getEnumerator();
  58:      while (ListEnumerator.moveNext()) {
  59:          var currentItem = ListEnumerator.get_current();
  60:          var infoLink;
  61:          //Check to make sure it is a current item
  62:          if(dateCheck(currentItem.get_item('Start_x0020_Date'), currentItem.get_item('End_x0020_Date')))
  63:          {
  64:              //Call the ShowInfo function to set the information bar
  65:              if(currentItem.get_item('Link') && currentItem.get_item('Link_x0020_Display'))
  66:              {
  67:                  infoLink = "<a href='" + currentItem.get_item('Link') + "'>" + currentItem.get_item('Link_x0020_Display') + "</a>";
  68:              } else {
  69:                  infoLink = "";
  70:              }
  71:              showInfo(currentItem.get_item('Status'), currentItem.get_item('Title'), currentItem.get_item('Color'), infoLink);
  72:          }
  73:      }
  74:  }
  75:   
  76:  function failed(sender, args) {
  77:      //Do nothing and fail gracefully so the user isn't really impacted
  78:  }
  79:   
  80:  //Start everything up.  You have to do it on a delay because the necessary SharePoint files aren't loaded immediately.
  81:  SP.SOD.executeFunc('sp.js', 'SP.ClientContext', ViewItem);
  82:  </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 27 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.

For more information on C5 Insight or this blog entry, please Contact Us.