Using the Status Bar, Notifications, and the Dialog Framework Share Point 2010

Along with using the JavaScript Client Object Model to read and write to SharePoint data structures, SharePoint 2010 also introduces a few of new APIs for providing user feedback. All these new APIs are accessed via the SP.UI namespace and the JavaScript Client Object Model.

The Status Bar

The status bar is a permanent fixture on the page. Messages added here remain on the page until they are specifically removed programmatically. We can see an example of a status bar message on the JavaScriptTest.aspx page. Since we’ve customized the page using SharePoint Designer, a message informing us that “The current page as been customized from its template” is automatically shown.Using the SP.UI.Status object, we can add our own status messages as follows:

function StatusBarUpdate_Click() { SP.UI.Status.removeAllStatus(true); var sid = SP.UI.Status.addStatus("My New Status:","Information Message", true); window.setTimeout(function () { UpdateStatusBar("D", "red", sid) }, 1000); window.setTimeout(function () { UpdateStatusBar("D I", "green", sid) }, 2000); window.setTimeout(function () { UpdateStatusBar("D I S", "blue", sid) }, 3000); window.setTimeout(function () { UpdateStatusBar("D I S C", "yellow", sid) }, 4000); window.setTimeout(function () { UpdateStatusBar("D I S C O", "green", sid) }, 5000); window.setTimeout(function () { SP.UI.Status.removeStatus(sid) }, 6000); } function UpdateStatusBar(message, color, sid) { SP.UI.Status.updateStatus(sid, message); SP.UI.Status.setStatusPriColor(sid, color); }

The call to Status.addStatus returns an identifier that can be used subsequently to change the settings of the status bar. Notice that only one status bar exists, but it can contain many status messages. The status bar always uses the color of the highest priority message. For example, the color red is used for very important messages and the color blue is used for information messages. If a very important message is displayed on the status bar and an information message is added, the status bar will be rendered in red.


Although the status bar is great for showing permanent messages to the user, sometimes we simply need to display a transient notification message. Using the SP.UI.Notify object, we can show such messages:

function SendNotification_Click() { var nid=SP.UI.Notify.addNotification("My New notification", false); }

By default, notification messages are displayed for 5 seconds, which is generally sufficient for most throwaway notification messages. However,if we need the user to perform some action, such as clicking a link, we can use code similar to this:

var nid; function SendNotification_Click() { if (nid == null) { nid = SP.UI.Notify.addNotification("My New notification <a href='Javascript: hideNote_Click();'>Click Me</a>", true); } } function hideNote_Click() { SP.UI.Notify.removeNotification(nid); nid = null; }


Another addition in SharePoint 2010 is the Dialog framework. For the most part, this is encapsulated in the functionality exposed by the SP.UI.Dialog and SP.UI.ModalDialog classes. Although the notifications and status bar functionality is included in the SP.js file, the dialog framework code is included in the SP.UI.Dialog.js file. To get IntelliSense support in Visual Studio when writing JavaScript that targets the dialog framework, add the following reference element to the JavaScript file:

/// <reference path="C:Program FilesCommon FilesMicrosoft SharedWeb
Server Extensions14TEMPLATELAYOUTSSP.UI.Dialog.debug.js" />

Showing a modal dialog is a relatively straightforward affair. First, we create a DialogOptions object, and then we call the showModalDialog method of the SP.UI.ModalDialog object, as this sample shows:

function ShowDialog_Click() { var options = {url: ‘’ ,tite: 'My Dialog', allowMaximize: false,showClose: true, width: 150,height: 150, dialogReturnValueCallback: SendNotification_Click}; var did = SP.UI.ModalDialog.showModalDialog(options); }

In this sample, we’re redirecting to an Internet page for the sake of simplicity. In a real-world application, we’d create a custom page that implemented the required functionality. You’ll see examples of custom dialogs when we build setting pages for service applications.

The important thing to note about the DialogOptions object is thedialog ReturnValue Callback property. This contains details of a callback method that will be called when the dialog is closed. In this callback, we can write code to pick up the dialog result and perform any necessary actions. In this simple example, we’ve generated a notification using our notification sample code.

All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd Protection Status

Share Point 2010 Topics