Recipe 15.3 Conditionally Format a Data View Web Part
You'd like to be able to highlight certain values or
rows within a table of data. Is this possible if you are displaying
the data on a web page using a Data View Web Part?
Not only is it possible to conditionally format the data in a
Data View Web Part, but you can do
it without any programming. For example, let's say
you wished to highlight the runners listed in the Data View Web Part
from the Solution in Recipe 15.2 that were running races of 10 or
more miles. Follow these steps to highlight the rows where distance
is greater than or equal to 10 miles:
Startup FrontPage 2003 with the existing Data View Web Part you
created in the Solution in Recipe 15.2.
Click anywhere on the Data View Web Part. FrontPage will display the
Data View Options icon as shown in Figure 15-7.
Click on the icon, and select Conditional Formatting... from the
dropdown menu. FrontPage opens the Conditional Formatting task pane.
Figure 15-7. Clicking on the Data View Options icon displays a dropdown menu from which you can select Conditional Formatting
Back on the Data View, select a row in the grid by clicking in the
left-hand margin of the row.
Click on the Create button in the Conditional Formatting task pane
and select Apply Formatting from the dropdown menu. FrontPage
displays the Condition Criteria dialog box.
In the Condition Criteria dialog box, click on the top row to create
a new condition. Under Field Name select GoalDistance. Select Greater
Than Or Equal under Comparison and enter
"10" under Value. The completed
condition should look similar to the one shown in Figure 15-8. Click OK to finalize the condition.
Figure 15-8. The Condition Criteria dialog box
FrontPage displays the Modify Style dialog box. Click the Format
button and select Border... from the dropdown menu.
At the Borders and Shading dialog box, click the Shading tab and
select a yellow background color and click OK twice to dismiss the
FrontPage should highlight the rows where goal distance is greater
than or equal to 10 miles.
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-9.
Figure 15-9. The completed page highlights all runners with goal distances of 10 or more miles
If you look at the code behind the conditionally formatted Data View,
you will see that the conditional formatting is applied using the
following XSLT transformation:
<xsl:if test="@GoalDistance >= '10'">background-color: #FFFF00;</xsl:if></xsl:
If you are savvy in XSLT you can tweak the XSLT code directly.
15.3.4 See Also
See Building XML Data-Driven Web Sites with FrontPage 2003.