User Experience Enhancements for Developers in SharePoint 2010

by Matt Ranlett and Brendon Schwartz

SharePoint 2010 is the perfect place for .NET developers today; demand for the skill set is at an all-time high and the specializations available to developers within the gigantic SharePoint platform make for continually challenging project work. SharePoint 2010 ships with an entirely new user interface (UI), three new client-side APIs, and half a dozen new developer targets. In addition to your core SharePoint development skills, adding strong HTML and JavaScript capabilities will make you invaluable. Here’s a quick review of three of the most exciting new developer enhancements in SharePoint 2010.

 The Ribbon

The Ribbon interface, new in SharePoint 2010, is intended to be the single central location for functionality which interacts with elements on the page, such as documents in a library or the entire library itself. The Ribbon presents developers with an excellent development target when it comes to introducing new page functionality. By taking advantage of the Custom Actions framework in the SharePoint Features framework, you can create new buttons and remove existing buttons. New buttons execute JavaScript code and can take advantage of SharePoint’s new ECMA client-side API. This new API is offered in addition to Microsoft’s legacy SharePoint 2007 web services API and unlocks nearly all of SharePoint’s capabilities for developers of remote or client-side code. The following XML snippet illustrates how to add a new button to the Ribbon when viewing a list.

 


Id="ExampleNewListButton"

RegistrationType="List"

RegistrationId="101"

ImageUrl="/_layouts/images/accesssetting.gif"

Location="CommandUI.Ribbon"

Sequence="105"

Title="Example New List Button Button"

Description="This is an example button." >

 Status Bar and Notifications

SharePoint 2010 introduces the status bar and notifications popup; they are non-distracting ways for the application to update the user. Both are located directly underneath the Ribbon. The status bar is intended to convey semi-permanent information, such as the workflow approval stage of a custom page type. The notifications area is a smaller disappearing popup intended to work like the Outlook email notifications popup. Both can be programmed via JavaScript as seen in this small code sample, which adds an informational message to the status bar.

 Dialog Framework

Another new feature of SharePoint 2010 is the Dialog framework, where you can create pop-up modal dialogs that focus the user on data without distracting UI elements. The pop-up dialog is usually used to present forms and list data without leaving the application page, greatly reducing the user’s need for the back button. Microsoft makes heavy use of the Dialog framework in native Lists and Libraries, but available APIs allow custom code to have the same look and feel as Microsoft’s own dialogs, making it easier to write and integrate code into SharePoint.

You’ll need to know a few things. First, it helps to know the SharePoint Client object model (OM) so you can build robust interactions. Second, knowing some HTML and JavaScript is very helpful because the dialog is simply HTML on your page, which is rendered in a DIV element. Finally you’ll need to understand the Ribbon UI so you can add robust selection functionality.

On an HTML page, Web Part, or control add some HTML in a DIV element that will be your dialog. Make sure to set the display to none so it isn’t rendered inline on the page. Next add a script link to the JavaScript files (sp.js) that SharePoint uses when creating dialogs. Then use the SP.UI.ModalDialog methods, such as showModalDialog and ShowPopupDialog. Make sure to use the close method when you’re done with the dialog. As you can see from the code sample below, it’s simple to create your own dialog using the SharePoint dialog platform.

 

    Brendon and Matt