Sharepoint 2013 : Developing Applications Using Office Services - WOPI and the New Office Web Apps Server

- How To Install Windows Server 2012 On VirtualBox
- How To Bypass Torrent Connection Blocking By Your ISP
- How To Install Actual Facebook App On Kindle Fire
7/2/2014 9:26:51 PM

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 (

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.
<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;" />
<iframe id="myFrame" width='600px' height='400px' frameborder='0'></iframe>
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 =

// 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();


$('#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.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
function getQueryStringParameter(paramToRetrieve) {
var params =
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:
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])
  •  Sharepoint 2013 : Building a BCS-enabled Business Solution : Building an Integrated BCS Solution with an App for SharePoint Containing an App for Office
  •  Business Connectivity Services in Apps for SharePoint 2013 : Building an App-level BCS Solution for Office 365 SharePoint Online
  •  Business Connectivity Services in SharePoint 2013 : Adding a Business Data Connectivity Model to Office 365 SharePoint Online
  •  Remote Event Receivers in Sharepoint 2013 : Introducing Remote Event Receivers
  •  InfoPath with SharePoint 2010 : Apply Rich Text to the Entry
  •  InfoPath with SharePoint 2010 : Add Changed Event Code for Tracking Changes
  •  InfoPath with SharePoint 2010 : Set Up the Form for Tracking Changes
  •  Sharepoint 2013 : Farm Management - Rename a Server on the Farm, Display the Configured Managed Paths
  •  Sharepoint 2013 : Farm Management - Retrieve the System Accounts, Retrieve Managed Accounts
  •  Sharepoint 2013 : Farm Management - Refresh Installed Products,Change the Port of Central Admin,Change the Farm Passphrase
    Top 10
    - Microsoft Visio 2013 : Adding Structure to Your Diagrams - Finding containers and lists in Visio (part 2) - Wireframes,Legends
    - Microsoft Visio 2013 : Adding Structure to Your Diagrams - Finding containers and lists in Visio (part 1) - Swimlanes
    - Microsoft Visio 2013 : Adding Structure to Your Diagrams - Formatting and sizing lists
    - Microsoft Visio 2013 : Adding Structure to Your Diagrams - Adding shapes to lists
    - Microsoft Visio 2013 : Adding Structure to Your Diagrams - Sizing containers
    - Microsoft Access 2010 : Control Properties and Why to Use Them (part 3) - The Other Properties of a Control
    - Microsoft Access 2010 : Control Properties and Why to Use Them (part 2) - The Data Properties of a Control
    - Microsoft Access 2010 : Control Properties and Why to Use Them (part 1) - The Format Properties of a Control
    - Microsoft Access 2010 : Form Properties and Why Should You Use Them - Working with the Properties Window
    - Microsoft Visio 2013 : Using the Organization Chart Wizard with new data
    - First look: Apple Watch

    - 3 Tips for Maintaining Your Cell Phone Battery (part 1)

    - 3 Tips for Maintaining Your Cell Phone Battery (part 2)
    programming4us programming4us