SharePoint Dragons

Nikander & Margriet on SharePoint

The JavaScript client OM

Developing solutions in the JavaScript client object model can be tedious and error prone. As a preferred way, it’s easier to start building a project using the managed client object model as it supports IntelliSense and debugging. When you’re finished, you can then port that version to the JavaScript OM. Alternatively, you can get some IntelliSense support for JavaScript by including the following line in an application page/site page/visual web part:

<% #if DEBUG %>
<script type=”text/javascript” src=”/_layouts/MicrosoftAjax.js” ></script> <script type=”text/javascript” src=”/_layouts/SP.debug.js”></script>
<% #endif %>

This is described in more detail here: http://sharepointinfoit.wordpress.com/2011/12/29/how-to-enable-ecma-client-object-model-intellisense-in-visual-studio-2010/

<% #if DEBUG %>
<script type=”text/javascript” src=”/_layouts/MicrosoftAjax.js” ></script> <script type=”text/javascript” src=”/_layouts/SP.debug.js”></script>
<% #endif %>

In, for example, a visual web part, the JavaScript OM js files have already been imported for you, so the following code is to wet your appetite and it updates a status field for a specific set of list items:

<script type=”text/javascript”>
    function onSucceeded(sender, args) {

        var itemEnum = listItems.getEnumerator();
        while (itemEnum.moveNext()) {
            var item = itemEnum.get_current();
            //alert(item.get_item(“Title”) + ” status:” + item.get_item(“MyStatus”) + ” : id ” + item.get_id());
                item.set_item(‘MyStatus’, ‘my new value’);
                item.update();
                context.load(item);

            }
        }

        context.executeQueryAsync(onSucceededStatusUpdate, onFailed);
    }
    function onSucceededStatusUpdate(sender, args) {
        alert(“status updated”);
    }

    var context;
    var web;
    var list;

    var listItems;
    var listItem;

    function InitClientOmContext() {
        context = new SP.ClientContext.get_current();
        web = context.get_web();
        list = web.get_lists().getByTitle(“MyPrintList”);
        listItem = list.getItemById(1);
    }

    function UpdateStatus(arrItems) {
        try {
            InitClientOmContext();

            // Note: Make sure that all fields are indeed part of the content type.
            // Dynamically create CAML query:
            var caml = “<View><ViewFields><FieldRef Name=’Id’/><FieldRef Name=’Title’/><FieldRef Name=’MyStatus’/></ViewFields><Query><Where><In><FieldRef Name=’ID’/><Values>”;

// arrItems is not included, but is a JavaScript array containing id’s
            for (i in arrItems) {
                caml += “<Value Type=’Number’>” + arrItems[i] + “</Value>”
            }
            caml += “</Values></In></Where></Query></View>”;
            //alert(caml);
            //var caml = “<View><Query><Where><Eq><FieldRef Name=’ID’/><Value Type=’Number’>2</Value></Eq></Where></Query></View>”;
            //var caml = “<View><ViewFields><FieldRef Name=’Title’/></ViewFields><RowLimit>5</RowLimit></View>”;
            //(<Where><FieldRef Name=”ID”/><Value>xx</Value></Where>)
            var camlQuery = new SP.CamlQuery();
            camlQuery.set_viewXml(caml);
            listItems = list.getItems(camlQuery);

            context.load(web);
            context.load(list);
            context.load(listItems);
            context.load(listItem, ‘Title’);
            context.executeQueryAsync(onSucceeded, onFailed);
        }
        catch (err) {
            alert(“error in update status ” + err.Message);
        }
    }

    function onFailed(sender, args) {
        alert(“fail: ” + args.get_message() + “\n” + args.get_stackTrace());
    }

</script>

Advertisements

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

%d bloggers like this: