Brief discussion about the ECMA script client object model.
Client OM Architecture
Before getting to actual usage we'll take a brief look at the architecture of the Client Object Model to understand how it functions.
As can be seen in the above diagram all versions of the Client OM go through the WCF Web Service named
Client.svc. This Web Service is located, along with all other SharePoint Web Services, in the folder [SharePoint Root]\ISAPI. The Client OM is responsible for packaging any requests into XML and calling the Web Server, however, when this call takes place is controlled by the developer as you will see. The response from the Client.svc Web Service is sent as JSON and the Client OM is responsible for transforming this into appropriate objects for use in the environment the call was made from.
The
Client.svc Web Service has one method, ProcessQuery which takes a Stream object, an XML formatted stream as indicated above, and returns a Stream, JSON formatted. The implementation for this method can be found in the assembly Microsoft.SharePoint.Client.ServerRuntime.dll and the private class ClientRquestServiceImpl. Delving into this method, the first thing you find is an authentication check.
The Client OM uses Windows Authentication by default.
ECMAScript Client OM – Is a client object model extension for using JavaScript or JScript. This API is only available for applications hosted inside SharePoint (for example, web part deployed in SharePoint site can use this JavaScript API for accessing SharePoint from browser using JavaScript). You can however use this ECMAScript Client OM in web part pages or application pages (aspx pages) by referencing a javascript file (SP.js).
To use ECMAScript Client OM, add an entry for the below in your web part ascx control (the webparts deisgn interface) or to your content editor webpart’s HTML Source.
<script src=”/_layouts/SP.js” type=”text/ecmascript”></script>
Also, if If your code modifies SharePoint content you need to add a FormDigest control inside your page.The formdigest control can be added in master page and then all content pages will get it automatically.
<SharePoint:FormDigest runat=”server” />
For quick start add a Content editor webpart to your site page and modify its HTML source. Now, add the reference to SP.JS specified above and paste in the below code. Make sure you have ‘myCustomlist’ created in your site.
FYI… To get current client context we use SP.ClientContext.get_current() and to get current web we use ctx.get_web(). See the full example below.
Adding a List item – Now lets look at something advanced than above.
<script type=”text/javascript”>
function AddItem()
{
var context = new SP.ClientContext.get_current();
var web = context.get_web();
var list = web.get_lists().getByTitle(‘myCustomlist’);
{
var context = new SP.ClientContext.get_current();
var web = context.get_web();
var list = web.get_lists().getByTitle(‘myCustomlist’);
var listItemCreationInfo = new SP.ListItemCreationInformation();
var newItem = list.addItem(listItemCreationInfo);
newItem.set_item(‘Title’, ‘SPUser’);
var newItem = list.addItem(listItemCreationInfo);
newItem.set_item(‘Title’, ‘SPUser’);
newItem.update();
context.executeQueryAsync(Function.createDelegate(this, this.success), Function.createDelegate(this, this.failed));
}
function success() {
alert(‘Added!’);
}
function failed(sender, args) {
alert(‘failed. Message:’ + args.get_message());
}
context.executeQueryAsync(Function.createDelegate(this, this.success), Function.createDelegate(this, this.failed));
}
function success() {
alert(‘Added!’);
}
function failed(sender, args) {
alert(‘failed. Message:’ + args.get_message());
}
Delete an item - and finally how to delete an item.
function deleteItem(ItemId)
{
var context = new SP.ClientContext.get_current();
var web = context.get_web();
var list = web.get_lists().getByTitle(‘myCustomlist’);
var itemToDelete = list.getItemById(ItemId);
itemToDelete.deleteObject();
context.executeQueryAsync(Function.createDelegate(this, this.success), Function.createDelegate(this, this.failed));
}
function success() {
alert(‘Deleted!’);
}
function failed(sender, args) {
alert(‘failed. Message:’ + args.get_message());
{
var context = new SP.ClientContext.get_current();
var web = context.get_web();
var list = web.get_lists().getByTitle(‘myCustomlist’);
var itemToDelete = list.getItemById(ItemId);
itemToDelete.deleteObject();
context.executeQueryAsync(Function.createDelegate(this, this.success), Function.createDelegate(this, this.failed));
}
function success() {
alert(‘Deleted!’);
}
function failed(sender, args) {
alert(‘failed. Message:’ + args.get_message());
}</script>
<a href=”#” onclick=”Javascript:AddItem();”>Create Item</a>
<a href=”#” onclick=”Javascript:deleteItem(1);”>Delete Item</a>
Thanks LearningSharePoint Admin.
