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.
TRY IT OUT: Using WOPI in an App for SharePoint (C14WOPI.zip)
In this exercise you learn the basics
for embedding an IFrame in your app for SharePoint to view documents
served by the Office Web App server.
1. Run Visual Studio 2012 as Administrator. Select New Project.
2. In the New
Project dialog, expand the Templates ⇒ Visual C# ⇒ Office/SharePoint ⇒
Apps nodes. Select App for SharePoint 2013 and provide the name C14WOPI. Click OK.
3. In the
Specify the app for SharePoint dialog, set the SharePoint site URL you
will deploy the app to and choose SharePoint-hosted as the host for
your app for SharePoint. Click Finish.
4. In the Solution Explorer, expand the Pages node and double-click the
Default.aspx file to open it. Add the following HTML immediately after the closing
</div> tag inside the
PlaceHolderMain <asp:Content...> element.
<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>
5. In the Solution Explorer, expand the Scripts node, and double-click the
App.js file to open it. Delete all the code and add the following:
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];
}
}
6. Open a
browser and navigate to the site where you will be deploying this
application. After you’re in the site, navigate to the Shared Documents
library and upload a PowerPoint presentation or any document that can
be viewed in the Office Web Apps.
7. When the
document is in the Shared Documents library, click the ellipsis (...)
beside the document name so the fly-out menu with the Office Web Apps
embedded-viewer loads. On the bottom right of the viewer click the Menu
icon and select Embed Information. Select all the HTML text and
copy/paste it into Notepad.
8. Examine the pasted URL and copy the parameter
sourcedoc=.
but do not include the filename of your document — you will enter the
document name into a text box at runtime. Your URL snippet should look
something like the following:
sourcedoc=%2Fsites%2Fdev%2FShared%20Documents%2F
9. Locate in the code from step 5 the variable definition for sourcedocParm and replace the entire literal value with your copied code snippet. Although you are dynamically parsing the URL to get the SPHostUrl, this sets the path to your specific document library.
10. Press F5
to run the app. When the page loads, in the text box, type the name of
the document you uploaded in step 6 and click the Load IFrame button to
view it. Your result should look something like Figure 1.
How It Works
In this exercise you simply added a button, text box, and an IFrame to the Default.aspx
Web page. You uploaded a document to your site and retrieved the
embedded URL. You then worked with the WOPI URL to see how it is
constructed and copied out the path to your document library. You wrote
code that included a combination of hard-coding URL values and dynamic
construction at runtime. Upon execution on the button click, the WOPI
URL was fully constructed and passed via the SharePoint _layouts/15/WopiFrame.aspx page to the Office Apps Server. The Office Web Apps server rendered the document in the IFrame for viewing.
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.
- .NET: Microsoft.SharePoint.Client.ListItem. GetWOPIFrameUrl()
- JavaScript: SP.ListItem.getWOPIFrameUrl()
- REST: POST, http://[YourSiteCollection]/[site]/_api/web/lists([listid])/items([itemid])/getWOPIFrameUrl([action])