SharePoint Hosted App Data Manipulation With Office 365 Using Custom JavaScript Library - Part 2

Previously, we discussed about part 1 of the series. 

Here are the steps for part 2 of the series, 

 

Step 1: User Interface Design to perform CRUD operation with Office 365 SharePoint List.

In order to continue further I will add new files into project solution as in the following screenshot,

Source Code: To generate user interface we need html controls on page. Please refer the following code in order to create above user interface.

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

    <%@ 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">
                    <SharePoint:ScriptLink Name="sp.js" runat="server" OnDemand="true" LoadAfterUI="true" Localizable="false" />
                    <script src="../Scripts/jquery-1.8.2.js" type="text/javascript"></script>
                    <script src="../Scripts/AdvanceLibrary.js" type="text/javascript"></script>

                    <link href="../Content/App.css" rel="stylesheet" />
                </asp:Content>

                <asp:Content ContentPlaceHolderID="PlaceHolderMain" runat="server">
                    <WebPartPages:WebPartZone runat="server" FrameType="TitleBarOnly" ID="full" Title="loc:full" />

                    <div>
                        <div class="bodyLeft">
                            <div>
                                List Name :
                                <input type="text" id="txtListName" />
                            </div>
                            <hr />
                            <div>
                                <h2><b>List Creation</b></h2>
                                <a href="#" onclick="Wingtip.JSOMHostWebCollections.HWCreateList()">Create List</a>
                            </div>
                            <hr />
                            <div>
                                <h2><b>Add List Item</b></h2>
                                <%-- <br />

                List Name :
                <input type="text" id="txtExistingListName" />--%>

                                    <table>
                                        <tr>
                                            <th>Field Name</th>
                                            <th>Field Value</th>
                                        </tr>
                                        <tr>
                                            <td>
                                                <input type="text" id="Input1" />
                                            </td>
                                            <td>
                                                <input type="text" id="Val1" />
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <input type="text" id="Input2" />
                                            </td>
                                            <td>
                                                <input type="text" id="Val2" />
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <input type="text" id="Input3" />
                                            </td>
                                            <td>
                                                <input type="text" id="Val3" />
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <input type="text" id="Input4" />
                                            </td>
                                            <td>
                                                <input type="text" id="Val4" />
                                            </td>
                                        </tr>
                                    </table>
                                    <br />
                                    <a href="#" onclick="Wingtip.JSOMHostWebCollections.HWCreateListItem()">Add List Data</a>
                            </div>
                            <hr />
                            <div>
                                <h2><b>Update List Item</b></h2>
                                <%-- <br />

                List Name :
                <input type="text" id="txUpdationList" />--%>

                                    <table>
                                        <tr>
                                            <th>Field Name</th>
                                            <th>Field Value</th>
                                        </tr>
                                        <tr>
                                            <td>
                                                <input type="text" id="UpdateField1" />
                                            </td>
                                            <td>
                                                <input type="text" id="UpdateVal1" />
                                            </td>
                                            <td>Where ID =
                                                <input type="text" id="txtUpdateID" />
                                            </td>
                                        </tr>
                                    </table>
                                    <a href="#" onclick="Wingtip.JSOMHostWebCollections.HWUpdateListItem()">Update List Data</a>
                            </div>
                            <hr />
                            <div>
                                <h2><b>Delete List Item</b></h2>
                                <%-- <br />

                List Name :
                <input type="text" id="txtListDeletion" />--%>
                                    Where ID =
                                    <input type="text" id="txtDeletionID" />

                                    <br />
                                    <a href="#" onclick="Wingtip.JSOMHostWebCollections.HWDeleteListItem()">Delete List Data</a>
                            </div>

                        </div>

                        <div class="bodyRight">
                            <div id="message"></div>
                            <div id="ListData"></div>
                        </div>
                    </div>
          </asp:Content>

Step 2: Read List Data using custom JavaScript Library.

var clientContext;
var factory;
var appContextSite;
var web;

var collList;
var itemCreateInfo;
var param1, param2, param3;
var oList, targetList, listFields, oListItem, oField, itemId;

var ExsitingListNameVal;
var targetList;

window.Wingtip = window.Wingtip || {}

Wingtip.JSOMHostWebCollections = function()
{

    LoadlayoutsJS = function()
    {

        //debugger
        hostweburl = decodeURIComponent(Wingtip.JSOMHostWebCollections.QSParameter("SPHostUrl"));
        appweburl = decodeURIComponent(Wingtip.JSOMHostWebCollections.QSParameter("SPAppWebUrl"));

        var Sessionhostweburl = sessionStorage.getItem("hostweburl");
        var Sessionappweburl = sessionStorage.getItem("appweburl");

        if (Sessionhostweburl == null || Sessionappweburl == null)
        {
            sessionStorage.setItem("hostweburl", hostweburl);
            sessionStorage.setItem("appweburl", appweburl);
        }

        if (hostweburl == null || appweburl == null || hostweburl == 'undefined' || appweburl == 'undefined')
        {
            hostweburl = sessionStorage.getItem("hostweburl");
            appweburl = sessionStorage.getItem("appweburl");
        }

        var scriptbase = hostweburl + "/_layouts/15/";

        $.getScript(scriptbase + "SP.Runtime.js",
            function() {
                $.getScript(scriptbase + "SP.js",
                    function() {
                        $.getScript(scriptbase + "SP.RequestExecutor.js", Wingtip.JSOMHostWebCollections.HWLoadClientContext);
                    }
                );
            });
    }

    getQueryStringParameter = function(paramToRetrieve)
    {
        //debugger
        try {

            var params =
                document.URL.split("?")[1].split("&");
            var strParams = "";
            for (var i = 0; i < params.length; i = i + 1)
            {
                var singleParam = params[i].split("=");
                if (singleParam[0] == paramToRetrieve)
                    return singleParam[1];
            }
        } catch (ex) {

        }

    }

    LoadClientContext = function()
    {

        //debugger
        clientContext = new SP.ClientContext(appweburl);
        factory = new SP.ProxyWebRequestExecutorFactory(appweburl);
        clientContext.set_webRequestExecutorFactory(factory);
        appContextSite = new SP.AppContextSite(clientContext, hostweburl);

        web = appContextSite.get_web();
        clientContext.load(web);

        Wingtip.JSOMHostWebCollections.HWReadListData();
    }

    ReadListData = function()
    {

        debugger
        var oList = web.get_lists().getByTitle("Book");

        var camlQuery = new SP.CamlQuery();
        camlQuery.set_viewXml('<View><RowLimit></RowLimit>10</View>');
        var collListItem = oList.getItems(camlQuery);

        //clientContext.load(collListItem);
        clientContext.load(collListItem, 'Include(ID,BookName,BookAuthor,BookPrice,BookVersion)');

        clientContext.executeQueryAsync(
            Function.createDelegate(this, onQuerySucceeded),
            Function.createDelegate(this, onQueryFailed)
        );

        function onQuerySucceeded(sender, args)
      {

            var innerHtml = "<tr><td class='ListTH'>ID</td><td class='ListTH'>Book Name</td><td class='ListTH'>Book Author</td><td class='ListTH'>Book Price</td><td class='ListTH'>Book Version</td></tr>";

            debugger
            var listItemInfo = '';
            var listItemEnumerator = collListItem.getEnumerator();

            while (listItemEnumerator.moveNext())
            {

                var oListItem = listItemEnumerator.get_current();

                var ID = oListItem.get_item('ID');
                var InputData1 = oListItem.get_item('BookName');
                var InputData2 = oListItem.get_item('BookAuthor');
                var InputData3 = oListItem.get_item('BookPrice');
                var InputData4 = oListItem.get_item('BookVersion');

                innerHtml += "<tr class='ListTR'><td>" + ID + "</td><td>" + InputData1 + "</td><td>" + InputData2 + "</td><td>" + InputData3 + "</td><td>" + InputData4 + "</td></tr>";
                //listItemInfo += '\nID: ' + oListItem.get_id() + '\nTitle: ' + oListItem.get_item('Title') +  '\nBody: ' + oListItem.get_item('Input1');
            }

            $("#ListData").html(innerHtml);
            //alert(listItemInfo.toString());
        }

        function onQueryFailed(sender, args)
      {
            alert('Request failed. ' + args.get_message() +
                '\n' + args.get_stackTrace());
        }

    }

    //public interface
    return
    {

        HWLoadlayoutsJS: LoadlayoutsJS,
        QSParameter: getQueryStringParameter,
        HWLoadClientContext: LoadClientContext,
        HWCreateList: CreateList,
        HWCreateListItem: CreateListItem,
        HWUpdateListItem: UpdateListItem,
        HWDeleteListItem: DeleteListItem,
        HWClearAllTextBox: ClearAllTextBox,
        HWReadListData: ReadListData,
        HWEmpty: Empty
    }

}();

$(document).ready(function()
{

    //Load Out Of Box JS file for List Operation
    Wingtip.JSOMHostWebCollections.HWLoadlayoutsJS();

});

 

Output

Step 3: Add List Item using JavaScript Object model as in the following,

CreateListItem = function()
{

    debugger
    //var ListNameVal = $(txtExistingListName).val();
    var ListNameVal = $(txtListName).val();

    if (ListNameVal == "")
    {
        alert("Please Enter List Name");
        return;
    }

    var list = web.get_lists();
    var targetList = list.getByTitle(ListNameVal);
    var itemCreateInfo = new SP.ListItemCreationInformation();
    oListItem = targetList.addItem(itemCreateInfo);

    var Input1Val = $(Input1).val();
    var Input2Val = $(Input2).val();
    var Input3Val = $(Input3).val();
    var Input4Val = $(Input4).val();

    var Val1Val = $(Val1).val();
    var Val2Val = $(Val2).val();
    var Val3Val = $(Val3).val();
    var Val4Val = $(Val4).val();


    if (Input1Val != "" && Val1Val != "")
        oListItem.set_item(Input1Val, Val1Val);


    if (Input2Val != "" && Val2Val != "")
        oListItem.set_item(Input2Val, Val2Val);

    if (Input3Val != "" && Val3Val != "")
        oListItem.set_item(Input3Val, Val3Val);

    if (Input4Val != "" && Val4Val != "")
        oListItem.set_item(Input4Val, Val4Val);

    oListItem.update();
    clientContext.load(oListItem);

    clientContext.executeQueryAsync(
        Function.createDelegate(this, CreateListItemSucceeded),
        Function.createDelegate(this, CreateListItemFailed)
    );

    function CreateListItemSucceeded()
  {
        alert('Item Created Successfully : List Item ID -> ' + oListItem.get_id());
    }

    function CreateListItemFailed(sender, args)
    {
        alert('Request failed. ' + args.get_message() +
            '\n' + args.get_stackTrace());
    }

}

 

Output

Item Insertion confirmation.

New Record added into list now.

Step 4: Update List item with respect to list item ID value. When you refer UI in order to update list item, we need to provide ID value.

UpdateListItem = function(ListName, Input1, Val1)
{

    debugger

    //var ListNameVal = $(txUpdationList).val();
    var ListNameVal = $(txtListName).val();

    if (ListNameVal == "")
    {
        alert("Please Enter List Name");
        return;
    }

    var Input1Val = $(UpdateField1).val();
    var Val1Val = $(UpdateVal1).val();

    var list = web.get_lists();
    oList = list.getByTitle(ListNameVal);

    oListItem = oList.getItemById($(txtUpdateID).val());
    oListItem.set_item(Input1Val, Val1Val);
    oListItem.update();

    clientContext.executeQueryAsync(
        Function.createDelegate(this, UpdateListItemSucceeded),
        Function.createDelegate(this, UpdateListItemFailed)
    );

    function UpdateListItemSucceeded()
  {
        alert('Item Updated Successfully!');
    }

    function UpdateListItemFailed(sender, args)
  {
        alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
    }
}

 

Output 

Item update get confirmation now.

Step 5: Deletion of list item we can use the following code,

DeleteListItem = function(ListName, ItemID)
{

    debugger

    //var ListNameVal = $(txtListDeletion).val();
    var ListNameVal = $(txtListName).val();

    if (ListNameVal == "")
    {
        alert("Please Enter List Name");
        return;
    }

    var Input1Val = $(txtDeletionID).val();

    var list = web.get_lists();
    oList = list.getByTitle(ListNameVal);

    oListItem = oList.getItemById(Input1Val);
    oListItem.deleteObject();

    clientContext.executeQueryAsync(
        Function.createDelegate(this, deleteListItemSucceeded),
        Function.createDelegate(this, deleteListItemFailed)
    );

    function deleteListItemSucceeded()
  {
        alert('Item Deleted Successfully');
    }

    function deleteListItemFailed(sender, args)
  {
        alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
    }
}

 

Output

Final Output

Step 6: Style sheet code in order to make UI more effective.

/* Place custom styles below */
.bodyLeft
{
    float: left;
    padding: 15 px 15 px 10 px 15 px;
    border: 1 px solid black;
}

.bodyRight
{
    float: left;
    padding: 15 px 5 px 5 px 25 px;
}

table
{
    border - collapse: collapse;
    width: 100 % ;
}

th, td
{
    text - align: left;
    padding: 8 px;
}

.ListTR
{
    background - color: #f2f2f2
}

.ListTH
{
    background - color: #4CAF50;
    color: white;
}

 

Step 7: JavaScript complete source code.

var clientContext;
var factory;
var appContextSite;
var web;

var collList;
var itemCreateInfo;
var param1, param2, param3;
var oList, targetList, listFields, oListItem, oField, itemId;

var ExsitingListNameVal;
var targetList;

window.Wingtip = window.Wingtip || {}

Wingtip.JSOMHostWebCollections = function()
{

    LoadlayoutsJS = function()
    {

        //debugger
        hostweburl = decodeURIComponent(Wingtip.JSOMHostWebCollections.QSParameter("SPHostUrl"));
        appweburl = decodeURIComponent(Wingtip.JSOMHostWebCollections.QSParameter("SPAppWebUrl"));

        var Sessionhostweburl = sessionStorage.getItem("hostweburl");
        var Sessionappweburl = sessionStorage.getItem("appweburl");

        if (Sessionhostweburl == null || Sessionappweburl == null)
        {
            sessionStorage.setItem("hostweburl", hostweburl);
            sessionStorage.setItem("appweburl", appweburl);
        }

        if (hostweburl == null || appweburl == null || hostweburl == 'undefined' || appweburl == 'undefined') {
            hostweburl = sessionStorage.getItem("hostweburl");
            appweburl = sessionStorage.getItem("appweburl");
        }

        var scriptbase = hostweburl + "/_layouts/15/";

        $.getScript(scriptbase + "SP.Runtime.js",
            function() {
                $.getScript(scriptbase + "SP.js",
                    function() {
                        $.getScript(scriptbase + "SP.RequestExecutor.js", Wingtip.JSOMHostWebCollections.HWLoadClientContext);
                    }
                );
            });
    }

    getQueryStringParameter = function(paramToRetrieve)
    {
        //debugger
        try {

            var params =
                document.URL.split("?")[1].split("&");
            var strParams = "";
            for (var i = 0; i < params.length; i = i + 1)
            {
                var singleParam = params[i].split("=");
                if (singleParam[0] == paramToRetrieve)
                    return singleParam[1];
            }
        } catch (ex) {

        }

    }

    LoadClientContext = function()
    {

        //debugger
        clientContext = new SP.ClientContext(appweburl);
        factory = new SP.ProxyWebRequestExecutorFactory(appweburl);
        clientContext.set_webRequestExecutorFactory(factory);
        appContextSite = new SP.AppContextSite(clientContext, hostweburl);

        web = appContextSite.get_web();
        clientContext.load(web);

        Wingtip.JSOMHostWebCollections.HWReadListData();
    }

    ReadListData = function()
    {

        debugger
        var oList = web.get_lists().getByTitle("Book");

        var camlQuery = new SP.CamlQuery();
        camlQuery.set_viewXml('<View><RowLimit></RowLimit>10</View>');
        var collListItem = oList.getItems(camlQuery);

        //clientContext.load(collListItem);
        clientContext.load(collListItem, 'Include(ID,BookName,BookAuthor,BookPrice,BookVersion)');

        clientContext.executeQueryAsync(
            Function.createDelegate(this, onQuerySucceeded),
            Function.createDelegate(this, onQueryFailed)
        );

        function onQuerySucceeded(sender, args)
      {

            var innerHtml = "<tr><td class='ListTH'>ID</td><td class='ListTH'>Book Name</td><td class='ListTH'>Book Author</td><td class='ListTH'>Book Price</td><td class='ListTH'>Book Version</td></tr>";

            debugger
            var listItemInfo = '';
            var listItemEnumerator = collListItem.getEnumerator();

            while (listItemEnumerator.moveNext())
            {

                var oListItem = listItemEnumerator.get_current();

                var ID = oListItem.get_item('ID');
                var InputData1 = oListItem.get_item('BookName');
                var InputData2 = oListItem.get_item('BookAuthor');
                var InputData3 = oListItem.get_item('BookPrice');
                var InputData4 = oListItem.get_item('BookVersion');

                innerHtml += "<tr class='ListTR'><td>" + ID + "</td><td>" + InputData1 + "</td><td>" + InputData2 + "</td><td>" + InputData3 + "</td><td>" + InputData4 + "</td></tr>";
                //listItemInfo += '\nID: ' + oListItem.get_id() + '\nTitle: ' + oListItem.get_item('Title') +  '\nBody: ' + oListItem.get_item('Input1');
            }

            $("#ListData").html(innerHtml);
            //alert(listItemInfo.toString());
        }

        function onQueryFailed(sender, args)
      {
            alert('Request failed. ' + args.get_message() +
                '\n' + args.get_stackTrace());
        }

    }

    CreateList = function()
    {

        //debugger
        var listCreationInfo = new SP.ListCreationInformation();

        var ListNameVal = $(txtListName).val();
        //var ListNameVal = ListName;
        listCreationInfo.set_title(ListNameVal);
        listCreationInfo.set_templateType(SP.ListTemplateType.announcements);

        oList = web.get_lists().add(listCreationInfo);
        clientContext.load(oList);

        oList.set_description(ListNameVal + 'created via JSOM Model ...');
        oList.update();

        clientContext.executeQueryAsync(
            Function.createDelegate(this, SPHostWebCreateListSuccessHandler),
            Function.createDelegate(this, SPHostWebCreateListErrorHandler)
        );

        function SPHostWebCreateListSuccessHandler()
      {
            var result = oList.get_title() + ' List created successfully.';
            alert(result);
        }

        function SPHostWebCreateListErrorHandler(sender, args)
      {
            alert('Request failed. ' + args.get_message() +
                '\n' + args.get_stackTrace());
        }
    }

    CreateListItem = function()
    {

        debugger
        //var ListNameVal = $(txtExistingListName).val();
        var ListNameVal = $(txtListName).val();

        if (ListNameVal == "") {
            alert("Please Enter List Name");
            return;
        }

        var list = web.get_lists();
        var targetList = list.getByTitle(ListNameVal);
        var itemCreateInfo = new SP.ListItemCreationInformation();
        oListItem = targetList.addItem(itemCreateInfo);

        var Input1Val = $(Input1).val();
        var Input2Val = $(Input2).val();
        var Input3Val = $(Input3).val();
        var Input4Val = $(Input4).val();

        var Val1Val = $(Val1).val();
        var Val2Val = $(Val2).val();
        var Val3Val = $(Val3).val();
        var Val4Val = $(Val4).val();


        if (Input1Val != "" && Val1Val != "")
            oListItem.set_item(Input1Val, Val1Val);


        if (Input2Val != "" && Val2Val != "")
            oListItem.set_item(Input2Val, Val2Val);

        if (Input3Val != "" && Val3Val != "")
            oListItem.set_item(Input3Val, Val3Val);

        if (Input4Val != "" && Val4Val != "")
            oListItem.set_item(Input4Val, Val4Val);

        oListItem.update();
        clientContext.load(oListItem);

        clientContext.executeQueryAsync(
            Function.createDelegate(this, CreateListItemSucceeded),
            Function.createDelegate(this, CreateListItemFailed)
        );

        function CreateListItemSucceeded()
      {
            alert('Item Created Successfully : List Item ID -> ' + oListItem.get_id());
        }

        function CreateListItemFailed(sender, args)
      {
            alert('Request failed. ' + args.get_message() +
                '\n' + args.get_stackTrace());
        }

    }

    UpdateListItem = function(ListName, Input1, Val1)
    {

        debugger

        //var ListNameVal = $(txUpdationList).val();
        var ListNameVal = $(txtListName).val();

        if (ListNameVal == "")
        {
            alert("Please Enter List Name");
            return;
        }

        var Input1Val = $(UpdateField1).val();
        var Val1Val = $(UpdateVal1).val();

        var list = web.get_lists();
        oList = list.getByTitle(ListNameVal);

        oListItem = oList.getItemById($(txtUpdateID).val());
        oListItem.set_item(Input1Val, Val1Val);
        oListItem.update();

        clientContext.executeQueryAsync(
            Function.createDelegate(this, UpdateListItemSucceeded),
            Function.createDelegate(this, UpdateListItemFailed)
        );

        function UpdateListItemSucceeded()
      {
            alert('Item Updated Successfully!');
        }

        function UpdateListItemFailed(sender, args)
      {
            alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
        }
    }

    DeleteListItem = function(ListName, ItemID)
    {

        debugger

        //var ListNameVal = $(txtListDeletion).val();
        var ListNameVal = $(txtListName).val();

        if (ListNameVal == "")
        {
            alert("Please Enter List Name");
            return;
        }

        var Input1Val = $(txtDeletionID).val();

        var list = web.get_lists();
        oList = list.getByTitle(ListNameVal);

        oListItem = oList.getItemById(Input1Val);
        oListItem.deleteObject();

        clientContext.executeQueryAsync(
            Function.createDelegate(this, deleteListItemSucceeded),
            Function.createDelegate(this, deleteListItemFailed)
        );

        function deleteListItemSucceeded()
      {
            alert('Item Deleted Successfully');
        }

        function deleteListItemFailed(sender, args)
      {
            alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
        }
    }

    ClearAllTextBox = function()
    {

        $('input[type=text]').each(function()
        {
            $(this).val('');
        })
    }

    function Empty()
  {
        console('Hello');
    }

    //public interface
    return {

        HWLoadlayoutsJS: LoadlayoutsJS,
        QSParameter: getQueryStringParameter,
        HWLoadClientContext: LoadClientContext,
        HWCreateList: CreateList,
        HWCreateListItem: CreateListItem,
        HWUpdateListItem: UpdateListItem,
        HWDeleteListItem: DeleteListItem,
        HWClearAllTextBox: ClearAllTextBox,
        HWReadListData: ReadListData,
        HWEmpty: Empty
    }

}();

$(document).ready(function()
    {

    //Load Out Of Box JS file for List Operation
    Wingtip.JSOMHostWebCollections.HWLoadlayoutsJS();

});