Getting List items In SharePoint Hosted App

In this blog, you will learn about SharePoint Hosted apps getting list items.

Step 1: Create a list .


Step 2: Open Visual Studio and add SharePoint Add-in (Sharepoint app name changed to Add-in) .



Step 3: Edit App.js file with the code given below and add Div tag in ContentPlaceHolderID to display the query result.

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('TestList');
    var caml = new SP.CamlQuery();
    caml.set_viewXml("<View><Query><Where><BeginsWith><FieldRef Name='Title' /><Value Type='Text'>N</Value></BeginsWith></Where></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 TestList that start with "N": <br><br>';
    while (enumerator.moveNext()) {
        var listItem = enumerator.get_current();
        myText += 'Title: ' + listItem.get_item('Title') + '<br>';
        myText += 'ID: ' + listItem.get_id() + '<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 4: Before deploying the code, change the permission, given below:



Step 5: Deploy the code and Trust the app.

Step 6: See the result, given below: