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.
