You can either continue this article or use the below code in your own way.
Below are functions to perform CRUD Operations on List Items using JavaScript through SharePoint-Hosted Add-in. This code is embedded in App.js file.
var hostWebUrl;
var appWebUrl;
var ctx ;
var appCtxSite;
var web;
$(document).ready(function () {
hostWebUrl = decodeURIComponent(manageQueryStringParameter('SPHostUrl'));
appWebUrl = decodeURIComponent(manageQueryStringParameter('SPAppWebUrl'));
ctx = new SP.ClientContext(appWebUrl);
appCtxSite = new SP.AppContextSite(ctx, hostWebUrl);
web = appCtxSite.get_web();
deleteItem();
});
// Create a new Item in a List
function createListItem() {
var list = web.get_lists().getByTitle('My Contacts');
var itemInfo = new SP.ListItemCreationInformation();
this.newItem = list.addItem(itemInfo);
newItem.set_item('Title', 'Gupta');
newItem.set_item('FirstName', 'Rahul');
newItem.update();
ctx.load(newItem);
ctx.executeQueryAsync(
Function.createDelegate(this,this.onCreateListItemSuccess),
Function.createDelegate(this, this.onFail));
}
// Success method of createListItem
function onCreateListItemSuccess() {
alert('Item added successfully!');
}
// Update an Item of a List
function updateItem() {
var list = web.get_lists().getByTitle('My Contacts');
var listItem = list.getItemById(2);
listItem.set_item('Title', 'Mittal');
listItem.update();
ctx.load(listItem);
ctx.executeQueryAsync(
Function.createDelegate(this, this.onUpdateItemSuccess),
Function.createDelegate(this, this.onFail));
}
// Success methos of updateItem
function onUpdateItemSuccess() {
alert('Item Updated Successfully!');
}
// Delete an Item frm a List
function deleteItem() {
var list = web.get_lists().getByTitle('My Contacts');
var listItem = list.getItemById(2);
listItem.deleteObject();
ctx.executeQueryAsync(
Function.createDelegate(this, this.onDeleteItemSuccess),
Function.createDelegate(this, this.onFail));
}
// Success method of deleteItem
function onDeleteItemSuccess() {
alert('Item Deleted Successfully!');
}
// Retrieve all the list items
function getListItems() {
var list = web.get_lists().getByTitle("My Contacts");
var camlQuery = new SP.CamlQuery();
camlQuery.set_viewXml(
'<View><Query><Where><Geq><FieldRef Name=\'ID\'/>' +
'<Value Type=\'Number\'>1</Value></Geq></Where></Query>' +
'<Rowlimit>10</Rowlimit></View>');
this.itemColl = list.getItems(camlQuery);
ctx.load(this.itemColl);
ctx.executeQueryAsync(Function.createDelegate(this, this.onGetListItemsSuccess), Function.createDelegate(this, this.onFail));
}
// Success method of getListItems function
function onGetListItemsSuccess() {
var listItem = '';
var listEnumerator = this.itemColl.getEnumerator();
while (listEnumerator.moveNext()) {
var currentItem = listEnumerator.get_current();
listItem += '\nLast Name: ' + currentItem.get_item('Title') +
'\nFirst Name: ' + currentItem.get_item('FirstName');
}
alert(listItem.toString());
}
// function to manage the query string parameters and return SPHostURL or SPAppWebUrl as per the request.
function manageQueryStringParameter(paramToRetrieve) {
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];
}
}
}
// generic Fail method
function onFail() {
alert("Failed!" + arguments[1].get_message());
}
Akanksha's Blog 