With SharePoint 2013 Microsoft took a new architectural approach with the Office Web Apps and decoupled the service from SharePoint. With SharePoint 2010 each SharePoint server in the farm had an instance of the Office Web Apps running to serve up documents for viewing in the browser. But with this release, Microsoft separated the Office Web Apps into its own server product. Now, as a standalone service (server farm capable) the Office Web Apps server can provide the singular function of serving up documents to be viewed in the browser simply by receiving the URL for a specific document. The viewing request, however, can come from any host server: SharePoint, Lync, Exchange or any other server that is designed to use the Office Web Apps’ REST-based WOPI (Web application Open Platform Interface) API. What matters to the Office Web Apps server is simply whether or not it can access the document source location that is passed to it; if it can, it renders the document in the viewer. All traffic between the host and the Office Web Apps server is over the standard HTTP/HTTPS ports.
For the developer, your SharePoint on-premises environment will no doubt have been configured to use the Office Web Apps server, and those developing against Office 365 SharePoint Online will have this configuration as a part of their developer site. Because of this, you can take advantage of WOPI in your SharePoint applications, for instance if you want to have an Excel, Word, PowerPoint, or Visio document viewed directly within your Web solution. This allows the user to view the document with the context of your Web application and saves him from having to navigate to the file’s location to open it in the Office client application for viewing. The following Try It Out introduces you to the basics for how to do this by embedding an IFrame in your Web app and relying on the SharePoint implementation of WOPI to retrieve the document for display.
<div> <h3>Enter file name you saved to Shared Documents: (.pptx, .docx, etc.)</h3> <br /> <input type="text" value="ExampleName.pptx" id="fileNameTxt" style="margin-top: 10px; width: 210px" /> <input type="button" value="Load IFrame" id="loadIFrameBtn" style="padding: 0px; width: 100px;" /> <p> <iframe id="myFrame" width='600px' height='400px' frameborder='0'></iframe> </p> </div>
var context; var web; var user; var hostweburl; var WOPIbase; var actionEmbedParms; // NOTE: You will need to modify the sourcedoc= with your URL equivalent. var sourcedocParm = 'sourcedoc=/sites/dev/Shared%20Documents/'; // This code runs when the DOM is ready and creates a context // object which is needed to use // the SharePoint object model $(document).ready(function () { // Parse the URL for the SPHostUrl. hostweburl = decodeURIComponent( getQueryStringParameter("SPHostUrl")); // Construct the WOPI URL. WOPIbase = hostweburl + "/_layouts/15/WopiFrame.aspx?" + sourcedocParm; actionEmbedParms = "&action=embedview&Embed=1" context = SP.ClientContext.get_current(); web = context.get_web(); getUserName(); $('#loadIFrameBtn').click(function () { loadIFrame('#fileNameTxt'), }); }); // This function prepares, loads, and then executes a SharePoint query // to get the current users information function getUserName() { user = web.get_currentUser(); context.load(user); context.executeQueryAsync(onGetUserNameSuccess, onGetUserNameFail); } // This function is executed if the above OM call is successful // It replaces the contents of the 'helloString' element with the user name function onGetUserNameSuccess() { $('#message').text('Hello ' + user.get_title()); } function loadIFrame(elementId) { $('#message').text("WOPIUrl: " + WOPIbase + $(elementId).val() + actionEmbedParms); $('#myFrame').attr('src', WOPIbase + $(elementId).val() + actionEmbedParms); } // This function is executed if the above call fails function onGetUserNameFail(sender, args) { alert('Failed to get user name. Error:' + args.get_message()); } // Boilerplate URL parse code from MSDN // http://msdn.microsoft.com/en-us/library/office/jj163201.aspx 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]; } }
sourcedoc=%2Fsites%2Fdev%2FShared%20Documents%2F
Certainly the means used for constructing the WOPI URL in this Try It Out can be replaced with a fully dynamic, run-time URL construction scheme of your own. Following is a method you might want to incorporate when writing the code depending on whether your solution is based on .NET, JavaScript or REST.