CRUD operations in SharePoint hosted apps using Javascript Object Model (JSOM)

SharePoint hosted apps can be developed using only Javascript, but still we have 2 options and they’re Javascript Object Model (JSOM) for the SharePoint and SharePoint client REST API. This post explains how to perform CRUD operations in a list using JSOM. Click this link to see how to perform CRUD operations using REST API and Javascript.

The following code is written in ‘Revealing Module Pattern’ using the self invoking function. A simple built it Contact List is used in this sample.

var Qbe = window.Qbe || {};
Qbe.Contacts;
Qbe.ContactCRUD = Qbe.ContactCRUD || {};
  
Qbe.ContactCRUD = function () {
  
  
    createItem = function (fname, lname, phone) {
        var ctx = new SP.ClientContext.get_current();
        var list = ctx.get_web().get_lists().getByTitle('ContactList');
        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', phone);
  
        newContact.update();
        ctx.executeQueryAsync(success, error);
    },
  
    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('ContactList');
        ctx.load(list);
  
        Qbe.Contacts = list.getItems(camlQuery);
        ctx.load(Qbe.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 = Qbe.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(''));
    },
  
    updateItem = function (id, fname, lname, phone) {
        var ctx = new SP.ClientContext.get_current();
        var list = ctx.get_web().get_lists().getByTitle('ContactList');
        ctx.load(list);
  
        var item = list.getItemById(id);
        item.set_item('Title', lname);
        item.set_item('FirstName', lname);
        item.set_item('WorkPhone', phone);
  
        item.update();
        ctx.executeQueryAsync(success, error);
    },
  
    deleteItem = function (id) {
        var ctx = new SP.ClientContext.get_current();
        var list = ctx.get_web().get_lists().getByTitle('ContactList');
        ctx.load(list);
  
        var item = list.getItemById(id);
        item.deleteObject();
        
        ctx.executeQueryAsync(success, error);
    },
  
    success = function () {
        readAll();
    },
    error = function (sender, args) {
        alert(args.get_message());
    }
  
    // public interface
    return {
        createContact: createItem,
        updateContact: updateItem,
        deleteContact: deleteItem
    }
}();

Share this:

Related