Second Life of a Hungarian SharePoint Geek

March 6, 2014

How to enable Users to Close Status Messages and Notifications

Filed under: jQuery, SP 2010 — Tags: , — Peter Holpar @ 22:46

In SharePoint you can give feedback to your users through status messages and notifications. The notifications can disappear automatically (if you call the addNotification method with false as the second parameter), and we can hide status messages as well from code using JavaScript setTimeout method (see examples here). Assuming that your scripts are running in the background and can give feedback not only as a direct response to a user action, it is not ideal, if your messages disappear after a few seconds, as the user may omit them easily. On the other side, it would not be nice, if the messages flooded the UI, without the possibility the user can close them after reading, similarly to the OK button in a JavaScript alert.

Fortunately, it’s quite easy to inject this feature using jQuery. For example, we can insert an x into the status message using the code below. The message disappears as the user clicks on the x:

var statusId = SP.UI.Status.addStatus("Status message:", "This is a test message");
makeStatusClosable(statusId);

function makeStatusClosable(statusId) {
    var status = $(‘#’ + statusId);
    $(status).html(‘<a title="Close status message" href="" onclick="javascript:SP.UI.Status.removeStatus(\” + statusId + ‘\’);javascript:return false;">x</a>&nbsp;’ + $(status).html());
}

The result is illustrated on the following screenshot:

image

The same solution for the notifications looks like this:

var notificationId = SP.UI.Notify.addNotification("This is a test message", true);
makeNotificationClosable(notificationId);

function makeNotificationClosable(notificationId) {
    var notification = $(‘#’ + notificationId).find(‘.s4-noti-in3’);
    $(notification).html(‘<a title="Close notification" href="" onclick="javascript:SP.UI.Notify.removeNotification(\” + notificationId + ‘\’);javascript:return false;">x</a>&nbsp;’ + $(notification).html());
}

And the outcome is:

image

Leave a Comment »

No comments yet.

RSS feed for comments on this post. TrackBack URI

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Blog at WordPress.com.

%d bloggers like this: