JavaScript Object Model in SharePoint 2010

4.60 / 5 5
1 / 5
2 / 5
3 / 5
4 / 5
5 / 5

5 votes, 4.60 avg. rating (91% score)

Introduction

In this post I will provide detials of how you can acces sharepoint data with JavaScript Object Model.
There are pretty much differences between the ECMAScript (JavaScript, JScript) and client object models. I am not covering those in this post.
As JavaScript Object Model has different syntax all togther, as usual I will cover common tasks of a SharePoint to get familarity in accessing the objects.

Files that are referred for JavaScript Object Model are

<script type="text/ecmascript" src="/_layouts/SP.Core.js" />
<script type="text/ecmascript" src="/_layouts/SP.Debug.js" />
<script type="text/ecmascript" src="/_layouts/SP.Runtime.Debug.js" />

Access SharePoint Website

The following code explains how we can access Sharepoint WebSite.
Code Example:1

var siteUrl = '/MySiteCollection/mysite ';

function getMyWebSite() {
    var clientContext = new SP.ClientContext(siteUrl);

    this.WebsiteObj = clientContext.get_web();

    clientContext.load(this.WebsiteObj);

    clientContext.executeQueryAsync(Function.createDelegate(this, this.onGetSucceeded), Function.createDelegate(this, this.onGetFailed));
}

function onGetSucceeded(sender, args) {
    alert('Site Title: ' + this.WebsiteObj.get_title() + ' Site Decription: ' + this.WebsiteObj.get_description());
}

function onGetFailed(sender, args) {
    alert('Site Request failed. ' + args.get_message() + 'n' + args.get_stackTrace());
}

We have to give only sitecollection relative url for getting the site object.
clientContext.get_web() gets the web objct
clientContext.get_site() is the method used to get site collection object

Get SharePoint List data

The following code explains how we can access Sharepoint List data.
Code Example:2

var siteUrl = '/MySiteCollection/mysite';

function getMySiteListData() {

    var clientContext = new SP.ClientContext(siteUrl);
    var empList = clientContext.get_web().get_lists().getByTitle('EmpInfo');

    var camlQuery = new SP.CamlQuery();
    camlQuery.set_viewXml('<View><Query><Where><Geq><FieldRef Name='Department'/>' +
        '<Value Type='Text'>HR</Value></Geq></Where></Query><RowLimit>10</RowLimit></View>');
    this.empListItems = empList.getItems(camlQuery);

    clientContext.load(empListItems);

    clientContext.executeQueryAsync(Function.createDelegate(this, this.onListDataSucceeded), Function.createDelegate(this, this.onListDataFailed));        

}

function onListDataSucceeded(sender, args) {

    var empInfo = '';

    var listItemEnumerator = empListItems.getEnumerator();

    while (listItemEnumerator.moveNext()) {
        var oListItem = listItemEnumerator.get_current();
        empInfo += 'nEmp ID: ' + oListItem.get_id() +
            'nEmployee Name: ' + oListItem.get_item('Title');
    }

    alert(empInfo.toString());
}

function onListDataFailed(sender, args) {

    alert('List Data fetch failed. ' + args.get_message() + 'n' + args.get_stackTrace());
}