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.
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.
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.
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.
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.
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.
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(
↪ } ↪ } ↪ ↪ 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.
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.
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.
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) {
↪
↪ 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.
