SharePoint Hosted App that Does CRUD-Q with REST, JavaScript, KnockoutJS, Q

SharePoint Hosted App that Does CRUD-Q with REST, JavaScript, KnockoutJS, Q.

1. Microsoft visual studio 2013 -> file -> project -> “RestClientSide”.

2. “RestClientSide” -> right click -> add -> new item -> select ‘List’ -> 

3. Open “CeoLsit” -> add below columns.

4. Go to “CeoList” -> “CeoListInstance” -> “Elements.xml” -> add below code.

<?xml version="1.0" encoding="utf-8"?>

<Elements xmlns="http://schemas.microsoft.com/sharepoint/">

  <ListInstance Title="CeoList" OnQuickLaunch="TRUE" TemplateType="10000" Url="Lists/CeoList" Description="My List Instance">

    <Data>

      <Rows>

        <Row>

          <Field Name="Title">John Doe</Field>

          <Field Name="TenureStartYear">1971</Field>

          <Field Name="TenureEndYear">1972</Field>

        </Row>

        <Row>

          <Field Name="Title">Bill Gates</Field>

          <Field Name="TenureStartYear">1975</Field>

          <Field Name="TenureEndYear">2000</Field>

        </Row>

        <Row>

          <Field Name="Title">Steve Ballmer</Field>

          <Field Name="TenureStartYear">2000</Field>

          <Field Name="TenureEndYear">Present</Field>

        </Row>

      </Rows>

    </Data>

  </ListInstance>

</Elements>

5. Install-Package KnockoutJS

6. Install-Package Q

7. Go to “Pages” -> open “Default.aspx” page and add below code.

<%-- The following 4 lines are ASP.NET directives needed when using SharePoint components --%>

<%@ Page Inherits="Microsoft.SharePoint.WebPartPages.WebPartPage, Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" MasterPageFile="~masterurl/default.master" Language="C#" %>

<%@ Register TagPrefix="Utilities" Namespace="Microsoft.SharePoint.Utilities" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>

<%@ Register TagPrefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>

<%@ Register TagPrefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>

<asp:Content ContentPlaceHolderID="PlaceHolderAdditionalPageHead" runat="server">

    <script type="text/javascript" src="../Scripts/knockout-3.4.2.js"></script>

    <script type="text/javascript" src="../Scripts/q.min.js"></script>

    <script type="text/javascript" src="../Scripts/jquery-1.9.1.min.js"></script>

    <SharePoint:ScriptLink Name="sp.js" runat="server" OnDemand="true" LoadAfterUI="true" Localizable="false" />

    <meta name="WebPartPageExpansion" content="full" />

    <link rel="Stylesheet" type="text/css" href="../Content/App.css" />

    <script type="text/javascript" src="../Scripts/App.js"></script>

</asp:Content>

<asp:Content ContentPlaceHolderID="PlaceHolderPageTitleInTitleArea" runat="server">

    Page Title

</asp:Content>

<asp:Content ContentPlaceHolderID="PlaceHolderMain" runat="server">

    <input type="button" disabled="disabled" value="refresh list" data-bind="click: getAllChiefExecutives" />&nbsp;

    <input type="button" disabled="disabled" value="appoint 3rd ceo" data-bind="click: addThirdCeo" />&nbsp;

    <input type="button" disabled="disabled" value="delete first person" data-bind="click: deleteFirstCeo" />

    <h1>Microsoft CEO's</h1>

    <table>

        <thead>

            <tr>

                <th>Name</th>

                <th>Tenure</th>

            </tr>

        </thead>

        <tbody data-bind="foreach: chiefExecutives">

            <tr>

                <td data-bind="text: Title"></td>

                <td><span data-bind="text: TenureStartYear"></span>- <span data-bind="    text: TenureEndYear"></span></td>

            </tr>

        </tbody>

    </table>

</asp:Content>

8. Go to “Scripts” -> open “App.js” page and add below code.

(function () {

    'use strict';

    var viewModel = function () {

        var self = this;

        self.chiefExecutives = ko.observableArray([]);

        self.getAllChiefExecutives = getAllChiefExecutives;

        self.addThirdCeo = addThirdCeo;

        self.deleteFirstCeo = deleteFirstCeo;

        function getAllChiefExecutives() {

            var endpoint = _spPageContextInfo.webAbsoluteUrl +

                '/_api/web/lists/getbytitle(\'CeoList\')/items?$select=Title,TenureStartYear,TenureEndYear&$orderby=TenureStartYear';

            var requestHeaders = {

                'Accept': 'application/json;odata=verbose'

            };

            return jQuery.ajax({

                url: endpoint,

                type: 'GET',

                headers: requestHeaders

            }).done(function (response) {

                self.chiefExecutives([]);

                self.chiefExecutives(response.d.results);

            });

        };

        function addThirdCeo() {

            var jobs = [];

            var totalCeos = self.chiefExecutives().length;

            var endpoint = self.chiefExecutives()[totalCeos - 1].__metadata.uri;

            var requestHeaders = {

                'Accept': 'application/json;odata=verbose',

                'Content-Type': 'application/json;odata=verbose',

                'X-RequestDigest': jQuery("#__REQUESTDIGEST").val(),

                'X-Http-Method': 'MERGE',

                'If-Match': self.chiefExecutives()[totalCeos - 1].__metadata.etag

            };

            var firstCeoUpdateData = {

                __metadata: { type: 'SP.Data.CeoListListItem' },

                TenureEndYear: '2014'

            };

            jobs.push(jQuery.ajax({

                url: endpoint,

                type: 'POST',

                headers: requestHeaders,

                data: JSON.stringify(firstCeoUpdateData),

                success: function (resonse) {

                    alert('second ceo updated');

                },

                fail: function (error) {

                    alert('error occurred updating second ceo: ' + error.message);

                }

            }));

            var endpoint = _spPageContextInfo.webAbsoluteUrl + '/_api/web/lists/getbytitle(\'CeoList\')/items';

            var requestHeaders = {

                'Accept': 'application/json;odata=verbose',

                'Content-Type': 'application/json;odata=verbose',

                'X-RequestDigest': jQuery("#__REQUESTDIGEST").val()

            };

            var thirdCeoUpdateData = {

                __metadata: { type: 'SP.Data.CeoListListItem' },

                Title: 'Satya Nadella',

                TenureStartYear: '2014',

                TenureEndYear: 'present'

            };

            jobs.push(jQuery.ajax({

                url: endpoint,

                type: 'POST',

                headers: requestHeaders,

                data: JSON.stringify(thirdCeoUpdateData),

                success: function (resonse) {

                    alert('third ceo created');

                },

                fail: function (error) {

                    alert('error occurred creating third ceo: ' + error.message);

                }

            }));

            Q.all(jobs)

                .then(function () {

                    self.getAllChiefExecutives();

                });

        }

        function deleteFirstCeo() {

            var jobs = [];

            var endpoint = self.chiefExecutives()[0].__metadata.uri;

            var requestHeaders = {

                'Accept': 'application/json;odata=verbose',

                'X-RequestDigest': jQuery("#__REQUESTDIGEST").val(),

                'If-Match': '*'

            };

            jobs.push(jQuery.ajax({

                url: endpoint,

                type: 'DELETE',

                headers: requestHeaders,

                success: function (resonse) {

                    alert('first person deleted');

                },

                fail: function (error) {

                    alert('error occurred deleting first person: ' + error.message);

                }

            }));

            Q.all(jobs)

                .then(function () {

                    self.getAllChiefExecutives();

                });

        }

    }

    jQuery(document).ready(function () {

        ko.applyBindings(new viewModel());

        jQuery('input[type="button"]').removeAttr('disabled');

    });

})();

9. Press “F5” to deploy and test.