JSOM List Operations in SharePoint Apps in a Proper Way (Provider Hosted and SharePoint Hosted) – Search

In my previous post (JSOM List Operations in SharePoint Apps in a proper way (Provider Hosted and SharePoint Hosted)–CRUD), I explained how to work with basic list operations.

Here, I’m explaining the CAML and search options that we can perform.

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

    // this should be initialized

    _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 = {

        getListItemByIdAsync: function (listName, id) {

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

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

        // Get by Caml (Name, Query, 'Include(Title,Type,ID,Modified)' )
        getListItemsByCAMLAsync: function (listName, query, fieldsFilter) {
            var def = $.Deferred();
            var ol = _sa.web.get_lists().getByTitle(listName);
            var qry = new SP.CamlQuery();
            qry.set_viewXml(query);
            var items = ol.getItems(qry);

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

            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));

First, you need to initialize the context for work with apps (refer to the first part of the article).

getListItemByIdAsync

This method helps to get a single item by providing Item Id.

var op = new spa.Operations();
var itmId = 4 ; // List Item Id
op.getListItemByIdAsync("ListName", itmId).done(function (itm) {
    // access Item columns
    var v = itm.get_item('ColumnName'); // Provide the column Name here
    alert(v);
}).fail(function () { alert("Error"); });

getListItemsByCAMLAsync

This method will help to retrieve multiple items in a List.

var operations = new spa.Operations();

var qr = '<View><Query><OrderBy><FieldRef Name="ID"/>
</OrderBy><Where><Eq><FieldRef Name="Author"/>
<Value Type="Integer"><UserID Type="Integer"/>
</Value></Eq></Where></Query></View>';
var include = 'Include(Title,Type,ID,Modified)' ; // this will only load these columns to the object
operations.getListItemByCAMLAsync("ListName", qr, 'Include(Title,ID)').done(function (items) {
    var listEnumerator = items.getEnumerator();
    var i = 0;
    while (listEnumerator.moveNext()) {

        var current = listEnumerator.get_current();
        alert (current.get_item("ID"));        
        alert (current.get_item("Title"));        

    }
}).fail(function () { alert("Error") });

When your are developing, you need to pay close attention to CAML query and include section. It will have high probability to get wrong syntax.