13.7. Format the view Once you have displayed the data you want, you can further refine the look of the view using the features of FrontPage. Once formatted, our table might look something like Figure 13-9. Figure 13-9. The formatted table 
The following sections describe two features for data-driven formatting: applying a style to the data itself, and conditional formatting. 13.7.1 Applying a style to the data Our example has rows for expenses and columns for the various sub-elements of an expense. However, there may be occasions where you want to lay out the data differently. For example, in two columns, with the element-type names (e.g. date, explanation) on the left, and their content on the right. To do this: - 1. Position the cursor anywhere in the table.
- 2. On the Data menu, click Style. This displays the View Styles dialog shown in Figure 13-10.
Figure 13-10. The View Styles dialog with a tabular layout selected 
- 3. Select one of the styles from the list and click OK. The currently selected one produces the style in Figure 13-9, but there is another that would produce Figure 13-11.
Figure 13-11. Restyled table 
13.7.2 Conditional formatting You can format data differently based on criteria. For example, to have rows with a lodging charge of over $150 show up in red, to call attention to them during the manager's review of the expense report, do this: - 1. On the Data menu, click Conditional Formatting. This displays the Conditional Formatting task pane shown in Figure 13-12.
Figure 13-12. The Conditional Formatting task pane 
- 2. Select one of the lodging values (not the whole column), and click Create, then Apply formatting on the task pane.
- 3. This will bring up the Condition Criteria dialog which is similar to the Filter Criteria dialog in Figure 13-8.
- 4. Click the row that says Click here to add a new clause.
- 5. Enter the field name (lodging (number)), comparison (Greater Than) and the value (150) and click OK.
- 6. This will bring up the Modify Style dialog shown in Figure 13-13.
Figure 13-13. The Modify Style dialog 
- 7. From there, you can choose a style for the data that meets the criteria by clicking Format. In our case, to modify the color of the text, click Font on the Format menu.
- 8. For Color select the red shade and click OK, then OK again to return to the main workspace.
As you can see, the lodging values are now displayed in red. Using the Conditional Formatting task pane, you can also choose to show or hide data based on criteria. This will result in the entire row (in this case, expense item) being shown or hidden, not just the value(s) being tested (e.g. lodging amount). 13.7.3 Formatting freeform XML documents FrontPage's view styles are designed for predictable data that lends itself to tabular presentation (think "spreadsheet"). Our expense report is a typical example. But what if you want to present a freeform XML document on a FrontPage site? For the most part you'll need to create your own XSLT stylesheets, as we'll describe shortly. But for some documents you can get some or all of the job done by using multiple data views. For example, we can handle Doug's newsletter article in Figure 13-14 by dividing it into two different data views, hence two different styles. Figure 13-14. Doug's article (article.doc) 
The first view, in tabular style, will include the elements that represent properties of the article, such as title, author and date. The body of the article will appear afterwards in a view styled more appropriately for freeform text. To create the tabular view: - 1. Import the sample article.xml, select it in the Data Source task pane, and bring up its structure, shown in Figure 13-15, by right-clicking and choosing View Data.
Figure 13-15. The Data View Details task pane for the article 
- 2. Select the "property" elements type, id, title, author and date. Holding down the CTRL key will allow you to select multiple elements and attributes.
- 3. Click Insert Data View on the task pane.
- 4. This will insert the selected elements in a table with the element-type names in the first column, and the data content in the second, as shown in the top part of Figure 13-16. This is the default view for data that does not repeat.
Figure 13-16. The article Web page 
The next step is to insert the data view for the body of the article. Because the body has a simple structure that just alternates headers with paragraphs, we can use one of FrontPage's built-in styles. To specify the style of view we want: - 1. Select the section element and click Insert Data View. This will insert the sections in the default style: as a table with two columns labeled header and para (the children of section).
- 2. For a style more suited to headers and paragraphs, click Style on the Data menu, and select the style shown in Figure 13-17.
Figure 13-17. The View Styles dialog with a paragraph-friendly layout selected 
This will display the headers followed by the paragraphs, as shown in Figure 13-16. As before, you can modify the presentation of the article using the standard features of FrontPage, resulting in a document that looks like Figure 13-18. Figure 13-18. The formatted article 
13.7.4 Editing and creating XSLT stylesheets FrontPage takes you a long way toward creating dynamic Web pages from XML documents. However, there may be cases where its WYSIWYG editor is not capable of displaying the data the way you want. Behind the scenes, FrontPage is generating an XSLT stylesheet that transforms your XML data source into HTML. The XSLT is embedded in an ASPX Web page as a Web page part. You can hand-modify the generated XSLT stylesheet from the Code view, which is shown in Figure 13-19. The ConnectionID element is the connection information for the data source, while the XSL element is a wrapper for the actual XSLT stylesheet. Figure 13-19. The XSLT stylesheet in the Code view 
Tip  | Even without FrontPage and SharePoint, you can create XSLT stylesheets to transform your XML documents into HTML or XHTML. You can use a plain text editor or one of the many tools available for this purpose. |
|
