JSOM List Operations in SharePoint Apps in a proper way (Provider Hosted and SharePoint Hosted)–CRUD

 

SharePoint list operations are common for every SharePoint app. I have created a set of operation library which is combined with jQuery Deferred objects to  make the life easier.

As a set of methods you can keep update the source and I will provide a more updated version later.

List Operations in JSOM

(function (spa, $, undefined) {
    window._sa = spa;
    _sa.ctx = null;
    _sa.web = null;

    // this should be initialised

    _sa.configs = {
        SPHostUrl: "",
        SPAppWebtUrl: "",
        isCrossDomain: false
    };

   // init();

    utils.log(_sa.configs.SPHostUrl);
    utils.log(_sa.configs.SPWebtUrl);


    function init() {

        if (!_sa.configs.SPAppWebtUrl) {
            alert("Please initialize _sa.configs");
        }

        if (_sa.configs.isCrossDomain) {

            _sa.ctx = new SP.ClientContext(_sa.configs.SPAppWebtUrl);
            var factory = new SP.ProxyWebRequestExecutorFactory(_sa.configs.SPAppWebtUrl);
            _sa.ctx.set_webRequestExecutorFactory(factory);

        } else {

            _sa.ctx = new SP.ClientContext.get_current();
        }

        _sa.web = _sa.ctx.get_web();

    }

    // execute context or load and execute
    _sa.executeCtxAsync = function (object) {
        var def = $.Deferred();

        if (object) { _sa.ctx.load(object); };

        _sa.ctx.executeQueryAsync(function () {

            if (object) { def.resolve(object); }
            else { def.resolve(); };
        },
            function (a, b) {
                def.reject(b);
            });
        return def.promise();
    };

    _sa.Operations = function () {
        init();
    };

    _sa.Operations.prototype = {

        // Get reference to new list Item 
        getNewListItem: function (listName) {

            var olist = _sa.web.get_lists().getByTitle(listName);
            var itemCreateInfo = new SP.ListItemCreationInformation();
            return olist.addItem(itemCreateInfo);
        },

        // Get reference to the List Item
        getListItem: function (listName, Id) {
            var olist = _sa.web.get_lists().getByTitle(listName);
            return olist.getItemById(Id);
        },

        //insert and Update the item
        insertListItem: function (listItem) {
            var def = $.Deferred();

            listItem.update();
            _sa.ctx.executeQueryAsync(
                function () {
                    def.resolve(listItem);
                },
                function (a, b) {
                    def.reject(b);
                }
            );
            return def.promise();
        },

        updateListColumnByIdAsync: function (listName, id, columnsName, value) {

            var def = $.Deferred();
            var olist = _sa.web.get_lists().getByTitle(listName);
            var oitem = olist.getItemById(id);
            oitem.set_item(columnsName, value);
            oitem.update();
            _sa.ctx.executeQueryAsync(function () {
                def.resolve(oitem);
            },
                function (a, b) {
                    def.reject(b);
                });
            return def.promise();
        },

        deleteListItemByIdAsync: function (listName, id) {

            var def = $.Deferred();
            var olist = _sa.web.get_lists().getByTitle(listName);
            olist.getItemById(id).deleteObject();
            _sa.ctx.executeQueryAsync(function () {
                def.resolve();
            },
                function (a, b) {
                    def.reject(b);
                });
            return def.promise();
        },

        //ids arrays of id
        deleteListItemsByIdsAsync: function (listName, ids) {

            var def = $.Deferred();
            var olist = _sa.web.get_lists().getByTitle(listName);

            $.each(ids, function (i, ele) {
                olist.getItemById(ele).deleteObject();
            });

         
            _sa.ctx.executeQueryAsync(function () {
                def.resolve();
            },
                function (a, b) {
                    def.reject(b);
                });
            return def.promise();
        }

    };
}(window.spa = window.spa || {}, jQuery));

 

How you can use this in your code

 

First you need to refer jQuery in your page. There are script loaders which you can use for these things to manage application 

 

<!-- Refere Available jQuery version !-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

First pass the parameters to the spa config.

 

If it is a Provider Hosted Application

 

// Load spa values
// You can get the Hot web and app wen url from the query string
spa.configs = {
    SPHostUrl: "HostWebUrlUrl",
    SPAppWebtUrl: "AppWebUrlUrl",
    isCrossDomain: true
};

 

If It is a SharePoint Hosted Application

// Load spa values
// You can get the app web url from the query string
spa.configs = {
    SPAppWebtUrl: "AppWebUrlUrl",
    isCrossDomain: false
};

Now you are ready to make SharePoint calls. Depending on the parameters you have specified code will initialize the SharePoint context for you.

Create New List Item

var op = new spa.Operations();

var itm = op.getNewListItem("ListName");

itm.set_item("Title", "Title"); // Text
itm.set_item("ColumnOne", 45 ); // numeric

var lu = new SP.FieldLookupValue();
lu.set_lookupId(2); // lookupid
itm.set_item("LookupColumn", lu ); // lookup

var mlookup = [];

var ml1 = new SP.FieldLookupValue();
ml1.set_lookupId(1);
mlookup .push(ml1);

var ml2= new SP.FieldLookupValue();
ml2.set_lookupId(2);
mlookup .push(ml1);

itm.set_item("MultiLookupColumn", mlookup);

op.insertListItem(itm).done(function () {
    // Item Added , show your status or other work
    alert("Done")
}).fail(
function () {
    alert("Error")
});

Delete a single Item

var op = new spa.Operations();
var lid = 5; // Item Id
op.deleteListItemByIdAsync("ListName", lid ).done(function () {
      alert ("done") ; // your method here()
}).fail(function () {
      alert ("Error") ; // your exception method here()
});

Delete Multiple Items

var op = new spa.Operations();

var lids = [];
lids.push(2); // ItemId
lids.push(3); // ItemId

op.deleteListItemsByIdsAsync("ListName", lids ).done(function () {
      alert ("done") ; // your method here()
}).fail(function () {
      alert ("Error") ; // your exception method here()
});

var op = new spa.Operations();

var lids = [];
lids.push(2); // ItemId
lids.push(3); // ItemId

op.deleteListItemByIdAsync("ListName", lids ).done(function () {
      alert ("done") ; // your method here()
}).fail(function () {
      alert ("Error") ; // your exception method here()
});

Update a Single Column in a Item

var op = new spa.Operations();
var itm = op.getListItem("ListName", 5); // List Name and Item Id

itm.set_item("Title", "New Value"); // values to be updated
itm.set_item("ColumnTwo", 3.4 ); // values to be updated

op.insertListItem(itm).done(function () {
    alert("Done"); // your method here()
}).fail(
function () {
    alert("Error"); // your exception method here();
});

Update a Item

var op = new spa.Operations();

// Provide List Name , Item Id , Column Name and the value
op.updateListColumnByIdAsync("listName",4,"ColumnName",value).done(function () {
    alert("Done"); // your method here()
}).fail(
function () {
    alert("Error"); // your exception method here();
});