| |
|
|
|
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
|
|
|
|
|
|
|
|
|
|
|
|
11/5/2014 8:35:23 PM
|
|
Creating, reading, updating, and deleting in the JavaScript client object model
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);
}
|
|
|
|
|
|
| Related ----------------- |
|
|
|
|
|
|
|
|
|
| |
|
|
