Adding static content and HTML files to your SharePoint App at runtime using JSOM

Just a quick one about an issue I faced yesterday. Basically I wanted to create some HTML content for my SharePoint App and then be able to link to that content via an IFrame.

Creating a new document library and uploading the HTML files is easy, but SharePoint won’t let you display HTML files directly in the browser. It forces the browser to download the HTML files as if it were a document. This behaviour can be changed in the farm or web application, but I can’t (and wouldn’t want to) change that from within my App. I certainly didn’t want to make it a requirement in order to use it.

The solution

Add them to the Pages folder, the one where all your SharePoint App pages are stored.

I added a folder to the Pages module, this means that the folder will be available when my App is deployed.

1g3bpkrz



The key now is getting access to the new folder and adding files to it.

The ‘Pages Library’ is not really a document library, its just a simple folder at the root of the web. This means you can’t use

var ctx = SP.ClientContext.get_current();
var pages = ctx.get_web().get_lists().getByTitle("Pages");


You need to get the folder directly and then add files to it. So, the solution is…

var ctx = SP.ClientContext.get_current();

var relUrl = ctx.get_web().get_serverRelativeUrl() + "/pages/custom";
var folder = ctx.get_web().getFolderByServerRelativeUrl(relUrl);

var fileCreateInfo = new SP.FileCreationInformation();

fileCreateInfo.set_url("NameOfPage.html");
fileCreateInfo.set_content(new SP.Base64EncodedByteArray());
fileCreateInfo.set_overwrite(true);

var fileContent = "<html><head></head><body>Some HTML here</body></html>";

for (var i = 0; i < fileContent.length; i++) {
    fileCreateInfo.get_content().append(fileContent.charCodeAt(i));
}

var newFile = folder.get_files().add(fileCreateInfo);

ctx.load(newFile);
ctx.executeQueryAsync(function (o, a) {
   alert("OK, file added");
}, function (o, e) {
    alert(e.get_message());
});


This method should work for any content (Images, Scripts, CSS, etc) and so could prove useful if you want to provide additional style/options for your SharePoint App.

Note: The example is taken from my code and I have actually already loaded the Web elsewhere. I didn’t change this snippet for brevity, but you may need to load the Web before using the method ctx.get_web().get_serverRelativeUrl()

I'm back :-)

After many years of not blogging I have finally taken the time to set up my blog again. I'm still doing SharePoint although also a lot more Windows Phone/Store Apps and really getting to like the Client OM and SharePoint Apps.

It appears no matter how much you know, Microsoft still finds a way to make SharePoint more complicated and to hide away functionality. As before I need somewhere to document all the stuff I find and hopefully help people by sharing it with the world.

I plan to be giving some tips, tricks and sample code for your enjoyment, with a splattering of interesting finds around the Interweb.

For those of you who want to see my (way out of date) old blog you can find it here.

--Vince