Follow Us:
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.
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
Color
Choice (red, yellow, blue, green) These are the only choices SharePoint makes available by default. These must be lowercase.
Start Date
Date and Time
End Date
Link
No
Link Display
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:
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. 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.
The complementary paper includes over 12 years of research, recent survey results, and CRM turnaround success stories.
Request Download
This 60-second assessment is designed to evaluate your organization's collaboration readiness.
Learn how you rank compared to organizations typically in years 1 to 5 of implementation - and which areas to focus on to improve.
This is a sandbox solution which can be activated per site collection to allow you to easily collect feedback from users into a custom Feedback list.
Whether you are upgrading to SharePoint Online, 2010, 2013 or the latest 2016, this checklist contains everything you need to know for a successful transition.