concept status bar in category sharePoint

This is an excerpt from Manning's book SharePoint 2010 Web Parts in Action. Login to get full access to this book.

Figure 2.2. The Central Administration in SharePoint contains a Health Analyzer that analyzes the current state of the farm. If any critical errors are found, the Health Analyzer uses the status bar to notify administrators.

Next, you’ll look at SharePoint-specific features such as the notification messages, the status bar, and the dialog framework. These simple features immediately make your Web Part more dynamic and user friendly.

The status bar in SharePoint offers similar functionality as the notification message. The big difference is that notification messages are normally messages shown for a short period whereas the status bar messages are for more long-lived conditions.

Working with the status bar is also similar to working with notification messages. The status bar is defined in the SP.js JavaScript file and you access it using the SP.UI.Status JavaScript namespace. Status messages have a title and message as well as a priority color. The big difference compared to notification messages is that the status bar doesn’t disappear after a few seconds and the status messages aren’t queued. The status bar appears by default under the Ribbon menu and messages can be appended to the status bar or removed.

To demonstrate how to work with the status bar, let’s introduce it into our RSS Feed Web Part. You’d like the status bar to appear and show if any feed fails to load. If there are several RSS Feed Web Parts on the same page, they’ll use the same status bar, as shown in figure 10.3.

Figure 10.3. Use the status bar to give the users information, warnings, and error messages. In this figure, the status bar which appears in red on your screen (“Feed not found” in figure above) shows that errors have occurred in the RSS Web Part.

You’re going to add a few new features to the JavaScript namespace that you added in listing 10.3. First you’ll add two properties that will store the id of the status bar and an array of strings consisting of URLs of the feeds not found. Then you’ll add the function that the Web Part will call whenever it finds a feed with an error. The code in listing 10.4 is added inside the window.feeds scope in listing 10.3.

Listing 10.4. Adding a status bar to the Web Part

statusId: null, feedsNotFound : [], feedNotFound: function (uri) { var html = 'Unable to locate the feed: <a href="' + uri + '">' + uri + '</a>.'; var title = 'Feed not found'; if(this.statusId == null) { this.statusId = SP.UI.Status.addStatus(title, html, true); SP.UI.Status.setStatusPriColor(this.statusId, 'red'); this.feedsNotFound[this.feedsNotFound.length] = uri; } else { var found = false; for(var i = 0; i < this.feedsNotFound.length; i++) { if(this.feedsNotFound[i] == uri) { found = true; } } if(!found) { this.feedsNotFound[this.feedsNotFound.length] = uri; SP.UI.Status.appendStatus(this.statusId, title, html); } } }

copy

The first property, statusId, represents the id of the current status bar that’s used. The second, the feedsNotFound array, is used to store faulty feeds that have been added so a feed isn’t added to the status bar more than once.

The feedNotFound function takes an argument with the URL of the feed that has a problem. If the statusId property has a null value, it’ll create a new status bar and set its priority color to red and finally add the feed to the array. If a status bar already exists, the function checks if the feed has been added already to the array; if not, it’ll append a message to the current status bar and add the URL to the array.

The priority color of the status bar can have one of the following values: Red, Green, Yellow, or Blue. You should use the appropriate color like this: