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