Unit 09: Developing Web Parts Using

FrontPage 2003

Contents
Overview 1
Developing Web Parts Using FrontPage 2003 2
Demonstration: Creating a SharePoint Site
with FrontPage 2003 3
Using FrontPage Data View 5
Demonstration: Creating and Configuring a
Data Source 6
Demonstration: Inserting and Configuring a
Data View Web Part 8
Demonstration: Packaging and Re-Deploying
a Site 10
Discussion: Developing Web Parts with
FrontPage 2003 11
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.

 2003 Microsoft Corporation. All rights reserved.

Microsoft, MS-DOS, Windows, Windows NT, <plus other relevant MS trademarks, listed
alphabetically. The publications specialist replaces this example list with the list of trademarks
provided by the copy editor. Microsoft, MS-DOS, Windows, and Windows NT are listed first,
followed by all other Microsoft trademarks listed in alphabetical order.> are either registered
trademarks or trademarks of Microsoft Corporation in the United States and/or other countries.

<The publications specialist inserts mention of specific, contractually obligated to, third-party
trademarks, provided by the copy editor>

The names of actual companies and products mentioned herein may be the trademarks of their
respective owners.
 Unit 09: Developing Web Parts Using FrontPage 2003 1

Overview

Microsoft FrontPage 2003 enables you to modify and present live data from a range of sources,
including XML, to build rich interactive data-driven Web sites in a WYSIWYG editor.

Objectives
After completing this unit, you will know how to:
„ Develop Web Parts using FrontPage 2003
„ Create a SharePoint Site with FrontPage 20003
„ Use FrontPage Data View
„ Create and configure a data source
„ Insert and configure a Data View Web Part
„ Package and re-deploy a site
„ Understand the issues around developing Web Parts with FrontPage 2003
2 Unit 09: Developing Web Parts Using FrontPage 2003

Developing Web Parts Using FrontPage 2003

With Microsoft Windows SharePoint Services and Windows Server 2003 connected to FrontPage
2003, you can modify and present live data from a range of sources, including XML, to build rich
interactive data-driven Web sites in a WYSIWYG editor. Users can post to the Web using just their
browsers, while choosing from a broad range of publishing options.
By using FrontPage 2003 in concert with Microsoft Windows SharePoint Services, you will be able
to:
„ Allow users to post to your Web site using just their browsers. Users can create Web logs, issue-
tracking lists, and news and reviews sites.
„ Insert data views and configure data sources—including XML varieties, Windows SharePoint
Services data, Web services, and OLE Database (OLEDB) data sources.
• Handle XML data and authoring and XSLT formatting directly in the FrontPage WYSIWYG
Design view to create XML data-driven Web sites.
„ Show or hide items or reformats based on data values or position in the data view by using
Dynamic conditional formatting.
„ Build Web Parts Pages by creating Web Parts Zones and inserting and connecting to Web Parts in
other products, including Microsoft SharePoint Portal Server 2003, Windows SharePoint Services,
and FrontPage 2003.
This unit focuses on how to develop Web Parts using FrontPage 2003.
 Unit 09: Developing Web Parts Using FrontPage 2003 3

Demonstration: Creating a SharePoint Site with

FrontPage 2003

FrontPage 2003 provides rich new support for designing SharePoint sites and Web Part Pages. You
can follow the steps outlined below to create a SharePoint site and a page that performs a keyword
search for books by calling the Amazon.com Web service.
When developing Web Parts in FrontPage 2003, you will either open the site that contains the Web
Part Pages you wish to modify, or you can create a SharePoint site specifically designed for your
needs as you create and modify your Web Parts. In this demonstration we will create a new
SharePoint site in which to develop our Amazon Web Parts.
In this demonstration use the following values:
Variable Value
User Ben Smith
Jo Berry
Value 1 25
Group Authors

Ë To Create a Windows SharePoint Services site with FrontPage 2003:

1. Click the File menu on the horizontal navigation bar, then click New. In the New task pane,
in the New Web site section, click SharePoint team site.
2. In the Web Site Templates dialog box, type http://paris/amazon for the new site and
select a template.
For a simple test site, you can select the One Page Web Site template. Click OK. Log on
to the Paris virtual computer with a password of P@ssw0rd.
3. In Web Site view, right-click the default.htm page in your new site, and rename it to
default.aspx so it can contain Web Parts. Click Yes in the dialog that asks if you're sure you
want to do this. Double-click the page to open it in Design view.
4 Unit 09: Developing Web Parts Using FrontPage 2003

4. Click the Data menu on the horizontal navigation bar, then click Insert Web Part Zone.
Click the link to Insert a Web Part. From the Web Parts task pane, with Northwind
Traders Gallery selected, drag a Form Web Part into the Web Part zone.
The Form Web Part contains a text box and a button.
Note You are not required to use Web Part Zones when inserting Web Parts in
FrontPage. You can add Web Parts directly to pages, if you prefer.

5. Right-click on the Form Web Part and click Web Part Properties. In the Form Web Part
dialog box, expand the Appearance node and edit the Title to read Enter search
keywords. Click OK.
6. Click the text box in the Web Part. The <input> tag corresponding to the text box is
highlighted at the top of the design window. Click the arrowhead next to the highlighted
<input> tag and click Tag Properties.
7. In the Text Box Properties dialog box, edit the Name from T1 to keyword. Enter
cryptography in the Initial value field (or any other keyword that interests you). Enter 20
in the Width in characters field (or a larger number to make the text box wider) and click
OK.
 Unit 09: Developing Web Parts Using FrontPage 2003 5

Using FrontPage Data View

Creating a hand-coded custom Web Part is not the only way to consume an XML Web service from
a Web Part page. One easy alternative is to make use of the Data View Web Part, which you can
configure in Microsoft Office FrontPage 2003 without writing any code. This Web Part provides a
generic shell for retrieving and displaying data. You can also use the generic Form Web Part to
supply parameter data to a Data View Web Part.
You can also customize Data Views to create custom displays of your data in format by using the
Formatting toolbar. You can also perform more advanced customizations by using the Data View
Details task pane:
„ Style Choose a formatting style from a gallery of pre-designed list view styles. You can also add a
toolbar for site visitors to perform custom filtering on the list.
„ Filter Specify criteria to display a subset of the data in the Data View.
„ Sort & group Display items in a particular order and optionally group them on a Web page
beneath collapsible headings.
„ Conditional Formatting Set conditions for the data in your Data View.
Windows SharePoint Services provides the component-based platform required for FrontPage data-
driven functionality.

Ë To use Data View

1. Open the Web Part page whose views you wish to manage.
2. Click the View menu on the horizontal navigation bar, then click Task Pane.
The task pane opens on the right side of the page.
3. Click the arrowhead at the top of the Task Pane, then click Data View Details
4. You can manage views or work with data on your Web Part page.
6 Unit 09: Developing Web Parts Using FrontPage 2003

Demonstration: Creating and Configuring a Data Source

To add a Data View Web Part to your page, you must first create a Data Source, which retrieves
data from a SharePoint list, a document library, an XML file, a Web service, or by running server-
side script.

Ë To create a Data Source to retrieve data from a Web service

1. Click the Data menu on the horizontal navigation bar, then click Insert Data View to
display the Data Source Catalog task pane.
2. Click the XML Web Services node, then click the Add to Catalog link that appears.
3. In the Data Source Properties dialog box, type the following URL and click Connect
Now:
http://soap.amazon.com/schemas3/AmazonWebServices.wsdl

FrontPage retrieves the specified Web Services Description Language (WSDL) file from
Amazon and displays the service's parameters.

4. The KeywordRequest parameter displayed in the dialog box is a complex type composed
of several data elements. Click the Details button to display the Parameter Details dialog
box, which allows you to access the individual elements.
5. Double-click an item, or select it and click Modify, to edit the item in the Parameter dialog
box. Type the default values shown in the following table and designate keyword as a
parameter that can have its value set at runtime (for a production application, be sure to
replace these tag and devtag values).
 Unit 09: Developing Web Parts Using FrontPage 2003 7

Default Parameter Values

Name Value Runtime Parameter Runtime Mutable

keyword cryptography yes

page 1 no
mode books no
tag ase_mcwtechnologies no
type lite no
devtag DJYVGQ3AW0XX8 no

The Parameter Details dialog box optionally allows you to specify a token to use to
dynamically set values at runtime. For example, you can configure a parameter to get its
value from the URL query string or from the name of the logged in user. In this example, all
the parameter values are hard coded, except for keyword, which gets its value by connecting
to another Web Part on the Web Part Page.

6. After configuring the parameters, click OK in all the dialog boxes to return to the main
window in FrontPage. Under the XML Web Services node in the Data Source Catalog
task pane, FrontPage adds a listing for AmazonSearchService on soap.amazon.com. Now
that you created a Data Source, you can add a Data View to the page.

Note If you call a Web service from behind a proxy server, you must add an entry to the Web.config
file found in the following path:
Local_drive:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\60\Config\.
Use the following syntax to specify the address and port of your proxy server:
<system.net>
<defaultProxy>
<proxy proxyaddress="http://proxy_address:proxy_port_number"/>
</defaultProxy>
</system.net>
8 Unit 09: Developing Web Parts Using FrontPage 2003

Demonstration: Inserting and Configuring a Data View

Web Part

The Data View Web Part provides a graphical UI for creating XSLT to customize the display of
XML data. You use dialog boxes and property settings to control which data is displayed and how
it is formatted on the page.

Ë To insert a Data View Web Part

1. In the Data Source Catalog task pane, point to the AmazonSearchService item and click
the arrowhead to view the drop-down menu, then click Show Data. The display changes to
show the Data View Details task pane, which includes a tree view of the XML data
returned by the Web service.
Caution If you see an error message rather than a tree view in the Data View
Details task pane after clicking Show Data, this probably indicates that the
Amazon Web service timed out. Wait a few seconds and try again.

2. In the tree view of the XML returned by the Web service, press CTRL + CLICK to select
Url, ProductName, and ImageUrlSmall.
3. In the Design pane, click Zone 1 to select that Web Part Zone, and in the Data View
Details pane, click Insert Data View to insert a Data View Web Part that displays the data
you selected.
4. To format the URL data in the Data View, right-click a data cell under the URL heading in
the table that you added to the Data View, point to Format Item as, and then click
Hyperlink. In the ImageURLSmall section, right-click a data cell, point to Format Item
as, then click Picture.
5. To add some more style to the display, click any cell in the Data View table, click the Table
menu on the horizontal menu bar, then click Table AutoFormat. In the dialog box click
Column 1, or whichever format you prefer, then click OK.
You can also select text in the table and use the Format toolbar to alter the font, style, or
alignment, by clicking buttons similar to those used in Microsoft Word.
 Unit 09: Developing Web Parts Using FrontPage 2003 9

Displaying the URL for each product as a separate column is a complex procedure. Follow the steps
below to turn each product name into a hyperlink that links to the product's URL.

Ë To display the URL for items in a column

1. Select a cell under the ProductName column in the Data View.
2. Click the Insert menu on the horizontal navigation bar, then click Hyperlink.
3. The Insert Hyperlink dialog box displays. Click the Parameters button.
4. The Hyperlink Parameters dialog box displays. Click Insert Field Value.
5. Click XSL: URL.
6. Click OK twice to accept your entries and dismiss the dialogs. The product name is now
formatted as a hyperlink.

You no longer need the URL to be displayed as a separate column.

Ë To delete the URL from the Data View

1. Click the URL column heading.
2. Click the Table menu on the horizontal navigation bar, point to Select and then click
Column.
3. Click the Table menu on the horizontal navigation bar, now click Delete Columns.

One final requirement is to connect the two Web Parts on the page.

Ë To connect the two Web Parts on the page

1. Right-click in the Product Name column in Data View, then click Web Part Connections.
2. In the Web Part Connections Wizard, select Modify View Using Parameters From in
the source action drop-down list, then click Next.
3. Verify the Connect to a Web Part on this page radio button is selected and then click
Next.
4. Verify the Target Web Part is Enter search keywords and the Target action is Provide
Form Values To, then click Next.
5. Map the keyword text box in the Form Web Part to the keyword parameter in the Data
View Web Part by selecting keyword from the drop-down menu in the second cell of the
Columns in Enter search keywords column. Click Next.
6. Click Finish.
7. Click the Save icon to save the page design.
8. Open a browser window (by pressing the F12 key) and go to the new page, using the
address you specified when you created the site.
9. Type one or more keywords and then click Go. The Data View Web Part retrieves Amazon
data for that keyword entry and formats the data.
Caution You may find that you cannot open a page containing the example Amazon Web
Parts in Front Page. A known bug affects Web Parts that cache objects defined within the Web
Part. This problem occurs if the Web Part is installed in the BIN directory and if Web Part
cache storage is set to Database.
10 Unit 09: Developing Web Parts Using FrontPage 2003

Demonstration: Packaging and Re-Deploying a Site

When you are finished working with your Web Part pages in FrontPage 2003, the final task is to get
your pages onto your SharePoint Portal Server 2003 portal.
If you had created a new SharePoint site on a different server you would need to package your site
and re-deploy it to the SharePoint Portal Server.

During this demonstration, your instructor created a new SharePoint page on the SharePoint Portal
Server itself. There is no need to package or re-deploy the page as it already resides on the host
server. The instructor will now save and close the page.

Ë To save your Web Part pages

1. Click the File menu on the horizontal navigation bar, click Save, then click Close.
 Unit 09: Developing Web Parts Using FrontPage 2003 11

Discussion: Developing Web Parts with FrontPage 2003

As more data is exposed through Web services, it becomes increasingly common for developers
and users for SharePoint Products and Technologies to want to work with Web Parts that retrieve
data by making SOAP calls over HTTP.
The Amazon.com Web services demonstrated in this unit provided a good example of the power
and value of Web services.
„ The Amazon.com Web services enable you to create sites that integrate seamlessly with Amazon,
potentially providing revenue based on your users' Amazon purchases.
„ The Data View Web Part enables non-programmers working with Microsoft Office FrontPage
2003 to configure Web Parts that display data retrieved from a variety of data sources, including
Web services.
„ Data Views also make it very easy to create customized formatting, filtering, grouping, and
sorting.
„ Both experienced and inexperienced programmers alike gain the opportunity to create complex
XSLT by using a WYSIWYG editor and graphical dialogs.
„ FrontPage also provides dialog boxes for configuring the exchange of data between Data Views
and other Web Parts.