Deep Dive into SharePoint Provider Hosted Apps Office 365 Hands-on lab In this lab, you will create a Provider-Hosted app and make use of some of the advanced capabilities.
This document is provided for informational purposes only and Microsoft makes no warranties, either express or implied, in this document. Information in this document, including URL and other Internet Web site references, is subject to change without notice. The entire risk of the use or the results from the use of this document remains with the user. Unless otherwise noted, the companies, organizations, products, domain names, e-mail addresses, logos, people, places, and events depicted in examples herein are fictitious. No association with any real company, organization, product, domain name, e-mail address, logo, person, place, or event is intended or should be inferred. Complying with all applicable copyright laws is the responsibility of the user. Without limiting the rights under copyright, no part of this document may be reproduced, stored in or introduced into a retrieval system, or transmitted in any form or by any means (electronic, mechanical, photocopying, recording, or otherwise), or for any purpose, without the express written permission of Microsoft Corporation. Microsoft may have patents, patent applications, trademarks, copyrights, or other intellectual property rights covering subject matter in this document. Except as expressly provided in any written license agreement from Microsoft, the furnishing of this document does not give you any license to these patents, trademarks, copyrights, or other intellectual property. Copyright 2014 Microsoft Corporation. All rights reserved. Microsoft, Internet Explorer, Microsoft Azure, Microsoft Office, Office 365, SharePoint, Visual Studio, and Windows are trademarks of the Microsoft group of companies. All other trademarks are property of their respective owners.
Exercise 1: Create a Provider-Hosted App You must have an Office 365 tenant to complete this lab. To sign up for an Office 365 developer subscription: 1. Navigate to http://msdn.microsoft.com/en-us/library/office/fp179924(v=office.15).aspx. 2. Under the heading Sign up for an Office 365 Developer Site click Try It Free. 3. Fill out the form to obtain your trial O365 subscription. 4. When completed, you will have a developer site in the [subscription].sharepoint.com domain located at the root of your subscription (e.g. https://mysubscription.sharepoint.com) In this exercise you create a new provider-hosted app. Create the new project in Visual Studio 2013 1. Launch Visual Studio 2013 as administrator. 2. In Visual Studio select File/New/Project. 3. In the New Project dialog: 1. Select Templates/Visual C#/Office/SharePoint/Apps. 2. Click App for SharePoint 2013. 3. Name the new project DeepDiveCloudApp and click OK. Page 3
4. In the New App for SharePoint wizard: 1. Enter the address of a SharePoint site to use for testing the app (NOTE: The targeted site must be based on a Developer Site template) 2. Select Provider-Hosted as the hosting model. 3. Click Next. 4. Select ASP.NET Web Forms Application. 5. Click Next. Page 4
6. Select the option labeled Use Windows Azure Access Control Service (for SharePoint cloud apps). 7. Click Finish. 8. When prompted, log in using your O365 administrator credentials. 9. Open Default.aspx.cs from the DeepDiveCloudAppWeb project. 10. Delete the code that is used to obtain the host web title so your code appears as follows: Page 5
Exercise 2: Chrome Control In this exercise you will add the Chrome Control to the project you created in Exercise 1. 1. Open DeepDiveCloudApp.sln in Visual Studio 2013 if not already open. 2. Right click the DeepDiveCloudAppWeb project and select Add/New Folder. 3. Name the new folder Images. 4. Copy the file AppIcon.png from the DeepDiveCloudApp project into the Images folder. 5. Right click the Pages folder in the DeepDiveCloudAppWeb project and select Add/New/Web Form. 6. Name the new Web Form CrossDomain. 7. Click OK. 8. Add a div element to the body of the page to hold the Chrome Control. The following code shows the div in context with the body. <body> <form id="form1" runat="server"> <div id="chrome_ctrl_placeholder"></div> <div> </div> </form> </body> 9. Open Default.aspx from the DeepDiveCloudAppWeb project. 10. Add a div element to the body of the page to hold the Chrome Control. The following code shows the div in context with the body. <body> <form id="form1" runat="server"> <div id="chrome_ctrl_placeholder"></div> <div> </div> </form> </body> 11. Right click the Scripts folder and select Add/New/JavaScript File. 12. Name the new file app. 13. Click OK. Page 6
14. Add the following code to app.js to initialize the Chrome Control. "use strict"; var ChromeControl = function () { var init = function () { var hostweburl = querystring("sphosturl"); $.getscript(hostweburl + "/_layouts/15/sp.ui.controls.js", render); }, render = function () { var options = { "appiconurl": "../Images/AppIcon.png", "apptitle": "Deep Dive Cloud App", "settingslinks": [ { "linkurl": "../Pages/CrossDomain.aspx?" + document.url.split("?")[1], "displayname": "Cross Domain Library" } ] }; var nav = new SP.UI.Controls.Navigation( "chrome_ctrl_placeholder", options ); nav.setvisible(true); }, querystring = function (p) { 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] == p) return decodeuricomponent(singleparam[1]); Page 7
} } return { init: init, } }(); (function () { "use strict"; jquery(function () { ChromeControl.init(); }); }()); 15. Open Default.aspx from the DeepDiveCloudAppWeb project. 16. Add the following script references in the head section. javascript< script src="../scripts/jquery- 1.9.1.js"></script>< script src="../scripts/app.js"></script> 17. Open CrossDomain.aspx from the DeepDiveCloudAppWeb project. 18. Add the following script references in the head section. javascript< script src="../scripts/jquery- 1.9.1.js"></script>< script src="../scripts/app.js"></script> 19. Press F5 to debug your app. 20. Verify that the Chrome Control appears and that you can navigate between the Default.aspx and crossdomain.aspx pages. Page 8
Exercise 3: Cross-Domain Library In this exercise you use the cross-domain library to access a list in the app web. 1. Open DeepDiveCloudApp.sln in Visual Studio 2013 if not already open. 2. Right click the DeepDiveCloudApp project and select Add/New Item. 3. In the Add New Item dialog, select List. 4. Name the new list Terms. 5. Click Add. 6. In the SharePoint Customization Wizard, select Create list instance based on existing list template. 7. Select Custom List. 8. Click Finish. Page 9
9. Open the Elements.xml file associated with the new list instance DeepDiveCloudApp/Terma/Elements.xml. 10. Add the following XML inside the ListInstance element to pre-populate the list with data. <Data> <Rows> <Row> <Field Name="Title">SharePoint-Hosted App</Field> </Row> <Row> <Field Name="Title">Provider-Hosted App</Field> </Row> <Row> <Field Name="Title">Microsoft Azure</Field> </Row> <Row> <Field Name="Title">Office 365</Field> </Row> <Row> <Field Name="Title">SharePoint Online</Field> </Row> </Rows> </Data> 11. Right click the Scripts folder in the DeepDiveCloudAppWeb project and select Add/New/JavaScript File. 12. Name the new file crossdomain. 13. Click OK. Page 10
14. Add the following code to crossdomain.js to read the Terms list items. (function () { "use strict"; jquery(function () { //Get Host and App web URLS var appweburl = ""; var sphosturl = ""; var args = window.location.search.substring(1).split("&"); for (var i = 0; i < args.length; i++) { var n = args[i].split("="); if (n[0] == "SPHostUrl") sphosturl = decodeuricomponent(n[1]); } for (var i = 0; i < args.length; i++) { var n = args[i].split("="); if (n[0] == "SPAppWebUrl") appweburl = decodeuricomponent(n[1]); } //Load Libraries var scriptbase = sphosturl + "/_layouts/15/"; jquery.getscript(scriptbase + "SP.RequestExecutor.js", function (data) { //Call Host Web with REST var executor = new SP.RequestExecutor(appWebUrl); executor.executeasync({ url: appweburl + "/_api/web/lists/getbytitle('terms')/items", method: "GET", headers: { "accept": "application/json;odata=verbose" }, success: function (data) { var results = JSON.parse(data.body).d.results; for (var i = 0; i < results.length; i++) { $("#termlist").append("<li>" + results[i].title + "</li>"); } }, Page 11
error: function () { alert("error!"); } }); }); }); }()); 15. Open CrossDomain.aspx from the DeepDiveCloudAppWeb project. 16. Add the following script reference in the head section. javascript< script src="../scripts/crossdomain.js"></script> 17. Add an unordered list element to display the terms. The list element is shown in context below. HTML< body>< form id="form1" runat="server"> <div id="chrome_ctrl_placeholder"></div> <div> <ul id="termlist"></ul> </div>< /form>< /body> 18. Press F5 to debug the app. 19. Use the Chrome Control navigation element to open the Cross-Domain Library page. Congratulations! You have completed creating a Provider-Hosted app that uses the Chrome Control and Cross-Domain Library. Page 12