Deep Dive into Office 365 SharePoint Provider Hosted Apps Deep Dive into SharePoint Provider Hosted

download Deep Dive into Office 365 SharePoint Provider Hosted Apps Deep Dive into SharePoint Provider Hosted

of 12

  • date post

    10-Jan-2020
  • Category

    Documents

  • view

    0
  • download

    0

Embed Size (px)

Transcript of Deep Dive into Office 365 SharePoint Provider Hosted Apps Deep Dive into SharePoint Provider Hosted

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

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

    http://msdn.microsoft.com/en-us/library/office/fp179924(v=office.15).aspx https://mysubscription.sharepoint.com/ https://github.com/OfficeDev/TrainingContent/blob/master/O3651-7 Setting up your Developer environment in Office 365/Images/1.png?raw=true

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

    https://github.com/OfficeDev/TrainingContent/blob/master/O3652-6 Deep Dive into Provider Hosted Apps/Images/01.png?raw=true https://github.com/OfficeDev/TrainingContent/blob/master/O3652-6 Deep Dive into Provider Hosted Apps/Images/02.png?raw=true

  • 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:

    https://github.com/OfficeDev/TrainingContent/blob/master/O3652-6 Deep Dive into Provider Hosted Apps/Images/03.png?raw=true https://github.com/OfficeDev/TrainingContent/blob/master/O3652-6 Deep Dive into Provider Hosted Apps/Images/04.png?raw=true https://github.com/OfficeDev/TrainingContent/blob/master/O3652-6 Deep Dive into Provider Hosted Apps/Images/05.png?raw=true

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

    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.

    11. Right click the Scripts folder and select Add/New/JavaScript File.

    12. Name the new file app.

    13. Click OK.

  • 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]);

  • 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 src="../Scripts/app.js">

    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 src="../Scripts/app.js">

    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.

    https://github.com/OfficeDev/TrainingContent/blob/master/O3652-6 Deep Dive into Provider Hosted Apps/Images/06.png?raw=true

  • Deep Dive into SharePoint Provider Hosted Apps

    Page | 9

    Exercise 3: Cross-Domain Library

    In this exercise you use the cross-domain