Creating, reading, updating, and deleting in the JavaScript client object model
Read more at http://tutorial.wmlcloud.com/windows_server/Sharepoint-2013---Working-with-the-CSOM-(part-6)---Working-with-the-JavaScript-client-object-model---Creating,-reading,-updating,-and-deleting-in-the-JavaScript-client-object-model.aspx#jHAreGQyxGCDMTb1.99
Creating, reading, updating, and deleting list items by using the JavaScript client object model is more complex than with the managed client object model. The additional complexity comes from not only the asynchronous calls, but also the need to properly encapsulate the JavaScript so that it’s separated from the global namespace. Example 12 shows the basic structure of a JavaScript library used to perform create, read, update, and delete (CRUD) operations on a contacts list contained in a SharePoint-hosted app.
Example 12. CSOM library structure
"use strict";
var Wingtip = window.Wingtip || {};
Wingtip.Contacts;
Wingtip.ContactList = function () {
//private members
createItem = function (lname, fname, wphone) {
},
readAll = function () {
},
readAllSuccess = function () {
},
updateItem = function (id, lname, fname, wphone) {
},
removeItem = function (id) {
},
success = function () {
readAll();
},
error = function (sender, args) {
alert(args.get_message());
}
//public interface
return {
createContact: createItem,
updateContact: updateItem,
deleteContact: removeItem
}
}();
$(document).ready(function () {
Wingtip.ContactList.createContact("Cox", "Brian", "555-555-5555");
alert("Contact Created!");
Wingtip.ContactList.updateContact(1, "Cox", "Brian", "111-111-1111");
alert("Contact Updated!");
Wingtip.ContactList.deleteContact(1);
alert("Contact Deleted!");
});
Before examining the implementation details for the CRUD operations, take some time to study the structure of the library. Example 12 contains the definition of a namespace object and a self-invoking function. In this case, however, a new property named Wingtip.Contacts is also defined. This property is used to hold a reference to the list items between asynchronous calls to the SharePoint server. Within the self-invoking function, all of the CRUD operations are defined, but only the create, update, and delete functions are revealed through the public interface of the library. These functions are called from some example code contained in the ready event handler.
Creating new contacts is done in the createItem function. This function uses the SP.ListItemCreationInformation object to define a new list item. The first name, last name, and phone number are set on the new item, and it is added to the list. Note that in a contacts list, the “Title” field is actually the last name of the contact. Example 13 presents the code for adding a new item.
Example 13. Creating new items
createItem = function (lname, fname, wphone) {
var ctx = new SP.ClientContext.get_current();
var list = ctx.get_web().get_lists().getByTitle("Contacts");
ctx.load(list);
var listItemCreationInfo = new SP.ListItemCreationInformation();
var newContact = list.addItem(listItemCreationInfo);
newContact.set_item("Title", lname);
newContact.set_item("FirstName", fname);
newContact.set_item("WorkPhone", wphone);
newContact.update();
ctx.executeQueryAsync(success, error);
}
After each create, update, or delete operation, the list is read and redrawn. The readAll function reads every item in the list by using a CAML query and then creates an HTML table to hold the contacts. The HTML is rendered in a <div> via jQuery. Example 14 demonstrates how the list is read and drawn. Note the use of the Wingtip.Contacts property to reference the list data between asynchronous calls to the server.
Example 14. Rendering the list items
readAll = function () {
var ctx = new SP.ClientContext.get_current();
var query = "<View><Query><OrderBy><FieldRef Name='Title'/>" +
"<FieldRef Name='FirstName'/></OrderBy></Query>" +
"<ViewFields><FieldRef Name='ID'/><FieldRef Name='Title'/>" +
"<FieldRef Name='FirstName'/><FieldRef Name='WorkPhone'/>
</ViewFields></View>";
var camlQuery = new SP.CamlQuery();
camlQuery.set_viewXml(query);
var list = ctx.get_web().get_lists().getByTitle("Contacts");
ctx.load(list);
Wingtip.Contacts = list.getItems(camlQuery);
ctx.load(Wingtip.Contacts, 'Include(ID,Title,FirstName,WorkPhone)');
ctx.executeQueryAsync(readAllSuccess, error);
},
readAllSuccess = function () {
var html = [];
html.push("<table><thead><tr><th>ID</th><th>First Name</th>");
html.push("<th>Last Name</th><th>Title</th></tr></thead>");
var listItemEnumerator = Wingtip.Contacts.getEnumerator();
while (listItemEnumerator.moveNext()) {
var listItem = listItemEnumerator.get_current();
html.push("<tr><td>");
html.push(listItem.get_item("ID"));
html.push("</td><td>");
html.push(listItem.get_item("FirstName"));
html.push("</td><td>");
html.push(listItem.get_item("Title"));
html.push("</td><td>");
html.push(listItem.get_item("WorkPhone"));
html.push("</td><td>");
}
html.push("</table>");
$('#displayDiv').html(html.join(''));
}
Updating list items is accomplished by using the updateItem function. This function retrieves the item to be updated by its ID in the list. The new values for the fields are applied to the list item and it is updated. After the roundtrip to the server, the table is redrawn with the new values for the list item visible. Example 15 shows the code for updating items.
Example 15. Updating list items
updateItem = function (id, lname, fname, wphone) {
var ctx = new SP.ClientContext.get_current();
var list = ctx.get_web().get_lists().getByTitle("Contacts");
ctx.load(list);
var listItem = list.getItemById(id);
listItem.set_item("Title", lname);
listItem.set_item("FirstName", fname);
listItem.set_item("WorkPhone", wphone);
listItem.update();
ctx.executeQueryAsync(success, error);
}
Deleting list items is done by using the removeItem function. The function retrieves the item to delete by its ID. The DeleteObject method is then called to remove the designated item from the list. After the item is removed asynchronously, the table is redrawn with the remaining list items. Example 16 presents the code for deleting items.
Example 16. Deleting list items
removeItem = function (id) {
var ctx = new SP.ClientContext.get_current();
var list = ctx.get_web().get_lists().getByTitle("Contacts");
ctx.load(list);
var listItem = list.getItemById(id);
listItem.deleteObject();
ctx.executeQueryAsync(success, error);
}
Read more at http://tutorial.wmlcloud.com/windows_server/Sharepoint-2013---Working-with-the-CSOM-(part-6)---Working-with-the-JavaScript-client-object-model---Creating,-reading,-updating,-and-deleting-in-the-JavaScript-client-object-model.aspx#jHAreGQyxGCDMTb1.99
