SharePoint2013 - CRUDQ operations using JavaScript Client Object Model

This article is about How to use SharePoint 2013 Client Object Model in Efficiently in JavaScript perform CRUD and Query operations.

One thing that must be noted is SharePoint 2013 supports HTML5 that means we have much more capabilities in this version for client side processing.

Writing Good code in JavaScript is as much important as writing the code behind specially for a big application with lots of functionality that are easily performed on client side.

here is the script that interacts with a SharePoint List

* Prefer to put such scripts in _layouts directory for performance and caching

---

<script type="text/javascript">

    "use strict";

    var MSolutions = window.MSolutions || {};

    MSolutions.Jsom = MSolutions.Jsom || {};

    MSolutions.Jsom.Task = function () {

        var deferreds = new Array(),

            create = function (listName, taskTitle) {

                deferreds[deferreds.length] = $.Deferred();

                var ctx = new SP.ClientContext.get_current();

                var list = ctx.get_web().get_lists().getByTitle(listName);

                ctx.load(list);

                var listItemCreationInfo = new SP.ListItemCreationInformation();

                this.newItem = list.addItem(listItemCreationInfo);

                this.newItem.set_item("Title", taskTitle);

                this.newItem.update();

                ctx.load(this.newItem);

                ctx.executeQueryAsync(

                    Function.createDelegate(this,

                        function () { deferreds[deferreds.length - 1].resolve(this.newItem); }),

                    Function.createDelegate(this,

                        function (sender, args) { deferreds[deferreds.length - 1].reject(sender, args); }));

                return deferreds[deferreds.length - 1].promise();

            };

            readMyTasks = function (listName) {

                deferreds[deferreds.length] = $.Deferred();

                var ctx = new SP.ClientContext.get_current();

                var list = ctx.get_web().get_lists().getByTitle(listName);

                var myTaskQuery = new SP.CamlQuery();

                myTaskQuery.set_viewXml('<View><Query><Where><Eq><FieldRef Name="Author" /> <Value Type="Integer"><UserID Type="Integer"/></Value></Eq></Where></Query></View>');

                myTasksItems = list.getItems(myTaskQuery);

                ctx.load(myTasksItems, 'Include(ID,Title)');

                ctx.executeQueryAsync(

                        Function.createDelegate(this,

                            function () { deferreds[deferreds.length - 1].resolve(myTasksItems); }),

                        Function.createDelegate(this,

                            function (sender, args) { deferreds[deferreds.length - 1].reject(sender, args); }));

                return deferreds[deferreds.length - 1].promise();

            };

            removeTaskById = function (listName, taskId) {

                deferreds[deferreds.length] = $.Deferred();

                var ctx = new SP.ClientContext.get_current();

                var list = ctx.get_web().get_lists().getByTitle(listName);

                myTasksItem = list.getItemById(taskId);

                myTasksItem.deleteObject();

                ctx.executeQueryAsync(

                        Function.createDelegate(this,

                            function () { deferreds[deferreds.length - 1].resolve(); }),

                        Function.createDelegate(this,

                            function (sender, args) { deferreds[deferreds.length - 1].reject(sender, args); }));

                return deferreds[deferreds.length - 1].promise();

            };

        //public interface

        return {

            create: create,

            readMyTasks: readMyTasks,

            removeTaskById: removeTaskById

        }

    }();

</script>