First create SharePoint Hosted App using Visual Studio 2012 and add below given html control in default.aspx page
< div>
< p id="message1">
< !-- The following content will be replaced with the user name when you run the app - see App.js -->
initializing...
< /p>
< /div>
< div>
< p id="percentHTML">
< !-- The following content will be replaced with the user name when you run the app - see App.js -->
initializing..................
< /p>
< /div>
< p id="hostWebURL">< /p>
< p id="appWebURL">< /p>
< div id="message">
< /div>
< p id="currentWebText">< /p>
< ul id="listTree">
< /ul>
< div id="addItemPanel" style='display: none'>
Item Title:
< input type="text" name="itemTitle" title="Item Title" id="itemTitle" />
< a href="javascript:createListItem()">Create List Item< /a>
< /div>
Replace App.js file as given below
var context;
var web;
var hostWeb;
var user;
var hostweburl;
var appweburl;
var appContextSite;
var list;
var collList;
var appContextSite;
function getUrl() {
hostweburl = getQueryStringParameter("SPHostUrl");
appweburl = getQueryStringParameter("SPAppWebUrl");
hostweburl = decodeURIComponent(hostweburl);
appweburl = decodeURIComponent(appweburl);
$("#hostWebURL").text("Host Web URL: " + hostweburl);
$("#appWebURL").text("App Web URL: " + appweburl);
}
function getQueryStringParameter(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];
}
}
// This code runs when the DOM is ready and creates a context object which is needed to use the SharePoint object model
$(document).ready(function () {
context = SP.ClientContext.get_current();
web = context.get_web();
//getUserName();
getUrl();
//getHostweb();
retrieveWebSiteProperties();
});
function getHostweb() {
var appContextSite = new SP.AppContextSite(
context,
hostweburl
);
hostWeb = appContextSite.get_web();
context.load(hostWeb);
context.executeQueryAsync(onSuccess, onFail);
}
function onSuccess() {
$('#hostWebInfo').text("Host web title through api " + hostWeb.get_title());
}
// This function is executed if the above call fails
function onFail(sender, args) {
alert(args.get_message());
}
// This function prepares, loads, and then executes a SharePoint query to get the current users information
function getUserName() {
user = web.get_currentUser();
context.load(web, 'Title');
context.load(user);
context.executeQueryAsync(onGetUserNameSuccess, onGetUserNameFail);
}
// This function is executed if the above OM call is successful
// It replaces the contents of the 'helloString' element with the user name
function onGetUserNameSuccess() {
$('#message').text('Hello ' + user.get_title());
$('#currentWebText').text("Current Web Context: " + web.get_title());
}
// This function is executed if the above call fails
function onGetUserNameFail(sender, args) {
alert('Failed to get user name. Error:' + args.get_message());
}
function retrieveWebSiteProperties() {
appContextSite = new SP.AppContextSite(
context,
hostweburl
);
hostWeb = appContextSite.get_web();
context.load(hostWeb, 'Title', 'Created');
collList = hostWeb.get_lists();
context.load(collList, 'Include(Title, Id)');
context.executeQueryAsync(
Function.createDelegate(this, onQuerySucceeded),
Function.createDelegate(this, onQueryFailed)
);
}
function onQuerySucceeded(sender, args) {
var message = 'Title: ' + hostWeb.get_title() +
' Created: ' + hostWeb.get_created();
document.getElementById("message").innerText = message;
//display lists
var listEnumerator = collList.getEnumerator();
var listTree = document.getElementById("listTree");
while (listEnumerator.moveNext()) {
var oList = listEnumerator.get_current();
var listTitle = oList.get_title();
var li = document.createElement("li");
li.id = listTitle;
li.appendChild(document.createTextNode(listTitle));
listTree.appendChild(li);
if (listTitle == "CustomList1") {
getListItems();
}
}
}
function getListItems() {
//alert('getting list items');
//var oList = clientContext.get_web().get_lists().getByTitle('CustomList1');
var oList = appContextSite.get_web().get_lists().getByTitle('CustomList1');
var camlQuery = new SP.CamlQuery();
camlQuery.set_viewXml(
'< View>< Query>< Where>< Geq>< FieldRef Name=\'ID\'/>' +
'< Value Type=\'Number\'>1< /Value>< /Geq>< /Where>< /Query>' +
'< RowLimit>25< /RowLimit>< /View>'
);
this.collListItem = oList.getItems(camlQuery);
context.load(collListItem);
context.executeQueryAsync(
Function.createDelegate(this, onItemsGetQuerySucceeded),
Function.createDelegate(this, onQueryFailed)
);
}
function onQueryFailed(sender, args) {
console.log('Request failed. ' + args.get_message() +
'\n' + args.get_stackTrace());
}
function createListItem() {
//var oList = clientContext.get_web().get_lists().getByTitle('CustomList1');
var oList = appContextSite.get_web().get_lists().getByTitle('CustomList1');
var itemCreateInfo = new SP.ListItemCreationInformation();
this.oListItem = oList.addItem(itemCreateInfo);
oListItem.set_item('Title', document.getElementById("itemTitle").value);
oListItem.update();
context.load(oListItem);
context.executeQueryAsync(
Function.createDelegate(this, this.onItemCreateQuerySucceeded),
Function.createDelegate(this, this.onQueryFailed)
);
}
function onItemsGetQuerySucceeded() {
var listItemEnumerator = collListItem.getEnumerator();
var cl = document.getElementById("CustomList1");
while (cl.childNodes.length > 0) {
cl.removeChild(cl.childNodes[0]);
}
cl.textContent = cl.id;
var ul = document.createElement("ul");;
while (listItemEnumerator.moveNext()) {
var oListItem = listItemEnumerator.get_current();
var li = document.createElement("li");
li.appendChild(document.createTextNode("Title:" + oListItem.get_item('Title') + " Title: " + oListItem.get_item('Title')));
ul.appendChild(li);
}
cl.appendChild(ul);
var div = document.createElement("div");
div.innerHTML = document.getElementById("addItemPanel").innerHTML;
cl.appendChild(div);
}
function onItemCreateQuerySucceeded() {
//alert('Item created: ' + oListItem.get_id());
getListItems();
}
