Unit 2: Adding Web Parts to Pages

Contents
Overview Demonstration: Adding a Web Part to a Web Part Page Adding Web Parts to a Web Part Page Closing and Deleting Web Parts Requirements for Modifying Web Part Pages Setting Web Part Properties Lab A: Adding Web Parts to Web Part Pages Lab Discussion 1 2 4 6 8 9 10 14

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. 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. 2004 Microsoft Corporation. All rights reserved. Microsoft, MS-DOS, Windows, Windows NT, Windows Server, C#, FrontPage, SharePoint, Visual Basic, Visual Studio, and Windows Media 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.

Unit 2: Adding Web Parts to Pages

Overview

*****************************ILLEGAL FOR NON-TRAINER USE****************************** This unit will explain the concepts behind adding Web Parts to pages. Web Parts are componentized Web page elements that allow developers to create modular Web sites. Actions such as closing and deleting Web Parts will be explained in detail. You will also be introduced to modifying Web Part Pages and setting Web Part properties.

Objectives
After completing this unit, you will be able to:

Add a Web Part from any of the four default Windows SharePoint Services Web Part galleries to a SharePoint Web Part Page Close and Delete Web Parts Modify Web Parts Set properties for Web Parts

Unit 2: Adding Web Parts to Pages

Demonstration: Adding a Web Part to a Web Part Page

*****************************ILLEGAL FOR NON-TRAINER USE****************************** To demonstrate one of the ways you can use Web Parts, your instructor will add a pair of Web Parts to a Web Part Page. The Northwind Web Parts in this demonstration are designed to search for and display customer information based on the CustomerId selected in the drop-down list. Your instructor will add the Web Parts to a Web Part Page, configure them as necessary, and then use them in their intended manner. Caution The Northwind Web Parts must be installed to perform this demonstration.

In this instructor-led practice use the following values:

Variable Virtual computer Virtual computer- Domain controller Value Paris Glasgow

To Add Web Parts to a Web Part Page 1. Log the Paris virtual computer on to PARIS (this computer) as Administrator with a password of P@ssw0rd, then open Microsoft Internet Explorer. 2. Type http://paris/sites/Sales/Default.aspx in the Address field, and then click GO: 3. In the Connect to paris dialog box, log on as Administrator with a password of P@ssw0rd. 4. Click the arrowhead next to the Modify Shared Page text, point to Add Web Parts, then click Browse. 5. Click Virtual Server Gallery to display its list of Web Parts. 6. Drag an instance of the Customer (Row Provider) Web Part from the task pane into the Top Web Part zone at the top of the Web Part Page. 7. Drag an instance of the Orders (Cell Consumer) Web Part from the task pane into the Top Web Part zone, but below the Customer (Row Provider) Web Part.

Unit 2: Adding Web Parts to Pages

The Northwind Customer and Orders Web Parts

The Northwind Customer Web Part displays a list of customer ids in a drop-down list box. It has a configurable property called DetailedViewEnabled. This property specifies whether the web part displays a complete view of the customer selected in the drop-down list or just the customer name. The Northwind Orders Web Part displays all the orders for a particular customer in a typical ASP.NET datagrid control You can connect these sample Web Parts to each other or to other Web Parts. Note Your instructor will use the Northwind Web Parts to perform the instructor-led practice activities.

The Northwind Customer Web Part class implements the IRowProvider interface, which allows it to provide a row of data, or a specific data element to other Web Parts The Northwind Orders Web Part implements the ICellConsumer interface, enabling it to display the details of an order from the customer that is selected using the Northwind Customer Web Part.

To connect the two Web Parts after adding them to the Web Part Page 1. Close the Add Web Parts task pane if it is still open, and click the arrowhead next to Modify Shared Page, and then click Design this Page. 2. Click the drop-down arrow in the title bar of the OrdersCellConsumer Web Part to display its Web Part menu, point to Connections, then point to Get Customer Id from. This brings up a submenu that shows all the Web Parts on the page that implement interfaces compatible with the ICellConsumer interface. Click CustomerRowProvider. The Edit Connection dialog box displays to allow you to select which column the OrdersCellConsumer Web Part should use from the row provided by the CustomerRowProvider Web Part. 3. Select Customer ID, and then click Finish. The Web Parts are connected. To view a customers details

On the Customer (Row Provider) Web Part, verify the Web Parts are interacting correctly by clicking the drop-down arrow on the Customer ID list and selecting a value. The Orders (Cell Consumer) Web Part displays the details for the selected customer. If desired, you may view the details for various customers by selecting different values in the list.

Unit 2: Adding Web Parts to Pages

Adding Web Parts to a Web Part Page

*****************************ILLEGAL FOR NON-TRAINER USE****************************** Web Parts are componentized Web page elements that allow developers to create modular Web Pages. Web Parts provide a connection to information or an application, and display it inside a Web page in Microsoft Windows SharePoint Services or Microsoft Office SharePoint Portal Server. Windows SharePoint Services provides four types of galleries that can contain Web Parts:

Virtual Server gallery Site Collection Web Part gallery Web Part Page gallery Online gallery

Virtual Server gallery

The Virtual Server gallery contains Web Parts available to all sites on the server. By default, when you run Stsadm.exe to install a Web Part, Stsadm.exe adds the Web Part to the Virtual Server Gallery.

Site Collection Web Part gallery

A site collection is a set of Web sites on a virtual server with the same owner and they share administration settings. Each site collection contains a top-level Web site and can contain one or more subsites. There can be multiple site collections on each virtual server. The site collection gallery contains both default and custom Web Parts available to a particular site collection.

Unit 2: Adding Web Parts to Pages

Web Part Page gallery

The Web Part Page gallery contains any Web Parts that were added to the current page at one time but were then closed; this is useful because you can add a Web Part to a page, modify it to suit your needs, and then close the Web Part. This modified Web Part then becomes part of the Web Part Page gallery. In this way, the Web Part Page gallery serves as a customized Web Part library for a particular page. Web Parts that are currently on the page do not reside in the Web Part Page gallery; they are located in their original galleries. Note that only Web Parts that have been closed go into the Web Part Page gallery. Web Parts that are deleted from the page return to their original galleries with their default settings.

Online gallery
The Online gallery contains a list of ready-to-use Web Parts available over a Web service. This permits many servers to share access to a common, centrally maintained gallery of Web Parts. The URL for this Web service is specified in the OnlineLibrary element of the Web.config file for a site.

Enabling the online gallery

To enable the online gallery, you must edit the Web.config file on the server and change the URL attribute of the OnlineLibrary element to the following:
<OnlineLibrary Url="http://office.microsoft.com/home/office.aspx?assetid=FX010909721033"/>

Important If you use a proxy server, you must also add the following commands:

<system.net> <defaultProxy> <proxy proxyaddress="http://server_name:port_number" bypassonlocal = "true"/> </defaultProxy> </system.net>

Unit 2: Adding Web Parts to Pages

Closing and Deleting Web Parts

*****************************ILLEGAL FOR NON-TRAINER USE******************************

Closing a Web Part

A closed Web Part is no longer visible and does not participate in the execution of the page, but it is still a member of the Web Part Page gallery for that page. The Web Part is still associated with the page by an entry in the configuration database of the server running Windows SharePoint Services, which also stores any shared or personalized property settings for the Web Part. You can add a Web Part to a page, personalize it extensively, close it, and then later add it back to the page with the personalization intact. This personalized Web Part can later be restored on the page from the Web Part Page Gallery. To close a Web Part: 1. If you are at the SharePoint Portal Server level, click Edit Page on the Quick Launch bar. If you are at the Windows SharePoint Services level, continue with step 2 (as you are already in edit mode). 2. Click the arrowhead on the right side of the Web Part title bar, and then click Close. To bring back a closed Web Part: 1. If you are at the SharePoint Portal Server level, click Edit Page on the Quick Launch bar. If you are at the Windows SharePoint Services level, continue with step 2 (as you are already in edit mode). 2. Click the Modify Shared Page menu, point to Add Web Parts, then click Browse. 3. Select the Web Part from the Web Part Page gallery, and drag it into the desired zone on the Web Part Page.

Unit 2: Adding Web Parts to Pages

Deleting a Web Part

Rather than closing a Web Part, you may want to completely delete a Web Part from a page. And unlike merely closing a Web Part, deleting a Web Part from the page does not add it to the Web Part Page gallery: To delete a Web Part from a page. 1. If you are at the SharePoint Portal Server level, click Edit Page on the Quick Launch bar. If you are at the Windows SharePoint Services level, continue with step 2 (as you are already in edit mode). 2. Click the Modify Shared Page menu, and then click Design this Page to add the Delete command to the drop-down menu of the Web Part. 3. Click the arrowhead on the right side of the title bar for the Web Part you want to delete, and then click Delete.

Unit 2: Adding Web Parts to Pages

Requirements for Modifying Web Part Pages

*****************************ILLEGAL FOR NON-TRAINER USE****************************** Drag-and-drop operations for adding Web Parts to a page are available in browsers that support rich user interaction. However, Web Parts do not require Microsoft Internet Explorer or even a browser that supports dynamic HTML. That is one reason that the task pane includes a drop-down list for choosing a Web Part Zone on the page and an Add button for adding the selected Web Part to the selected zone. Additionally, these alternative controls make Web Parts accessible to users who do not use a mouse.

Creating Web Part Pages and adding Web Parts to these pages
Although much of this workshop focuses on creating and modifying Web Parts on the home page for a site, you are not limited to only adding Web Parts to the home page: you can create an entirely new Web Part Page. To create a new Web Part Page: 1. Click Create in the menu bar of the site in which you want the new Web Part Page. 2. On the Create Page page, scroll down to the Web Pages heading, and click Web Part Page. 3. On the New Web Part Page, enter a name for the new page, select a page layout from the list, and select the document library to contain the new page. 4. Click Create. 5. Add Web Parts to the newly created Web Part Page.

Unit 2: Adding Web Parts to Pages

Setting Web Part Properties

*****************************ILLEGAL FOR NON-TRAINER USE****************************** Web Parts share common properties, such as Title, Height and AllowClose. The Zone that a Web Part appears in is also a property of the Web Part. You can add custom properties to your Web Parts by adding standard .NET properties to the class for the Web Part. When you set Web Part properties in the browser, the scope of the modification depends on whether the page is in Personal view or Shared view. Changes made in Personal view apply only to the current user and take precedence over changes made in Shared view. Use Shared view to set default values for all users of that page. Note You do not need to switch the page to Design view to make this selection. However, the page automatically changes to Design view when the task pane for setting properties appears. In Design view, you see an outline around each Web Part Zone and a title for the zone.

Setting custom Web Part Properties

Attributes in the C# and VB.NET code for the property provide the custom View category for this property and the friendly name and tool tip that appear in the task pane. The Web Part infrastructure automatically creates a check box control for the property because it has a Boolean data type.

10

Unit 2: Adding Web Parts to Pages

Lab A: Adding Web Parts to Web Part Pages

*****************************ILLEGAL FOR NON-TRAINER USE****************************** After completing this lab, you will be able to:

Add a Web Part from any of the four default Windows SharePoint Services Web Part galleries to a SharePoint Web Part Page Set properties for Web Parts

Setup
In this lab, use the following values:
Variable Virtual computer Virtual computer - Domain controller Value Dublin Glasgow

Lab Time
Estimated time to complete this lab: 20 minutes

Unit 2: Adding Web Parts to Pages

11

Scenario
The lab exercises in this workshop are based on a SharePoint Products and Technologies business scenario. This business scenario evolves and develops as you complete the units in the workshop; each exercise provides you the skills and knowledge required to complete the subsequent exercise. The scenario is illustrated though a series of email messages. In this scenario, you will play the role of the Corporate Web Developer at Northwind Traders, Inc.

Email #1
From: To: Subject: Northwind Senior Management team Northwind Division Managers SharePoint Portal Server Phase Two Information

As you know, a few weeks ago, Northwind rolled out Microsoft SharePoint Portal Server as a solution for connecting people, teams and knowledge across all of our business processes. Our corporate portal site and areas have grown steadily over the past several weeks and individual departments have successfully created team sites for their staff to use. Now that the initial deployment phase of the corporate portal has been completed, Northwind is launching its second phase of the rollout: To leverage the collaborative power of our portals, we recommend that you encourage employees to designate their departments SharePoint team site as their Internet Explorer home page. Please help us achieve this goal. Northwind Senior Management team

Email #2
From: To: Subject: Jo Berry, Manager, Northwind Sales Department Don Hall, Manager, Northwind IT Department; Corporate Web Developer Customizing the Sales team site

As you are aware, all departments are being encouraged to ask their personnel to use their departments SharePoint Portal team site as their browsers home page. As manager of the Northwind Sales department, Ive determined that some additional functionality is needed on our Sales site to make it a useful portal and home page for the team. I would like to meet next week with one of your web developers so that we can develop a plan to customize the Sales site. In the meantime, please have one of your web developers add a Web Part to the home page of the Sales site so our team can easily find others in our department. Also, to conform to the company standards, please change the title of the Web Part from Contacts to Northwind Sales Contacts. I have given you Administrative site group permissions to the Sales site. The URL is: http://dublin/sites/Sales/default.aspx. Thanks, and I look forward to working with your team. Jo Berry

12

Unit 2: Adding Web Parts to Pages

Exercise 1 Adding Web Parts to Web Part Pages

In this exercise, you will add a Web Part from the Web Part Page gallery to a Web Part Page.
Tasks
1.

Supporting information
a.

On the Dublin virtual computer, navigate to the Northwind Sales team site.

Log the Dublin virtual computer onto DUBLIN (this computer) as Administrator with a password of P@ssw0rd. Click the Sites link on the navigation bar to display a list of available sites, and then click the Sales link. Or Type, http://dublin/sites/Sales/default.aspx in the Address field and then click Go:

b. Navigate by one of the following methods:

Most of this procedure can be conducted from the Modify Shared Page menu. See the Toolbox resource:

2.

Reference: Adding Web Parts to Web Part Pages Answer Key for Lab A: Exercise 1 - Adding Web Parts to Web Part Pages

Add a Contacts web part to the Northwind Sales team site to enable Sales personal to easily find information about other team members. Leave the Web Part page open and in its current state.

a. c.

Verify that the Web Part Page is in Shared View. Add the Contacts Web Part to the Web Part Page.

b. Search for the Contacts Web Part. d. Verify that the Web Part is visible in the page.

3.

Do not click anything else on the browser or page because Exercise 2: Setting Web Part Properties will continue from here.

Unit 2: Adding Web Parts to Pages

13

Exercise 2 Setting Web Part Properties

In this exercise, you will modify the Web Part Properties for the Contacts Web Part.
Tasks
1.

Supporting information If Internet Explorer has been closed, you must reopen it and return to the Sales Web Part Page: The Sales site URL is, http://dublin/sites/Sales/default.aspx If you are required to logon again, use the user name of Administrator and password of P@ssw0rd. See the Toolbox resource:

Open the properties task pane for the Contacts Web Part.

2.

Reference: Setting Web Part Properties Answer Key for Lab A: Exercise 2 - Setting Web Part Properties

Change the title of the Web Part from Contacts to Northwind Sales Contacts.

Note If you wish, you may continue changing the properties of this Web Part to see the effects on the Web Part page. Any changes you make will not affect any of the Lab exercises for the remainder of this workshop.

14

Unit 2: Adding Web Parts to Pages

Lab Discussion

*****************************ILLEGAL FOR NON-TRAINER USE****************************** Discuss the following:

Did you understand how Web Parts are organized in a SharePoint Portal Server 2003? Did you have problems completing the exercises? If so why? What are some of the consequences of modifying Web Parts in shared view? Discuss layout considerations when designing your layout. For example, did you designate the appropriate amount of space (height and width) required to render your Web Parts?