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. 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"); .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; } 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()

SharePoint on Windows Phone

AgilisPoint a free App for your Windows Phone