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>

8 thoughts on “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. 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.

  3. 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

This site uses Akismet to reduce spam. Learn how your comment data is processed.