How to: Read Contents of a File in SharePoint 2013 Host Web from Within SharePoint 2013 App

This is pretty basic task which some apps may need to perform:  Read Contents of a File in SharePoint 2013 on a host web.
Let me be clear first that we’re talking here about reading the actual contents of a file and not just pointing to it.

MSDN has a nice article on how to read a file from a library but only if that file is on a app web so this fails if you try to read a file from a host which is likely to be more interesting.

There are few challenges here:

1. You app is sitting on a separate domain (in Office 365 it’s by default) and anytime you try to execute AJAX get request – it fails because you’re trying to make a cross domain call.
2. There is no JSOM or CSOM method to read the contents of a file even if you get a hold of a file object in the document library

Well SharePoint 2013 introduces new REST set of functions sitting under the _api managed path which greatly extends what was traditionally supported in JSOM or CSOM library.

I assume you’re using Office 365 tenant or equivalent on premises set up with apps installed and configured. I also assume you have created new Visual Studio 2012 – SharePoint 2013 App project which is SharePoint-Hosted.

In your app.JS which you get right when you create a new app project replace the contents with the following, see comments inline for help:

var hostweburl;
var appweburl;
// replace this with a relative path to your document library and file
// you can go /sites/somesite/Shared Documents/Test.txt as well
var filePath = "/Shared Documents/Test.txt";

function sharePointReady() {
getFile();
}

function getFile() {
hostweburl = decodeURIComponent(getQueryStringParameter("SPHostUrl"));
appweburl = decodeURIComponent(getQueryStringParameter("SPAppWebUrl"));
// prevents duplicate loading
$.getScript(hostweburl + "//www.sharepointeurope.com/_layouts/15/SP.RequestExecutor.js", getFile);
}

function getFile() {
// executes cross domain request
var executor = new SP.RequestExecutor(appweburl);
executor.executeAsync(
{
url: appweburl + "/_api/SP.AppContextSite(@target)/web/GetFileByServerRelativeUrl('"+filePath+"')/$value?@target='" + hostweburl + "'",
type: "GET",
success: readContents,
error: function (xhr) {
alert(xhr.status + ": " + xhr.statusText)
}
});
}

function readContents(data) {
alert(data.body.toString());
}

// helper function to get appweb and hostweb from query string parameter
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];
}
}

As you can see the example if pretty basic and you will see an alert showing the contents of the file.
This approach opens few ways on creating apps which interact with your customer’s data. Of course, your app will have to have Write permissions if you’re planning to write something back.

More tips and tricks on SharePoint 2013 development in my new book.

Enjoy!

Share this on...

Rate this Post:

Share: