当前位置：文档库 › SP_Ignite2013_Dev_04_AppModelSpHosted

SP_Ignite2013_Dev_04_AppModelSpHosted

Microsoft SharePoint 2013 Preview - Hands-on Lab SharePoint-Hosted Apps Verified Against Build 15.0.4420.1017

Microsoft

Version 1.0

August 14, 2012

Information in this document, including URL and other Internet Web site references, is subject to change without notice. Unless otherwise noted, the example companies, organizations, products, domain names, e-mail addresses, logos, people, places, and events depicted herein are fictitious, and 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.

The names of manufacturers, products, or URLs are provided for informational purposes only and Microsoft makes no representations and warranties, either expressed, implied, or statutory, regarding these manufacturers or the use of the products with any Microsoft technologies. The inclusion of a manufacturer or product does not imply endorsement of Microsoft of the manufacturer or product. Links are provided to third party sites. Such sites are not under the control of Microsoft and Microsoft is not responsible for the contents of any linked site or any link contained in a linked site, or any changes or updates to such sites. Microsoft is not responsible for webcasting or any other form of transmission received from any linked site. Microsoft is providing these links to you only as a convenience, and the inclusion of any link does not imply endorsement of Microsoft of the site or the products contained therein.

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.

Microsoft and SharePoint are either registered trademarks or trademarks of Microsoft Corporation in the United States and/or other countries.

The names of actual companies and products mentioned herein may be the trademarks of their respective owners.

Technical Background

This lab requires you first run a script that creates a dedicated SharePoint site collection that you will use throughout all exercises in this lab. By working in an isolated site collection, you can rest assured that your changes will not affect other sites in the environment.

Create Lab SharePoint Site Collection

In the files provided with the hands on lab, run the batch file called SetupModule.bat by double clicking it. This file will execute a PowerShell script that will create a new site collection at http://intranet:44318/sites/SPHostedApps.

Important

The script will first check to see if there is already a site collection at the specified address. If there is it will delete the site collection before creating it. Therefore if you run into problems with the lab, feel free to rerun the batch file to reset the environment and restart the exercise.

Introduction

Estimated time to complete this lab

60 minutes

Objectives

After completing this lab, you will be able to:

?Learn the fundamentals of creating SharePoint-Hosted Apps

?Learn to include jQuery libraries in Apps

?Learn to use additional artifacts such as lists, Web Parts, pages, and Web services in Apps

?Learn to use the Chrome Control

Overview of Lab

SharePoint Apps can be centered on SharePoint artifacts, cloud resources, or both. In this lab, you will create several SharePoint-Hosted Apps that primarily use SharePoint artifacts. At the end of the lab, you will have a good understanding of the techniques for creating SharePoint-Hosted Apps.

Virtual Machine Technology

The computers in this lab are virtual machines that are implemented using Microsoft Hyper-V. Before starting each virtual machine, ensure you apply the Start-Lab snapshot (if supplied). When you have started a virtual machine, log on by pressing

CTRL+ALT+END and supply the credentials listed in the lab instructions. Computers in this lab

This lab uses virtual machines as described in the following table. Before you begin the lab, you must start the virtual machines and then log on to the computers.

All user accounts in this lab use the password {Supplied by Instructor}.

Lab Setup Script

Exercise 1: Hello, Apps

In this exercise, you will create a simple SharePoint App using Visual Studio. This exercise will familiarize you with the development process, toolset, and patterns for simple App development.

Task 1 – Create a New App

In this task, you will develop a new App in Visual Studio

1.Open Microsoft Visual Studio 2012 and create a new SharePoint App project

a.Open Microsoft Visual Studio 2012

b.Select File New Project from the main menu

c.Click the Templates Visual C# Office/SharePoint Apps node and

select the App for SharePoint 2013 project template

https://www.wendangku.net/doc/fd10328117.html, the new project

HelloApp e.Click the OK button

?Create new SharePoint App Project

f.In the New App for SharePoint Wizard, name the new App HelloApp.

g.Specify the site you will use for this lab.

h.Select SharePoint-hosted as the hosting type.

i.Click Finish.

2.Code the App

a.Open Pages\Default.aspx for editing.

b.Add the code below within the PlaceHolderMain Content Placeholder

control:

c.Open Scripts\App.js for editing.

d.Add the following code to the library:

function hello() {

$get("displayDiv").innerHTML = "

Hello, Apps!

}

Task 2 – Run the App in Debug mode

In this task, you will run the App and see it hosted in SharePoint.

1.Run the App

a.In Visual Studio, select Debug Start Debugging, observe the

Output Window for installation messages.

https://www.wendangku.net/doc/fd10328117.html,unch the App

c.In the App, click the Push Me button.

?Running the App

2.Shutdown the App

a.In Visual Studio, select Debug Stop Debugging, observe the

Output Window for retraction messages.

Task 3 – Add a Client Web Part to the App

In this task, you will add a Client Web Part and code it. This web part can be used on pages outside of the App to add functionality to the hosting SharePoint site.

1.Add a Client Web Part

a.In the Solution Explorer, right click the HelloApp project node

and select Add New Item from the context menu.

b.In the Add New Item dialog, select Client Web Part.

https://www.wendangku.net/doc/fd10328117.html, the new item AppPart and click Ad

Adding a Client Web Part

In the Create Client Web Part dialog, choose Create a new client web part page and give it the name AppPartSource.

e.Replace the entire contents of the Elements file with the following:

Title="App Part"

Description="A simple client web part"

DefaultWidth="200"

DefaultHeight="200">

Src="~appWebUrl/Pages/AppPartSource.aspx?Message=_DisplayMessage_" />

Type="string"

WebBrowsable="true"

WebDisplayName="Display Message"

WebDescription="A message to display"

WebCategory="Configuration"

DefaultValue="Hello, Client Web Part!"

RequiresDesignerPermission="true" />

f.In the Pages folder, open the item AppPartSource.aspx. Replace

the contents below the page directives with the following:

Client Web Part

runat="server" OnDemand="true" LoadAfterUI="true"

Localizable="false" />

g.The result will look like the following:

h.Open Scripts\App.js for editing.

i.Add the following code to the library:

function helloAppPart() {

var message = getQueryStringValue("Message");

document.getElementById("appPartDiv").innerHTML = "

" + message + "

}

function getQueryStringValue(paramName){

var params = document.URLUnencoded.split("?")[1].split("&");

var strParams = "";

for (var i = 0; i < params.length; i = i + 1) {

var singleParam = params[i].split("=");

if (singleParam[0] == paramName)

return decodeURIComponent(singleParam[1]);

}

Task 4 – Add the Client Web Part to a Page

In this task, you will run the App and add the Client Web Part to the home page

of the portal.

1.Deploy the App

a.In Visual Studio, right click the HelloApp node and select Deploy from

the context menu.

b.When the App is deployed, open your browser to the home page of the

SharePoint site hosting the App (not the home page of the App itself!).

2.Add the Client Web Part

a.In the ribbon, select Page Edit Page.

b.Click Add a Web Part in any Zone.

AppPart Web part to the page.

c.Add the

d.Click the Push Me button to test the functionality.

?Testing the Client Web Part

3.Retract the App

a.In Visual Studio, right click the HelloApp node and select Retract from

the context menu.

b.Note that the Client Web Part is removed from the home page. Task 5 – Add a button to the Ribbon

In this task, you will add a custom action to the ribbon of all Document Libraries to launch the App.

1.In Visual Studio, right click the HelloApp node and select Add New Item

from the Context menu.

2.In the New Item dialog, select Ribbon Custom Action.

https://www.wendangku.net/doc/fd10328117.html, the item Launcher and click Add.

Adding a UI Custom Action

4.In the Create Custom Action for Ribbon window, choose to expose the

custom action to the Host Web. The Custom Action should be scoped to List Template, and the particular item the custom action is scoped to is Document Library.

5. In the next window, we will specify settings to generate a button control for

the ribbon. Use the following settings: a. Where is the control located?

Ribbon.Documents.Manage.Controls._children b.

What is the label text for the button control? Go! c. Where does the button control navigate to?

HelloApp\Pages\Default.aspx

Task 6 – Launch an App from the Ribbon

In this task, you will deploy the App and use the button on the Ribbon to launch

it.

1. In Visual Studio, right click the HelloApp node and select Deploy from the

Context menu.

2. After the App is deployed, open the home page of the portal where the App

is hosted (not the App itself!).

3. On the home page, click Site Contents .

4. Click Add an App .

5. Select to Add a Document Library .

Name the Document Library Shared Documents .

7. On the Apps page, click the newly-created Shared Documents library.

?The Shared Documents Library

8.In the ribbon, click the Files tab.

https://www.wendangku.net/doc/fd10328117.html,unch the App using the button you created. ?Launching the App from the Ribbon

Exercise 2: Membership App

In this exercise, you will create a SharePoint App that accesses the User Information list of the hosting site. This exercise will help you understand how to use request permissions in an App and access lists in the hosting SharePoint web. You will also make use of jQuery in the App.

Task 1 – Create a New App

In this task, you will develop a new App in Visual Studio

1.Open Microsoft Visual Studio 2012 and create a new SharePoint App project

a.Open Microsoft Visual Studio 2012

b.Select File New Project from the main menu

c.Click the Templates Visual C# Office/SharePoint Apps node and

select the App for SharePoint 2013 project template

https://www.wendangku.net/doc/fd10328117.html, the new project MembershipApp

e.Click the OK button Array

?Create new SharePoint App Project

f.In the New App for SharePoint Wizard, name the new App

Membership App.

g. In the New App for SharePoint Wizard , specify the site you created

prior to starting the lab for hosting Apps. h. Select SharePoint-hosted as the hosting type. i. Click Finish .

New App for SharePoint Wizard 2. Code the App

a. Open Default.aspx in Visual Studio for editing

b. Add the following code in the PlaceHolderMain Content Placeholder

control with the following:

c. OpenApp.js

for editing.

d. Add the following code to App.js to query the User Information list of the

hosting site:

$(document).ready(function () {

Membership = {

element: '',

url: '',

init: function (element) {

Membership.element = element;

Membership.url = _spPageContextInfo.webAbsoluteUrl +

"/_api/site/rootweb/lists/getByTitle('User%20Information%20List')/ite ms?$select=Title,Name";

load: function () {

$.ajax(

{

url: Membership.url,

method: "GET",

headers: {

"Accept":

"application/json;odata=verbose",

success: Membership.onSuccess,

error: Membership.onError

}

);

onSuccess: function (data) {

var results = data.d.results;

var html = "

for (var i = 0; i < results.length; i++) {

html += "

}

html += "

html += results[i].Title;

html += "

html += results[i].Name;

html += "

Membership.element.html(html);

onError: function (err) {

alert(JSON.stringify(err));

}

Membership.init($('#peopleDiv'));

Membership.load();

});

另外，还要去掉App.js头部自动生成的’use strict’;

a.Openthe AppManifest.xml designer.

b.In the Permission Requests table, select Site Collection as the Scope.

c.Select Read as the Permission.

Task 2 – Run the App in Debug mode

In this task, you will run the App and see it hosted in SharePoint.

1.Run the App

a.Select Debug Start Debugging in Visual Studio, observe the Output

Window for installation messages, and verify that Internet Explorer

opens to the SharePoint Apps site you created before starting the lab.

b.When prompted by SharePoint to grant permissions, click TrustIt.