Exploring the JavaScript Client Object Model

Until now you have been working with the client object model for the managed applications. This section takes a look into the JavaScript client object model (referred to as ECMAScript from now on), which provides rich script-based programming support. You can greatly improve the user experience in SharePoint by integrating it with AJAX and the JavaScript client object model.

ECMAScript provides a lot more flexibility than the managed object model and Silverlight since it contains a larger set of libraries, which facilitates user interface development. The entirety of ECMAScript allows you to work on user interface elements of SharePoint as well. Using ECMAScript you can control the ribbon, the SharePoint dialogs, and so on, which is not possible with other variants of client object models. Using ECMAScript enables you to create SharePoint solutions that are browser agnostic. While working with ECMAScript, you will see several differences from the managed client model. This is mostly due to the programming conventions used in JavaScript.

By the Way

JavaScript does not support all the data types found in the .NET Framework.

Many files make up the ECMAScript library. They are

• SP.js

• SP.Runtime.js

• SP.Core.js

• SP.Ribbon.js

• SP.UI.js

• CUI.js

• SP.UI.Rte.js

Covering all these files is outside the scope of this book. To provide the functionalities similar to that of the managed object model, you must load the SP.js file.

Using the ECMAScript Library

For using ECMAScript, the hosting page should meet the following requirements:

• Register the Microsoft.SharePoint.WebControls namespace on the page. The pages created using the designer will already have the namespace registered:

<%@ Register Tagprefix="SharePoint" Namespace="Microsoft. SharePoint.WebControls"
Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral,
PublicKeyToken=71e9bce111e9429c" %>

• Reference the SP.js file. For pages created using the designer, the reference will be already available in the master page. If you need to add it explicitly, you can use the ScriptLink control, which is included in the Microsoft.SharePoint.WebControls namespace. Use the following code to add ScriptLink explicitly:

<SharePoint:ScriptLink ID="SPScriptLink" runat="server" LoadAfterUI="true"
Localizable="false" Name="sp.js" />

• If you plan to make any updates to the SharePoint resources using JavaScript, then make sure that you have a FormDigest control in the page. This control is also part of the Microsoft.SharePoint.WebControls namespace. This is also added as part of the default master page. To add explicitly, use the following code:

<SharePoint:FormDigest runat="server" />

After all the preceding requirements are met, you are good to start using the ECMAScript library in your application.

Try It Yourself: Use the JavaScript API to Display the Site Title

Now look at a simple example to display the title of the website.

1. First open the site “splearn” in the SharePoint designer, navigate to Site Pages, and add a new page named TestECMAScript.aspx. Once created, add a link to the page.

<a href="" onclick="getSiteTitle();return false;">Get Site Title</a>

2. To display the site title, use the following code:

<script type="text/javascript">
    function getSiteTitle() {
        var context = new SP.ClientContext.get_current();
        this.web = context.get_web();
        context.load(this.web);
        context.executeQueryAsync(Function.createDelegate(this, this.onSuccess),
            Function.createDelegate(this, this.onFailure));
    }
    function onSuccess(sender, args) {
        alert('Success'),
    }
    function onFailure(sender, args) {
        alert('Failure : ' + args.get_message());
    }
</script>

Into the preceding code, as in the managed model, the execution starts by creating a ClientContext object. Since the syntax of JavaScript is different from C#, you have to use get_property() to gain access to different objects and set_property() to update the objects. Here get_web() returns the current web. Then the ClientContexts load method is used to retrieve the web object. Finally we use the executeQueryAsync method by passing the handlers for both success and failure conditions. To display the title of the website, simply call the getSiteTitle () method from anywhere in the page. It might be required that you use the JavaScript function during page loads.

Watch Out!

If the SP.js file is not loaded before the call to the library is made, the JavaScript code will fail. To address this problem, make sure that your JavaScript code runs only after the SP.js file is loaded. To achieve this, use the ExecuteOrDelayUntilScriptLoaded JavaScript function.

ExecuteOrDelayUntilScriptLoaded(getSiteTitle, "sp.js");

Using this statement helps to delay the call to getSiteTitle() until the SP.js is completely loaded.

Programming for Add, Delete, and Update Using ECMAScript

To add an item to the list, use the ListItemCreationInformation object. After you set the corresponding properties using set_item, call the update and ExecureQueryAsync methods:

function addItem(title,author){
        var context = new SP.ClientContext.get_current();
        var lstBooks = context.get_web().get_lists().getByTitle('Books'),
        var listItemCreationInfo = new SP.ListItemCreationInformation();
        var newItem = lstBooks.addItem(listItemCreationInfo);
        newItem.set_item('Title', title);
        newItem.set_item('Author', author);
        newItem.update();
      context.executeQueryAsync(Function.createDelegate(this, this.onSuccess),
            Function.createDelegate(this, this.onFailure));
}

To delete an item, use the deleteObject method:

function deleteItem(id) {
var context = new SP.ClientContext.get_current();
var lstBooks = context.get_web().get_lists().getByTitle('Books'),
var itemToDelete = lstBooks.getItemById(id);
    itemToDelete.deleteObject();
context.executeQueryAsync(Function.createDelegate(this, this.onSuccess),
           Function.createDelegate(this, this.onFailure));
}

To update a resource in SharePoint using ECMAScript, use the update() method of the corresponding resource:

function updateListDescription(){
var context = new SP.ClientContext.get_current();
var lstBooks = context.get_web().get_lists().getByTitle("Books");
context.load(lstBooks);
lstBooks.set_description("Updated description using ECMAScript");
lstBooks.update();
context.executeQueryAsync(Function.createDelegate(this, this.onSuccess),
            Function.createDelegate(this, this.onFailure));
}

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset