deep dive into office 365 sharepoint provider hosted appsdeep dive into sharepoint provider hosted...

12
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.

Upload: others

Post on 10-Jan-2020

9 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Deep Dive into Office 365 SharePoint Provider Hosted AppsDeep Dive into SharePoint Provider Hosted Apps Office 365 Hands-on lab In this lab, you will create a Provider-Hosted app and

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.

Page 2: Deep Dive into Office 365 SharePoint Provider Hosted AppsDeep Dive into SharePoint Provider Hosted Apps Office 365 Hands-on lab In this lab, you will create a Provider-Hosted app and

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.

Page 3: Deep Dive into Office 365 SharePoint Provider Hosted AppsDeep Dive into SharePoint Provider Hosted Apps Office 365 Hands-on lab In this lab, you will create a Provider-Hosted app and

Deep Dive into SharePoint Provider Hosted Apps

Page | 3

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 4: Deep Dive into Office 365 SharePoint Provider Hosted AppsDeep Dive into SharePoint Provider Hosted Apps Office 365 Hands-on lab In this lab, you will create a Provider-Hosted app and

Deep Dive into SharePoint Provider Hosted Apps

Page | 4

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 5: Deep Dive into Office 365 SharePoint Provider Hosted AppsDeep Dive into SharePoint Provider Hosted Apps Office 365 Hands-on lab In this lab, you will create a Provider-Hosted app and

Deep Dive into SharePoint Provider Hosted Apps

Page | 5

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 6: Deep Dive into Office 365 SharePoint Provider Hosted AppsDeep Dive into SharePoint Provider Hosted Apps Office 365 Hands-on lab In this lab, you will create a Provider-Hosted app and

Deep Dive into SharePoint Provider Hosted Apps

Page | 6

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 7: Deep Dive into Office 365 SharePoint Provider Hosted AppsDeep Dive into SharePoint Provider Hosted Apps Office 365 Hands-on lab In this lab, you will create a Provider-Hosted app and

Deep Dive into SharePoint Provider Hosted Apps

Page | 7

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 8: Deep Dive into Office 365 SharePoint Provider Hosted AppsDeep Dive into SharePoint Provider Hosted Apps Office 365 Hands-on lab In this lab, you will create a Provider-Hosted app and

Deep Dive into SharePoint Provider Hosted Apps

Page | 8

↪ }

↪ }

↪ 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 9: Deep Dive into Office 365 SharePoint Provider Hosted AppsDeep Dive into SharePoint Provider Hosted Apps Office 365 Hands-on lab In this lab, you will create a Provider-Hosted app and

Deep Dive into SharePoint Provider Hosted Apps

Page | 9

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 10: Deep Dive into Office 365 SharePoint Provider Hosted AppsDeep Dive into SharePoint Provider Hosted Apps Office 365 Hands-on lab In this lab, you will create a Provider-Hosted app and

Deep Dive into SharePoint Provider Hosted Apps

Page | 10

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 11: Deep Dive into Office 365 SharePoint Provider Hosted AppsDeep Dive into SharePoint Provider Hosted Apps Office 365 Hands-on lab In this lab, you will create a Provider-Hosted app and

Deep Dive into SharePoint Provider Hosted Apps

Page | 11

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 12: Deep Dive into Office 365 SharePoint Provider Hosted AppsDeep Dive into SharePoint Provider Hosted Apps Office 365 Hands-on lab In this lab, you will create a Provider-Hosted app and

Deep Dive into SharePoint Provider Hosted Apps

Page | 12

↪ 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.