Customizing a SharePoint site in your Web browser, Part 2

Applies to
Microsoft Windows® SharePoint® Services technology

This tutorial teaches you how to customize your site based on Microsoft Windows SharePoint Services by building an interactive Web page that makes the data in lists more dynamic and useful. It is the second of a two-part tutorial about using Web Parts—the basic building blocks of the pages in SharePoint sites—to customize your site. You should complete the first part, Customizing a SharePoint site in your Web Browser, Part 1, before you take this tutorial. In this lesson, you will move beyond the basic steps of site customization modifying your site's Home Page and build a new Web Part Page that will serve as a window into a set of sample data.

Imagine that you have been asked to create a Web page to list overdue accounts for each account executive in your business. You have two lists—one for the account executives and their accounts, and one for the contact information for the accounts. You can use Windows SharePoint Services to create a Web Part Page that connects the two lists and filters the data to make it more manageable.

Goals

After completing this tutorial, you will know how to:

  • Create a new Web Part Page.
  • Connect two Web Parts.
  • Control the content displayed in a Web Part.
  • Add content to a page.

Before you begin

The first part of this tutorial includes steps for downloading sample data from Site Customization Tutorial Files that you need to complete these lessons. If you have not yet downloaded the sample data, do it now by following the instructions on the download page.

You will use two workbooks in the sample files download to create two sample lists that you will use later in this tutorial.

 Note   You must have Microsoft Excel 2002 or later installed on your computer to complete these steps.

Create sample lists
  1. In the top link bar of your practice SharePoint site, click Create.

 Note   If you don't have a practice site, see the "Before you begin" section in the first part of this tutorial, Customizing a SharePoint site in your Web Browser, Part 1, for instructions.

  1. On the Create Page page, in the Custom Lists section, click Import Spreadsheet.
  2. In the Name box, type Accounts.
  3. In the Description box, type a description, such as Sample accounts list.
  4. In the Import from Spreadsheet section, click Browse, locate the Accounts.xls spreadsheet that you downloaded, and then click Open.
  5. Click Import
  6. In Microsoft Office Excel 2003, in the Import to Windows SharePoint Services List dialog box, in the Range Type list, click Range of Cells.
  7. In the Select Range box, type Sheet1!$A$1:$E$9 to select the information to import.
  8. Click Import.

The list containing the Accounts spreadsheet data is created in your SharePoint site. Next, you will import another list that you will use in this tutorial, Amounts.xls.

  1. In the top link bar, click Create.
  2. On the Create Page page, in the Custom Lists section, click Import Spreadsheet.
  3. In the Name box, type Amounts Due.
  4. In the Description box, type a description, such as Sample amounts due list.
  5. In the Import from Spreadsheet section, click Browse, locate the Amounts.xls spreadsheet that you downloaded, and then click Open.
  6. Click Import.
  7. In Excel, in the Import to Windows SharePoint Services List dialog box, in the Range Type list, click Range of Cells.
  8. In the Select Range box, type Sheet1!$A$1:$D$9 to select the information to import.
  9. Click Import.

Now that you have your lists set up, you're ready to explore more site customization.

Creating a Web Part Page

Each list in a SharePoint site has its own List View Web Part. You can create a Web Part Page to display these Web Parts. In the following steps, you will create a Web Part Page and add to it the Web Parts for your two lists. The Amounts Due list is a list of customers owing money to your business. For each debtor, the list displays the amount owed and the account executive responsible for collecting the debt. The Accounts list contains contact information for each of the customers.

Create the Web Part Page
  1. On the top link bar, click Create.
  2. In the Web Pages section, click Web Part Page.
  3. In the Name section, type a name for the page, such as Overdue Accounts.
  4. In the Layout section, click Header, Left Column, Body.
  5. In the Save Location area, make sure that Shared Documents is selected.

Web Part Pages that you create are stored in document libraries.

  1. Click Create.

The new Web Part Page appears in design view, and the Add Web Parts tool pane is open.

Add the lists
  1. In the Add Web Parts tool pane, click the name of your site's Web Part gallery.

The name of your site's Web Part gallery is the name of your the top-level site in your site collection. For example, if the top-level site in your site collection is "My Team Site," then the site collection Web Part gallery available to you will be named "My Team Site Web Part Gallery."

  1. In the list of Web Parts in your site Web Part Gallery, click Amounts Due.

You might have to click Next to see all of the Web Parts.

  1. Drag the Amounts Due Web Part from the Add Web Parts tool pane into the Body Web Part zone.
  2. Locate and drag the Accounts Web Part into the same zone, below the Amounts Due Web Part.
  3. Preview what you have created so far by clicking the Close button Close button at the top of the Add Web Part tool pane.

In business applications, these lists could be long. Even with the short lists we are using, it is clear that there is too much data on the page and it will be hard to use this information effectively. One way to simplify the page would be to view the contact information for only one customer at a time.

Connecting Web Parts

In the following steps, you will connect the two lists to make the information more useful. You will use the Amounts Due list to control which customer's information is displayed in the Accounts list, and add a Form Web Part that allows users to see results for one account executive at a time.

Connect the Web Parts
  1. On the Modify Shared Page menu, click Design this Page.
  2. Click the Web Part Menu button Web Part Menu button on the title bar of the Amounts Due Web Part, point to Connections , point to Provide Row To, and then click Accounts.
  3. In the Edit Connection dialog box, in the Column list, click Last Name, and then click Next.
  4. In the Column list, click Last Name, and then click Finish.

The previous two steps connect the Accounts list to the Amounts Due list by the last name of the customer, and filter the Accounts list by the last name of the customer selected in the Amounts Due list.

  1. To preview the results, on the Modify Shared Page menu, click Design this Page to exit the design view of the page.

Note that the Amounts Due list now has radio buttons on each line. Click a radio button for a line item and note that the Accounts list displays only the account matching the last name in the row you selected.

Next you will add one more control, a Form Web Part, that makes the page even more interactive and useful by letting site users view only the accounts assigned to a particular account representative.

Add a Form Web Part
  1. On the Modify Shared Page menu, point to Add Web Parts, and then click Browse.
  2. In your site Web Part gallery, in the Web Part List, locate the Form Web Part.

If you do not see it, try clicking Next until it appears.

  1. Drag the Form Web Part to the Left Column Web Part zone.
  2. On the Form Web Part menu, point to Connections, point to Provide Form Values To and then click Amounts Due.

This specifies that the Form Web Part will control what appears in the Amounts Due Web Part.

  1. In the Edit Connection dialog box, in the Column list, click T1.

T1 is the default name for the single text field in the Form Web Part.

  1. Click Next.
  2. In the Column list, click Account Executive, and then click Finish.

You have configured the Form Field Web Part so that you can type in the name of an account executive to limit the rows displayed in the Amounts Due list to just those accounts assigned to that account executive.

  1. Close the Add Web Parts tool pane by clicking the Close button.

Type the name of an account executive in the Form Web Part, click Go, and observe that the Amounts Due list is filtered based on the name you type in: "Akin," "Hammond," " Pak," "Juul," or "Ortiz." Connected Web Parts

 Note   To view the entire Amounts Due list after filtering it from the Form Web Part, on the Amounts Due Web Part tool bar, click Change Filter and in the Account Executive box, click (All). If this doesn't work, restart your Web browser program to view the entire list.

Adding instructional text

You've created a great page, but users might need some instructions about how to use it. You can add text containing guidance to the page by using a Content Editor Web Part.

Add text to the page
  1. On the Modify Shared Page menu, point to Add Web Parts, and then click Browse.
  2. In your site Web Part Gallery, in the Web Part List, locate the Content Editor Part.

If you do not see it, try clicking Next until it appears.

  1. Drag the Content Editor Web Part to the Header Web Part zone.
  2. In the Content Editor Web Part, click open the tool pane.

The Content Editor Web Part tool pane opens.

  1. To add text, click Rich Text Editor.

The Rich Text Editor window opens.

  1. Click the text entry area in the Rich Text Editor window and type the following instructive text:

"Type the name of an account executive in the Form Web Part, and the Accounts Due list will be filtered based on the name you type in: "Akin," "Hammond," " Pak," "Juul," or "Ortiz." Click a last name in the Amounts list to see the related contact information in the Accounts list."

 Note   To save time, you can copy and paste the text from this tutorial into the Rich Text Editor window.

  1. In the Rich Text Editor window, click Save.

To make the text seem as if it is directly on the page, you can turn off the Web Part's title bar and border.

  1. In the Content Editor Tool Pane, click the plus sign (+) next to Appearance to expand the Appearance section.
  2. In the Frame Style field, click None, and then click OK to close the Content Editor Tool Pane.

Suggested next steps

Congratulations on completing this tutorial! Now that you have learned the basics of customizing your SharePoint site and creating interactive Web Part Pages, here are a few suggestions for additional tasks you can try, to build even more powerful and attractive Web sites based on Windows SharePoint Services:

  • Try other Web Parts    Look through the different galleries available to your page from the Modify Shared Page menu.

Explore the Web Parts available for downloading at the SharePoint Web Part Gallery. Note that your server administrator will have to install the Web parts to make them available to you.

Ask your server administrator to install other Web Parts, such as the Office 2003 Add-in: Web Parts and Components, a collection of Web Parts, Web Part Page solutions, templates, and data retrieval services that work closely with Microsoft Office 2003 and Windows SharePoint Services.

After you finish this tutorial, you can delete your practice site so that you don't waste your server resources.

Delete a site
  1. Click Site Settings on the top link bar of your site.
  2. On the Site Settings Page, click Go to Site Administration.
  3. On the Site Administration page, in the Management and Statistics section, click Delete this site.
  4. On the confirmation page, click Delete.

 Note   The example companies, organizations, products, domain names, e-mail addresses, logos, people, places, and events depicted herein are fictitious. No association with any real company, organization, product, domain name, email address, logo, person, places, or events is intended or should be inferred.

 
 
Applies to:
Deployment Center 2003, Windows Sharepoint Services 2.0