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

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