Logo
programming4us
programming4us
programming4us
programming4us
Home
programming4us
XP
programming4us
Windows Vista
programming4us
Windows 7
programming4us
Windows Azure
programming4us
Windows Server
programming4us
Windows Phone
 
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

- How To Install Windows Server 2012 On VirtualBox
- How To Bypass Torrent Connection Blocking By Your ISP
- How To Install Actual Facebook App On Kindle Fire
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);
}
Other -----------------
- Managing Windows Server 2012 Systems : Configuring Roles, Role Services, and Features (part 6) - Tracking installed roles, role services, and features
- Managing Windows Server 2012 Systems : Configuring Roles, Role Services, and Features (part 5) - Installing components at the prompt
- Managing Windows Server 2012 Systems : Configuring Roles, Role Services, and Features (part 4) - Managing server binaries
- Managing Windows Server 2012 Systems : Configuring Roles, Role Services, and Features (part 3) - Adding server roles and features
- Managing Windows Server 2012 Systems : Configuring Roles, Role Services, and Features (part 2) - Installing components with Server Manager - Viewing configured roles and role services
- Managing Windows Server 2012 Systems : Configuring Roles, Role Services, and Features (part 1) - Using roles, role services, and features
- Windows Server 2012 : Configuring IPsec (part 7) - Configuring connection security rules - Monitoring IPsec
- Windows Server 2012 : Configuring IPsec (part 6) - Configuring connection security rules - Creating a custom rule, Configuring authenticated bypass
- Windows Server 2012 : Configuring IPsec (part 5) - Configuring connection security rules - Creating an authentication exemption rule, Creating a server-to-server rule, Creating a tunnel rule
- Windows Server 2012 : Configuring IPsec (part 4) - Configuring connection security rules - Types of connection security rules, Creating an isolation rule
 
 
Top 10
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Finding containers and lists in Visio (part 2) - Wireframes,Legends
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Finding containers and lists in Visio (part 1) - Swimlanes
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Formatting and sizing lists
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Adding shapes to lists
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Sizing containers
- Microsoft Access 2010 : Control Properties and Why to Use Them (part 3) - The Other Properties of a Control
- Microsoft Access 2010 : Control Properties and Why to Use Them (part 2) - The Data Properties of a Control
- Microsoft Access 2010 : Control Properties and Why to Use Them (part 1) - The Format Properties of a Control
- Microsoft Access 2010 : Form Properties and Why Should You Use Them - Working with the Properties Window
- Microsoft Visio 2013 : Using the Organization Chart Wizard with new data
- First look: Apple Watch

- 3 Tips for Maintaining Your Cell Phone Battery (part 1)

- 3 Tips for Maintaining Your Cell Phone Battery (part 2)
programming4us programming4us
Popular tags
Microsoft Access Microsoft Excel Microsoft OneNote Microsoft PowerPoint Microsoft Project Microsoft Visio Microsoft Word Active Directory Biztalk Exchange Server Microsoft LynC Server Microsoft Dynamic Sharepoint Sql Server Windows Server 2008 Windows Server 2012 Windows 7 Windows 8 windows Phone 7 windows Phone 8
programming4us programming4us
 
programming4us
Natural Miscarriage
programming4us
Windows Vista
programming4us
Windows 7
programming4us
Windows Azure
programming4us
Windows Server
programming4us
Game Trailer