SharePoint Notifications Facebook / Google style

A few weeks ago, a client of mine wanted a way of notifying intranet users of new functionality. Now of course you can show some sort of message in the middle of the intranet homepage, but we wanted something more like a ‘Facebook / Google’ experience.

If there is a new piece of functionality, the visitor should get a nice looking notification at the top of the screen, even if he’s not on the homepage.

So, how to go about this? I wanted the administrator to have several options:

  • He should be able to show a notification one time only or multiple times.
  • The notification should have a:
    • ‘Close’ button if it’s a one time only notification
    • ‘Remind me later’ button for recurring notifications
    • ‘Go to’ button which will take the visitor to a specified URL

We start off with the creation of a Notifications list which will enable the administrator to add notifications in a simple way.

Please note that I wrote this functionality for SharePoint 2010 but I’m sure it will work in SharePoint 2013 as well…

Notifications list

The Notifications list has the following columns:

  • Notification
    This text will be shown to the visitor. It a ‘Multiple lines of text’ column, Rich HTML, so the administrator has some options like bold and italic.
  • From
    The From date makes sure the notification is not shown ahead of time.
  • Until
    The Until date is there for the ’freshness’ of the notification. You don’t want to show the notification “We’ve got a new feature in 2006!” shown to a new employee who just logs on to the intranet for the first time.
    Of course, you can set the Until date to e.g. 2033, which makes sure every visitor will get this notification, regardless of time.
  • Target
    The URL of this hyperlink column will be shown in the notification as button. The description will be rendered as the text of the button.
  • Recurrence
    This integer column determines the number of times the notification is shown if the visitor clicks the ‘Remind me later’ button. (minimum is 1).
  • RecurrenceInterval
    When the visitor clicks the ‘Remind me later’ button, the notification is shown again (as reminder) after a couple of days, the recurrence interval. RecurrenceInterval specifies this interval in days.
  • Priority
    Determines the priority in which notifications are shown to the visitor.
    (Actually, it determines the sorting of notifications)

Checking for notifications

We want the notifications to be displayed, regardless of what intranet page the visitor hits. So, the masterpage of the intranet has a script reference to a JavaScript file: Notifications.js which contains all functionality. This way, notifications can be displayed on every page.

(Of course, if you only want notifications on the homepage of your intranet, you could include the script on the homepage only, e.g. by a Content Editor web part)

We want to show one notification per day. If there are multiple notifications for the visitor, notification 2, 3, etc. are displayed over the next few days, one per day.
Through JavaScript, we check if there are new notifications in the Notifications list once a day. When the check for notifications is done, a cookie is created with a lifespan of the remainder of the day. If the cookie exists, we don’t check for notifications anymore. This way, we don’t get a query on the Notifications list on every page. The cookie itself doesn’t contain any relevant value, it’s just a token.

I do the query on the Notifications list with CSOM and a CAML query so I can filter on date AND time.

<View><Query><Where><And>
<Leq><FieldRef Name='From' />
<Value Type='DateTime' IncludeTimeValue='TRUE'>2013-10-13T10:30:00</Value>
</Leq>
<Geq><FieldRef Name='Until' />
<Value Type='DateTime' IncludeTimeValue='TRUE'>2013-10-13T10:30:00</Value>
</Geq>
</And></Where>
<OrderBy><FieldRef Name='Priority'/></OrderBy>
</Query></View>

You can use the REST API but then you will not have the option of filtering on the time part of the date. The REST API in SharePoint 2010 can only filter on dates so a notification will always start to shown right after midnight.

If Recurrence > 1 ánd a Target is set, the notification will have two buttons:  “Remind me later” and the link button with URL and Description.
If a Target is not set, only the button “Close this message” will be shown. The value of Recurrence is ignored in this case and the message is shown only once.

When the visitor clicks ‘Remind me later’, the date when the notification was shown, a display counter and notification id are stores in the visitors SharePoint Profile. This will allow for the administrator to change the RecurrenceInterval if he decides the notification should be shown again sooner. The display counter will track the number of times the notification is shown. When the display counter reaches the Recurrence value, the notification is no longer displayed.

When the visitor clicks the link button, the date when the notification was shown and notification id are stores in the visitors SharePoint Profile, same as ‘Remind me later’. But the display counter is set to the Recurrence value. This will make sure the notification is not displayed anymore.

User profile

I’ve added a field to the user profile in SharePoint: Notifications. This field will contain an array of notifications: {id, date, display counter}.  Every time the visitor has seen a notification, this is registered in the user profile.

To register the values in the user profile, I wrote a WCF service that I can use with JavaScript to store values in the user profile. This way, if the visitor logs on with another device, we still know what notifications he has already seen.

I added some code that cleans up the array. When it detects that a certain notification is not retrieved anymore through the CSOM query, it will clean up the array by deleting the entry. This way, the array with notifications will not grow indefinite.

User Profile Notifications

To prevent a call to the User Profile service every time we need to check if the user has seen a notification already, we add that value to every page through the masterpage:

<script type="text/javascript">
var _fV4UI = true;
var userNotifications =
  '<SPSWC:ProfilePropertyValue ShowPrivate="True" TitleMode="True"
  PropertyName="Notifications" ApplyFormatting="false"
  id="Notifications" runat="server"/>';
</script>

This will insert the array in the user profile Notifications field in every page without performance loss. And now I can easily pick up these values to compare them to the notifications I retrieved from the Notifications list.

Performance considerations

Taking into account that this intranet will service over 15,000 users, I had to make sure the Notification functionality was ‘easy’ on SharePoint.

I have tried to do this by:

  • using a cookie, making sure only one CSOM query is made every day per user.
  • injecting the user profile Notification field value so there’s no need for any server of clientside calls being made to get these values.
  • filtering on From and Until dates to make sure only current notifications are retrieved.
  • cleaning up old notifications in the user profile.

Final result

So, here’s the final result:

Example 1

An initial welcome to new users of the renewed intranet, asking them to set their preferences. As you can see, I’ve set the Until date to 2030, making sure the every new user for the coming years will get this notification.

notification-popup

 

The notification will show up with a link button and a remind button. If the visitor clicks the ‘Remind me later’ button, he will get this notification again in 7 days (and so up to 4 times in 4 weeks).

notifications


Example 2

A cool new feature has arrived! We want all visitors to see what cool new feature we’ve introduced so we create a notification. Because we don’t want to bully the visitor, we will only show this once. So Recurrence is set to 1 and we can leave RecurrenceInterval empty.

notification2-popup notifications2

 

Technique

What I used to create this Notifications functionality:

  • C# for the WCF service to update the user profile
  • JavaScript & a lot of jQuery :D for retrieving Notifications, creating the onscreen message and calling the WCF service to update the user profile
  • SharePoint for the Notifications list

Final thoughts

Of course, you don’t need to have a notification scrolling down the entire width of the screen. You could create a smaller, more balloon like message. Your creativity is the only limit :)

As I mentioned, you could just add this functionality to the homepage, saving some bandwidth on the Notifications.js file.

I wrote this post just to show what can be done with a little creativity, imagination, SharePoint and JavaScript/jQuery magic. Expect to see more Client Side development examples from me in the future.

If you have any questions or suggestions, please feel free to respond!

I hope you enjoyed this post. Have fun!

This entry was posted in jQuery, SharePoint 2010 and tagged . Bookmark the permalink.

3 Responses to SharePoint Notifications Facebook / Google style

  1. Edwin says:

    Great idea, could be usefull in many situations!

  2. Vishal says:

    Hi,

    This is really good approach, you mentioned notification.js, could you please provide details on where I can download it?

    • Ernst Wolthaus says:

      Dear Vishal,

      Notifications.js is custom code, built for my customer. I cannot release this without asking consent from them. I’ll see what I can do.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>