Configuring a Data View and Web Parts

A Data View can be configured quickly and easily using the Data View Options button to display the Data View Options menu as shown in Figure 38.11. The Data View Options button is made available by clicking inside of the Data View, and because it's a floating button, it can appear in many different places depending on where you clicked.

Figure 38.11. The Data View Options menu is a quick way to format a Data View.

graphics/38fig11.gif

The Styles Option

The first option on the Data View Options menu is Style. This allows you to apply broad formatting style changes to the data. As shown in Figure 38.12, the General tab provides many different styles from which to choose. When selecting a style in the HTML View Styles list, the Description will update to reflect a brief description of the style.

Figure 38.12. The General tab of the View Styles dialog box provides many templates to choose from.

graphics/38fig12.gif

The Options tab, shown in Figure 38.13, provides access to some of the functionality settings of the Data View. Changes to settings here affect the Data View when it is being displayed in a Web browser.

Figure 38.13. The Options tab sets the behavior and appearance of your Data View when it is being browsed in a Web browser.

graphics/38fig13.gif

You can configure toolbars for the Data View by checking the Show Toolbar with Options For check box and selecting one of the following options:

  • Filter Displays a Filter link that allows people browsing your Data View to filter the data based on the criteria they choose.

  • Sort Adds a dropdown list of all the fields in your data source. The Data View will be sorted by the field chosen from the dropdown by the user browsing your Data View.

  • Group Displays a dropdown list of all the fields in your data source. By selecting a field name in the dropdown, users browsing your Data View can group the Data View by that field in expanding and collapsing sets of data.

The Header and Footer section allows you to choose to display a header and/or footer. Depending on the style you have chosen on the General tab, you can also choose to allow viewers of your Web page to sort the Data View. If sorting is enabled by clicking the Enable Sorting on Column Headers check box, users of your Web site can sort the data by clicking on a column header.

The Record Sets section configures whether the Data View displays all records at once or displays paging links. You can also configure the message that is displayed if you or the user of your Data View configure it so that it doesn't return data.

Figure 38.14 shows a view in the browser of a Data View that is configured with the Filter, Sort, and Group toolbar options. Note that the user has chosen to group by SupplierID and the Data View is showing the data with supplier 1 expanded and the rest collapsed. Also notice that there is a small downward-pointing arrow to the right of the Group By dropdown. This indicates that the Data View is grouped in ascending order. By clicking this arrow, you can reorder the Data View in descending order.

Figure 38.14. A Data View viewed in the Web browser with some advanced features.

graphics/38fig14.gif

The Sort and Group Option

The second option on the Data View Options menu is the Sort and Group option. Selecting this option displays the Sort and Group dialog box shown in Figure 38.15. The Sort and Group dialog box allows you to configure the Data View by sorting the data and grouping it in design-time so that when it initially appears on the Web page, it will appear already sorted and grouped. The effect is the same as the effect seen in Figure 38.14, but is applied at design-time instead of when a user is browsing the Data View.

Figure 38.15. The Sort and Group dialog box configures the way data is displayed.

graphics/38fig15.gif

NOTE

By selecting a field name in the Available Fields list in the Sort and Group dialog box and clicking the Add button, you can configure the Data View to be sorted by that field. The Sort Properties radio buttons allow you to configure the sort as ascending or descending.


In the Group Properties section, you can configure grouping for the Data View. The grouping settings that you configure apply to the field that is currently selected in the Sort Order list. This enables you to create complex groupings. The page shown in Figure 38.16 is sorted by SupplierID and then by ProductName. Grouping is enabled for both with SupplierID set to be expanded by default and ProductName set to be collapsed by default.

Figure 38.16. Creating complex groupings is easy with the Sort and Group dialog box.

graphics/38fig16.gif

The Filter Option

The next option on the Data View Options menu is Filter. This option allows you to filter the Data View by one or more criteria as shown in Figure 38.17. Click the first row to add a filter clause. Once you have configured your filter clauses, click OK to update the Data View with your settings.

Figure 38.17. The Filter Criteria dialog box filters a Data View based on one or more criteria.

graphics/38fig17.gif

The Conditional Formatting Option

The next item on the Data View Options menu is Conditional Formatting. Selecting this item takes you to the Conditional Formatting task pane, as shown in Figure 38.18.

Figure 38.18. The Conditional Formatting task pane allows you to format values in a Data View based on certain conditions.

graphics/38fig18.gif

Suppose that you want to display your list of products, and you want any product with a unit price of greater than twenty dollars to be displayed with a black background and white text. Using the Conditional Formatting option, such formatting is simple.

  1. Select one of the rows in your Data View.

  2. In the Conditional Formatting task pane, click Create and select Apply Formatting from the menu. This displays the Condition Criteria dialog box.

  3. Click the first row to add a new clause as shown in Figure 38.19.

    Figure 38.19. The Condition Criteria dialog box contains clauses to apply formatting based on specified conditions.

    graphics/38fig19.gif

  4. In the Field Name dropdown, select UnitPrice.

  5. In the Comparison dropdown, select Greater Than.

  6. In the Value dropdown, enter the value 20 as shown in Figure 38.20.

    Figure 38.20. A new clause configured for all prices greater than 20.

    graphics/38fig20.gif

  7. Click OK to apply the condition criteria. The Modify Style dialog box appears as shown in Figure 38.21.

    Figure 38.21. The Modify Style dialog box provides access to all the formatting options you'll need.

    graphics/38fig21.gif

  8. Click the Format button in the Modify Style dialog box and select Border from the menu.

  9. In the Borders and Shading dialog box, click the Shading tab.

  10. In the Background Color dropdown, select black, as shown in Figure 38.22.

    Figure 38.22. The Borders and Shading dialog box showing the new background color for the conditional formatting.

    graphics/38fig22.gif

  11. Click OK to return to the Modify Style dialog box.

  12. Click Format and select Font from the menu.

  13. In the Color dropdown, select white, as shown in Figure 38.23.

    Figure 38.23. The Font dialog box with the new color selected for the conditional formatting.

    graphics/38fig23.gif

  14. Click OK to return to the Modify Styles dialog box.

  15. Click OK to apply the conditional formatting.

As shown in Figure 38.24, the Conditional Formatting task pane now shows the condition you just applied, and the Data View has been formatted according to the condition.

Figure 38.24. The Conditional Formatting task pane and the Data View have been updated.

graphics/38fig24.jpg

Web Part Options

The next option on the Data View Options menu is Web Part Connections. This option is used to connect Web Parts together.

For more information on connecting Web Parts, see "Connecting Web Parts," p. 754.


The next option on the Data View Options menu is Web Part Properties. The options available to you in the Web Part Properties dialog box are dependant on the type of Web Part being edited. However, all Web Part Properties dialog boxes will allow you to display and edit the XSL and the XSLT code that make up the Web Part.

XSL and XSLT

XSL and XSLT are languages that allow you to take XML data from one data source and transform and format it for use in another data source. It isn't necessary to understand these technologies in order to work with Web Parts because FrontPage will write all the XSL and XSLT code for you as you work in the user interface. As of this writing, FrontPage is the only tool available that can generate standards-compliant XSL and XSLT code from a WYSIWYG interface. For more information on XSL and XSLT, read Special Edition Using XSLT by Que Publishing.


Many of the properties of a Web Part apply only to Web Parts that are a part of a Web Part Page a collection of page templates that are included with FrontPage. Web Part Pages already have containers for Web Parts arranged on them. These containers are called Web Part Zones, and they allow you to easily change the design of a page that contains Web Parts. You can insert your own Web Part Zone onto a Web page as well, but Web Part Pages contain other design elements that make editing Web Parts more powerful.

To create a new Web Part Page

  1. Select File, New and click the More Page Templates link in the New task pane.

  2. Click the Web Part Pages tab.

  3. Select the Header, Left Column, Body template and click OK.

  4. Save the page as WebPart.aspx.

You should now have a new page that resembles the page in Figure 38.25.

Figure 38.25. A new Web Part Page complete with several Web Part Zones.

graphics/38fig25.gif

Preview the WebPart.aspx page in your browser. You will notice that the page is empty except for a few graphics and a link that says Modify Shared Page, as seen in Figure 38.26. That link is your window into the power of Web Part Zones and the reason why you want to use a Web Part Page for Web Part Zones instead of inserting them on a normal Web page.

Figure 38.26. The empty Web Part Page. The power lies in the Modify Shared Page link.

graphics/38fig26.jpg

Click the Modify Shared Page link to display the Modify Shared Page menu as seen in Figure 38.27.

Figure 38.27. The Modify Shared Page menu allows you to edit the page and its Web Parts.

graphics/38fig27.gif

The options available to you are as follows:

  • Add Web Parts Hovering over this menu produces a submenu that allows you to Browse, Search, or Import Web Parts. Clicking one of these displays the Add Web Parts pane in the browser as shown in Figure 38.28. You can drag Web Parts from this pane to the main window to add the Web Part to the page.

    Figure 38.28. Adding Web Parts to a Web page is done right within your browser window.

    graphics/38fig28.gif

  • Design This Page If the page already contains Web Parts, choosing this option allows you to change the layout of the page and move Web Parts around.

  • Modify Shared Web Parts When you hover over this menu item, you will see a list of all Web Parts that exist within a Web Part Zone. Selecting one of the Web Parts allows you to modify that Web Part. Any Web Part that is not inside of a Web Part Zone is not a shared Web Part that can be edited.

  • Shared View Activates the view of the page that is shared among all visitors to the site.

  • Personal View Activates a view of the page that is customized per user. Only applicable if the site is not browsed using anonymous access.

For a full walkthrough of Web Parts and editing Web Part Pages, see "Windows SharePoint Services 2.0," p. 943.




Special Edition Using Microsoft Office FrontPage 2003
Special Edition Using Microsoft Office FrontPage 2003
ISBN: 0789729547
EAN: 2147483647
Year: 2003
Pages: 443

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net