In last post (Step by step guide to create “SharePointHosted Add-In” in SharePoint Online (Office 365)), I created a basic SharePoint
hosted Add-In as shown below.
Now, I’ll add logic to this Add-In to read data from a
SharePoint list (VendorList) as shown below.
Step 1- Open Default.aspx file and add new div as shown
below.
Step 2- Open App.js file. Replace code in js file with code
given below.
Changes in App.js file
var Items = null;
'use
strict';
var listItems;
var hostweburl = decodeURIComponent(getQueryStringParameter('SPHostUrl'));
var appweburl = decodeURIComponent(getQueryStringParameter('SPAppWebUrl'));
$(document).ready(function () {
SP.SOD.executeFunc('sp.js', 'SP.ClientContext', ListItems)
});
function ListItems() {
var context = new
SP.ClientContext(appweburl);
var ContextSite = new SP.AppContextSite(context, hostweburl);
var web = ContextSite.get_web();
context.load(web);
var list = web.get_lists().getByTitle('VendorList');
var caml = new SP.CamlQuery();
caml.set_viewXml("<View><Query></Query></View>"); // U can change the query for
getting desired result
Items = list.getItems(caml);
context.load(Items);
context.executeQueryAsync(onSucceededCallback, onFailedCallback);
}
function onSucceededCallback(sender, args) {
var enumerator = Items.getEnumerator();
var myText = 'Items in VendorList:
<br><br>';
while (enumerator.moveNext()) {
var listItem = enumerator.get_current();
myText += 'Title: ' + listItem.get_item('Title') + '<br>';
myText += 'Address: ' + listItem.get_item('Address') + '<br><br>';
}
myDiv.innerHTML = myText;
}
function onFailedCallback(sender, args) {
var myText = '<p>The request failed:
<br>';
myText += 'Message:
' + args.get_message() + '<br>';
myDiv.innerHTML = myText;
}
function getQueryStringParameter(paramToRetrieve) {
var params = document.URL.split("?")[1].split("&");
for (var i = 0; i
< params.length; i = i + 1) {
var singleParam = params[i].split("=");
if (singleParam[0] == paramToRetrieve) return singleParam[1];
}
}
Step 3 – Deploy your Add-In after all changes.
Step 4- You may get below error as your Add-In don’t have
enough permissions.
Step 5- For simplicity we are providing Full Control at Site
Collection level. You can also provide only Read access.
Step 6- Now deploy Add-In again and you’ll get below screen.
Step 7- Trust Add-In by clicking ‘Trust It’ button.
Here is the Add-In with data from VendorList
