Follow Us:
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.
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.
Kyle, I really like the idea you have written about here and I have given it a try but to no avail! I am using SharePoint Server 2010. I cannot get the status messages to display. For awhile I was getting error: SCRIPT5009: 'sp' is undefined (Found the error using IE developer tools -- F12 ) When I went to the line where the script is loaded I see: ExecuteOrDelayUntilScriptLoaded(ViewItem, ?sp.js?) Once I changed "sp.js" to 'sp.js' --- no more errors but still no message on the status line. I have verified that the date in the Alerts list is today and I have tried the code using all three OPTIONS in the code. Nothing... Any ideas?
Kyle, I found the answer to my problem ... I had forgotten that I had added an s4-statusbarcontainer statement in my CSS that turned messages off. All messages now work! Thanks!
How would you use a list that requires content approval? That is, only showing items that have been approved?
This is the code I'm using with SP 2007 CEWP but cannot get it to work. Please review and let me know the error of my ways //This function checks the date on the list item to make sure that it should be displayed today. function dateCheck(STARTDATE, ENDDATE) { var fDate, lDate, cDate; fDate = STARTDATE; lDate = ENDDATE; cDate = new Date(); if((cDate = fDate)) { return true; } else { return false; } } //This function clears out all the existing status messages var strStatusID; function removeAllInfos() { SP.UI.Status.removeAllStatus(true); } //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 function showInfo(STATUS, MESSAGE, COLOR, LINK) { var fontColor = "" if(COLOR == "yellow") { fontColor="#000000" } else { fontColor="#ffffff" } //removeAllInfos(); strStatusID = SP.UI.Status.addStatus("" + STATUS + ":", "" + MESSAGE + " " + LINK + "", true); SP.UI.Status.setStatusPriColor(strStatusID, COLOR); } function ViewItem() { var context = new SP.ClientContext.get_current('http://procurementportal.jnj.com/Resource/technology/EAS/'); var site = context.get_site(); var web = site.get_rootWeb(); var list = web.get_lists().getByTitle('Alerts'); var query = SP.CamlQuery.createAllItemsQuery(); allItems = list.getItems(query); context.load(allItems, 'Include(Title,Status,Color,Start_x0020_Date,End_x0020_Date,Link,Link_x0020_Display)'); context.executeQueryAsync(Function.createDelegate(this, this.viewSuccess), Function.createDelegate(this, this.failed)); } function viewSuccess() { //var TextFiled = ""; var ListEnumerator = this.allItems.getEnumerator(); while (ListEnumerator.moveNext()) { var currentItem = ListEnumerator.get_current(); var infoLink; //Check to make sure it is a current item if(dateCheck(currentItem.get_item('Start_x0020_Date'), currentItem.get_item('End_x0020_Date'))) { //Call the ShowInfo function to set the information bar if(currentItem.get_item('Link') && currentItem.get_item('Link_x0020_Display')) { infoLink = "" + currentItem.get_item('Link_x0020_Display') + ""; } else { infoLink = ""; } showInfo(currentItem.get_item('Status'), currentItem.get_item('Title'), currentItem.get_item('Color'), infoLink); } } } function failed(sender, args) { //Do nothing and fail gracefully so the user isn't really impacted } //Start everything up. You have to do it on a delay because the necessary SharePoint files aren't loaded immediately. ExecuteOrDelayUntilScriptLoaded(ViewItem, “sp.js”)
Trackback from C5 Insight Blogs - Microsoft SharePoint, Dynamics CRM and Salesforce.com Using JavaScript, you can fire your own alerts without having to do any customizations to the SharePoint 2013 user interface (UI). This post will look at creating a list-driven notification system using the SharePoint 2013 notification bar. ...
@Joe, sorry, this doesn't work in 2007. The underlying JavaScript and display methods didn't exist there. @Staci, can you be more specific? I'd be happy to help you get this going.
Any idea if this works in SharePoint 2013? Any chance you can provide a txt file with the javascript? Or make it easier to copy the javascript. Thanks.
Angela, sorry I missed your comment here. Yes, this should work on a 2013 site. I will see about updating it and creating a new post. If you want to send me your email address at kyle.wright@c5insight.com I'll send you the JavaScript in a better format if you would like. Sorry, our blog platform doesn't handle code too well.
I'm not able to get this to work. :(
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.