Sharepoint 2010 : Client Object Model - Deleting Data, Using the Status Bar, Notifications, and the Dialog Framework

1. Deleting Data

Deleting data is relatively straightforward and follows a pattern similar to how it’s done using the Server Object Model.

To delete an item using the Silverlight Client Object Model, we could use code such as this:

private void Delete_Click(object sender, RoutedEventArgs e)
{
    ClientContext ctx = new ClientContext("Your Server Here");
    CamlQuery query = new CamlQuery();
    query.ViewXml = "<View><Query>" +
                 "<OrderBy><FieldRef Name=\"Editor\" Ascending=\"False\" />" +
                 "</OrderBy></Query></View>";
    List announcements = ctx.Web.Lists.GetByTitle("Announcements");

    ListItemCollection listItems = announcements.GetItems(query);
    ctx.Load(listItems);
    ctx.ExecuteQueryAsync((s, args) =>
    {
        ListItem lastItem = listItems[listItems.Count - 1];
        lastItem.DeleteObject();
        announcements.Update();

        ctx.ExecuteQueryAsync((s1, args1) =>
        {
            Dispatcher.BeginInvoke(() =>
            {
                label1.Content = "Last record deleted";
            });
        }, null);
    }, (s, args) =>
    {
        Dispatcher.BeginInvoke(() =>
        {
            label1.Content = args.Message;
        });
    });
}


					  

If using JavaScript, our code would look like this:

function Delete_Click() {
    var ctx = new SP.ClientContext.get_current();
    var query = new SP.CamlQuery();
    query.viewXml = "<View><Query><OrderBy>" +
                    "<FieldRef Name=\"Editor\" Ascending=\"False\" />" +
                    "</OrderBy></Query></View>";
    var announcements = ctx.get_web().get_lists().getByTitle("Announcements");
    var listItems = announcements.getItems(query);
    ctx.load(listItems, "Include(Title)");
    ctx.executeQueryAsync(function (s, args) {
        var lastItem=listItems.get_item(listItems.get_count()-1);
        lastItem.deleteObject();
        announcements.update();
        ctx.executeQueryAsync(function (s, args) {
            var console = document.getElementById('DemoConsole');
            console.innerHTML = " Last Item Deleted";
        }, null);
    }, null);
}

2. Using the Status Bar, Notifications, and the Dialog Framework

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.

Notifications

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;
}


					  

Dialogs

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 Files\Common Files\Microsoft Shared\Web →
Server Extensions\14\TEMPLATE\LAYOUTS\SP.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: 'http://www.chaholl.com',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.

The important thing to note about the DialogOptions object is the dialogReturnValueCallback 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.