Working with the ECMAScript Client Object Model (JSOM) in SharePoint 2010–Part 4 (Nikhil Sachdeva)

Manipulating Data in Lists and Libraries

In this part of the series, you perform item manipulation operations on a list.

If you remember from Part 2, for any manipulation operation, it is a requirement that a FormDigest tag be referenced before you can perform these operations. The following adds a control to your container.

<SharePoint:FormDigest runat="server" />

Add a New Item to the List

Adding a new item to a list is fairly simple. The SP namespace of the client object model provides <Object>CreationInformation classes for various objects such as Web, List, ListItem, ContentType, FieldLink, Groups, User, Role Definition, and View to name a few. You can use these creation classes to construct the object definition and then use the native methods to create the object in SharePoint.

The following code snippet adds a new Sales entry for an employee to the Sales list created in the previous post. In this case, the ListItemCreationInformation object creates the new item in the root of the list.

If you want to create an item inside a specific folder, you use the folderUrl property of the ListItemCreationInformation type. When dealing with document libraries, you need to provide the name of the file when uploading the document. You can then use the leafName property to specify the name of the list Item.

The set_Item (<fieldName>, <fieldValue>) method assigns values for all the fields in the list. Finally, the Update method is called along with the ExecuteQueryAsync method to submit the changes.

function addNewSale(employeeId, salesachieved, customer, description) {

                // Get the current context

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

                // Get the web

                var web = context.get_web();

                // Get the Sales list

                var list = web.get_lists().getByTitle('Sales');

                // create the ListItemInformational object

                var listItemInfo = new SP.ListItemCreationInformation();

                // add the item to the list

                var listItem = list.addItem(listItemInfo);

                // Assign Values for fields

                listItem.set_item('SalesAchieved', salesachieved);

                listItem.set_item('Customer', customer);

                listItem.set_item('Title', description);

                //Lookup field need to be catered using FieldLookUp value

                var employeeNameValue = new SP.FieldLookupValue();

                employeeNameValue.set_lookupId(employeeId);

   listItem.set_item('EmployeeName', employeeNameValue);

                // Adding value for a Date Field

                var currDate = new Date();

                listItem.set_item('SaleDate', currDate);

     listItem.update();

                //Make a query call to execute the above statements

                context.executeQueryAsync(Function.createDelegate(this, this.on_addSales_Success), Function.createDelegate(this, this.on_addSales_Failure));

            }

            function on_addSales_Success() {

                alert("Sale successfully created.");

            }

            function on_addSales_Failure() {

                alert("Error while creating new Sales.");

            }

Updating an Existing Item

To update an item, you need to create a get operation and then call the Update method on the item.

function updateSales(salesId, salesAchieved) {
var context = new SP.ClientContext.get_current();
var web = context.get_web();
var list = web.get_lists().getByTitle('Sales');
var salesItem = list.getItemById(salesId);
salesItem.set_item('SalesAchieved', salesAchieved);
salesItem.update();
context.executeQueryAsync(Function.createDelegate(this, this.on_UpdateSales_Success), Function.createDelegate(this, this.on_UpdateSales_Failure));

}

function on_UpdateSales_Success() {

         alert("Sale Item updated successfully.");

         }

         function on_UpdateSales_Failure() {

         alert("Error while updating Sales.");

         }

Deleting an Item from a List

Deletion from a list is relatively straightforward as shown in the following:

function deleteSaleItem(saleId) {
var context = new SP.ClientContext.get_current();
var web = context.get_web();
var list = web.get_lists().getByTitle('Sales');
var itemToDelete = list.getItemById(saleId);
itemToDelete.deleteObject();
context.executeQueryAsync(Function.createDelegate(this, this.on_DeleteSales_Success), Function.createDelegate(this, this.on_DeleteSales_Failure));
}

function on_DeleteSales_Success() {

alert("Sale Item updated successfully.");

}

function on_DeleteSales_Failure() {

alert("Error while updating Sales.");

}

I hope that these posts have helped you gain a basic understanding of the ECMAScript client object model known as JSOM. The ECMAScript client object model is a great addition to the SharePoint 2010 development kit and is useful in scenarios where data needs to accessed and manipulated after the page has been loaded. The object model provides an asynchronous way of displaying data on your Web Parts and Web Pages. It is simple to use and can be loaded even from within an editor similar to the content editor Web Part.

Technorati Tags: Nikhil Sachdeva,ECMAScript Client Object Model,JSOM