Recipe 15.4 Create a Master/Detail Page using Data View Web Parts
15.4.1 Problem
You'd like to create a page that displays two Data
Views based on an Access database, with the Data Views linked to each
other so that if you select a row in the master Data View, it will
filter the rows in the detail Data View so that only related rows are
displayed. Is this possible to set up using FrontPage?
15.4.2 Solution
You can link two Data View Web Parts together by creating a
Web Part
connection. For example, you might create one Data View that
retrieves rows from the tblRunners table located in the
15-04.MDB database and another Data View that
displays the related rows from the tblRaces table. Follow these steps
to create a web page that displays this master/detail relationship
between the two tables:
Following the steps from the Solution in Recipe 15.2, add an additional database connection to the
FrontPage Data Source Catalog task pane that retrieves rows from the
tblRaces table located in the 15-04.MDB sample
database. Name the database connection
"RacesTable". Add a new page to the site by selecting File  New... On the
New task pane, click on "More page
templates..." under New page. Click on the Web Part Pages tab of the Page Templates dialog box,
select one of the Web Part page templates that contains at least two
Web Part zones, and click OK. FrontPage adds a new page to the site. Click on one of the Web Part
zones, and select Data Insert Data View... to open the
Data Source Catalog. Click on the RunnersTable database connection and select Insert Data
View from the popup menu. FrontPage adds a Data View Web Part based
on the RunnersTable database connection to the page. Click on a second Web Part zone on the page and select
Data Insert Data View... to open the Data Source
Catalog. Click on the RaceTable database connection and select Insert Data
View from the popup menu. FrontPage adds a Data View Web Part based
on the RacesTable database connection to the page. Click anywhere on the Data View Web Part based on the RunnersTable
database connection. FrontPage displays the Data View Options icon.
Click on the icon and select Web Part Connections... from the
dropdown menu. FrontPage starts the Web Part Connections wizard. At the first wizard page, select "Provide Data
Values To" from the dropdown control. On the second wizard page, select "Connect to a Web
Part on this page". On the third wizard page, shown in Figure 15-10,
select "RacesTable" for the target
Web Part and "Provide Data Values
To" for the target action.
On the fourth wizard page you need to specify the relationship used
to link the two Data Views together. Select the MemberId column in
both tables as shown in Figure 15-11.
On the fifth page of the wizard you must choose which column in the
master Web Part (the RunnersTable Data View) on which FrontPage
should create a hyperlink to the detail part (the RacesTable Data
View). You can also indicate which column FrontPage should render in
boldface to indicate the currently selected master Web Part row.
Select LastName for both of these fields as shown in Figure 15-12.
On the sixth page of the wizard, click Finish to create the
connection. Select File Save to save the new page and select File
Preview in Browser to display the page in your browser.
The page should look similar to the one shown in Figure 15-13.
15.4.3 Discussion
When adding a Data View Web Part to a page,
FrontPage selects the first five fields to display. However, you can
customize which fields are included in the Data View by following
these steps:
Click on the database connection and select Show Data instead of
Insert Data View. FrontPage displays the Data View Details task pane. From the Data View Details task pane, click the mouse while holding
down the SHIFT or CTRL key to select the fields you wish to include
in the Data View. Click on the Insert Data View hyperlink to create a new Data View
using the custom set of fields.
15.4.4 See Also
See Building XML Data-Driven Web Sites with FrontPage 2003.
http://msdn.microsoft.com/library/default.asp?url=/library/en-us/odc_fp2003_ta/html/odc_fpbldgxmlwebs.asp
|
