Bel ons op 070 820 02 31

Ralph Noordanus


30 september 2012

SharePoint App accessing data from host web

The SharePoint app can access the host web by using the standard provided SharePoint web services. When the App first launches, SharePoint provides three values in the query string named: SPHostUrl, SPAppWebUrl and SPLanguage.

By using the first two we can use a JavaScript to access the host web services. The only thing to get this working is to ask the app installer to provide the permissions.

These App permissions can be set in the AppManifest.xml, using the provided editor in Visual Studio 2012. When the permissions are set, please do only ask for permissions you really need.


After a user installed the App, the user will be asked to trust the App. If the user decide not to trust the App, the App will still be installed and users can launch the App. This results in a permissions issue which must be dealt with when the App wants to access the resources.

​When the correct permission requests are set, we can use the SPHostUrl and SPAppWebUrl to connect to the SharePoint web services. This code snipit below gets the query parameters and loads the necessary SharePoint JavaScript files.

var web; var hostweburl; var appweburl;  function sharePointReady() {    hostweburl =         decodeURIComponent(             getQueryStringParameter('SPHostUrl')     );    appweburl =        decodeURIComponent(            getQueryStringParameter('SPAppWebUrl')     );      var scriptbase = hostweburl + '/_layouts/15/';      $.getScript(scriptbase + 'SP.Runtime.js',         function () {             $.getScript(scriptbase + 'SP.js',                 function () { $.getScript(scriptbase + 'SP.RequestExecutor.js', printAllListNamesFromHostWeb); }             );         }     ); }  function getQueryStringParameter(param) {     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] == param) {             return singleParam[1];         }     } } 

After the SharePoint JavaScript files are loaded, the appweburl is needed to create a context. With this context we can create a appContextSite to get to the host web. After this its all oldschool JSOM.

function printAllListNamesFromHostWeb() {     var context;     var factory;     var appContextSite;     var collList;      context = new SP.ClientContext(appweburl);     factory = new SP.ProxyWebRequestExecutorFactory(appweburl);     context.set_webRequestExecutorFactory(factory);     appContextSite = new SP.AppContextSite(context, hostweburl);      this.web = appContextSite.get_web();     collList = this.web.get_lists();     context.load(collList);      context.executeQueryAsync(         Function.createDelegate(this, successHandler),         Function.createDelegate(this, errorHandler)     );      function successHandler() {         var listInfo = '';         var listEnumerator = collList.getEnumerator();          while (listEnumerator.moveNext()) {             var oList = listEnumerator.get_current();             listInfo += '<li>' + oList.get_title() + '</li>';         }          document.getElementById("message").innerHTML = 'Lists found:<ul>' + listInfo + '</ul>';     }      function errorHandler(sender, args) {         document.getElementById("message").innerText =             "Could not complete cross-domain call: " + args.get_message();     } } 

For more information about JSOM: