SharePoint ECMAScript to Add/Delete/Update/Get List Items

In SharePoint 2010 there are three different types of Client Object Model extension you can use.

They are

  • Managed Client Object Model
  • ECMAScript
  • Silver light extension

How to Get ECMAScript Intellisence

When you will use ECMAScript library in Visual Studio, it’s possible to get intellisense for ECMAScript. There are three ways you may need to enable the intellisense:

Get Intellisense in Application Page: In the case you want to put your javascript in aspx file as inline, you need to add the following lines in the markup file. However, this will not work for webpart file. For webpart file you need to put your javascript in another js file as described in option 2.

/_layouts/SP.debug.js

Get Intellisense in js file: If you want to get intellisense in js file then you need to add the following lines in the top of the js file. As shown in the snippet below, the first reference is to MicrosoftAjax.js file. This is mandatory to have this js file reference at the top. Then I have added two other references. The two files (SP.Core.Debug.js and SP.debug.js) have basic SharePoint namespaces. However, if you need more functionalities try to add more js file reference from the path “C:/Program Files/Common Files/Microsoft Shared/Web Server Extensions/14/TEMPLATE/LAYOUTS”

Get Intellisense in webpart: To get intellisense in webpart you need to add the following two lines in the webpart ascx file:

/_layouts/MicrosoftAjax.js

/_layouts/SP.debug.js

//Add a new List Item

function addItem(titleName, titleDescription) {

try {

var context = new SP.ClientContext.get_current();

var web = context.get_web();

var list = web.get_lists().getByTitle(‘ECMA Test’);

var listItemCreationInfo = new SP.ListItemCreationInformation();

var newItem = list.addItem(listItemCreationInfo);

newItem.set_item(‘Title’, titleName);

newItem.set_item(‘Description’, titleDescription);

newItem.update();

context.executeQueryAsync(Function.createDelegate(this, this.success), Function.createDelegate(this, this.failed));

}

catch (e) {

alert(‘error:’ + e.Message);

}

}

function failed(sender, args) {

alert(‘failed. Message:’ + args.get_message());

}

 

// Update a List Item

function updateItem(itemvarid, titleName, titleDescription) {

var context = new SP.ClientContext.get_current();

var web = context.get_web();

var list = web.get_lists().getByTitle(‘ECMA Test’);

var itemvar = list.getItemById(itemvarid);

itemvar.set_item(‘Title’, titleName);

itemvar.set_item(‘Description’, titleDescription);

itemvar.update();

context.executeQueryAsync(Function.createDelegate(this, this.success), Function.createDelegate(this, this.failed));

}

function failed(sender, args) {

alert(‘failed. Message:’ + args.get_message());

}

// Delete List Item

function deleteItem(itemvarid) {

var context = new SP.ClientContext.get_current();

var web = context.get_web();

var list = web.get_lists().getByTitle(‘ECMA Test’);

var itemToDelete = list.getItemById(itemvarid);

itemToDelete.deleteObject();

context.executeQueryAsync(Function.createDelegate(this, this.success), Function.createDelegate(this, this.failed));

}

function failed(sender, args) {

alert(‘failed. Message:’ + args.get_message());

}

// View List Item

function ViewItem() {

var context = new SP.ClientContext.get_current();

var web = context.get_web();

var list = web.get_lists().getByTitle(‘ECMA Test’);

var query = SP.CamlQuery.createAllItemsQuery();

allItems = list.getItems(query);

context.load(allItems, ‘Include(Title,Description)’);

context.executeQueryAsync(Function.createDelegate(this, this.viewSuccess), Function.createDelegate(this, this.failed));

}

function viewSuccess() {

var TextFiled = “”;

var ListEnumerator = this.allItems.getEnumerator();

while (ListEnumerator.moveNext()) {

var currentItem = ListEnumerator.get_current();

TextFiled += currentItem.get_item(‘Title’) + ‘-‘ + currentItem.get_item(‘Description’) + ‘\n’;

}

alert(TextFiled);

}

function failed(sender, args) {

alert(‘failed. Message:’ + args.get_message());

}

// Get List Item by ID

var varitem;

function getItemById(itemId) {

try {

var context = new SP.ClientContext.get_current();

var web = context.get_web();

var list = web.get_lists().getByTitle(‘ECMA Test’);

this.varitem = list.getItemById(itemId);

context.load(varitem, ‘Title’, ‘Description’);

context.executeQueryAsync(Function.createDelegate(this, this.productReceived), Function.createDelegate(this, this.failed));

}

catch (e) {

alert(e);

}

}

function productReceived() {

alert(‘got item’);

}

function failed(sender, args) {

alert(‘failed. Message:’ + args.get_message());

}

// Call Function

<a href=”#” onclick=”Javascript:addItem(‘test’,’testdesc’);”>Add Item</a> </br></br>

<a href=”#” onclick=”Javascript:updateItem(’15’,’update’,’updatedesc’);”>Update Item</a> </br></br>

<a href=”#” onclick=”Javascript:deleteItem(’16’);”>Delete Item</a> </br></br>

<a href=”#” onclick=”Javascript:ViewItem();”>View Items</a> </br></br>

<a href=”#” onclick=”Javascript:getItemById(’17’);”>Get Item by ID</a> </br></br>

</asp:Content>

Advertisements

About Joseph Velliah
As a SharePoint Developer my professional interests tend to be technical and SharePoint focused. I run a blog at "SP RIDER" where you can expect to read HOW TOs and scenarios that I run into during my day to day job. I hope my posts will give back a little to the community that is helped me.

8 Responses to SharePoint ECMAScript to Add/Delete/Update/Get List Items

  1. It’s wonderful that you are getting thoughts from this post as well as from our argument made at this place.

  2. Vikas says:

    Nice Article ….
    🙂

  3. Joycee says:

    hey budie.You saved my day.loved ur post….Thanks a ton

  4. dmbulanov says:

    great post.
    how to upload a file to a list item use ecmascript?
    I find source code from http://blogs.msdn.com/b/sridhara/archive/2010/03/12/uploading-files-using-client-object-model-in-sharepoint-2010.aspx
    whether it is possible to do this on ecmascript?

  5. How would you go about getting a Person Field item and writing the item to the doc, the item returns as an [object Object] and I cant use toString and xxx[0] is undefined.

  6. Also, I cant use get_title or get_id of the object. it says the function isn’t valid.
    If you would like to see what im talking about here is some code, (users is a list that contains a person or group type field and I want the string output of the field, i.e. ‘1111#FirstName LastName’):

    function retrieveMembers(){
    var clientContext = new SP.ClientContext(siteURL);
    var oList = clientContext.get_web().get_lists().getByTitle(‘Users’);
    var camlQuery = new SP.CamlQuery();
    this.collListItem = oList.getItems(camlQuery);
    clientContext.load(collListItem);
    clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceededUsers), Function.createDelegate(this, this.onQueryFailedUsers));
    }

    function onQuerySucceededUsers(sender, args){
    users = new Array();
    var listItemEnumerator = collListItem.getEnumerator();

    while (listItemEnumerator.moveNext()) {
    var oListItem = listItemEnumerator.get_current();
    var person = oListItem.get_item(‘user’);
    users.push(person);
    }
    alert(users[0]) //Returns [object Object]
    alert(users[0].toString()); //returns [object Object]
    alert(users[0].get_title()); //not a valid function
    }

Leave a Reply

Please log in using one of these methods to post your comment:

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: