Building XML Data-Driven Web Sites with FrontPage 2003

  • Article

 

Microsoft Corporation

August 2003

Applies to:
    Microsoft® Office FrontPage® 2003
    Microsoft Windows® SharePoint™ Services
    Microsoft Office SharePoint Portal Server

Summary: Learn how to use FrontPage 2003 and Windows SharePoint Services to create XML data-driven Web sites. (34 printed pages)

Contents

Introduction
FrontPage 2003 and XML Data-Driven Web Sites
Working with Database Data
Working with XML Files
Integrating a Web Service into a Page
Working with SharePoint Lists
Working with Data Views
Connecting Data Views
Working with Design and Coding Tools
Conclusion

Introduction

Microsoft® Office FrontPage® 2003 makes it incredibly easy to create interactive, data-driven Web sites that can integrate data from many different sources. It is no longer necessary to be a server-side Web programmer with years of experience programming with Microsoft Visual Basic®, Microsoft Visual C#™, Microsoft VBScript, Cold Fusion, or Java to create rich, dynamic, data-driven Web sites that draw data from databases, Web services and XML documents.

Using FrontPage 2003 and Microsoft Windows® SharePoint™ Services you can easily and quickly create eXtensible Markup Language (XML) data-driven Web sites that pull together data from databases, XML documents, and Web services. With FrontPage 2003 and the Windows SharePoint Services as an application server, you can easily sort and filter your data. FrontPage 2003 also supports the formatting of data via its built-in, what-you-see-is-what-you-get (WYSIWYG) eXtensible Stylesheet Language Transform (XSLT) editor. And FrontPage 2003 supports conditional formatting, so you can, for example, call attention to invoices that are past due. Finally, you can connect multiple sources of data together, such as using the results of a database query to filter the data supplied by a Web service.

FrontPage 2003 and XML Data-Driven Web Sites

The Internet is full of static Web sites that require editing the HTML every time a change in content needs to be made. Static Web sites, while easy to start with, represent a maintenance nightmare for most corporations. It is no wonder there are so many stagnant, out-of-date static Web sites on the Internet. A data-driven Web site, on the other hand, draws its content from an external data source, typically a relational database. A well-architected, data-driven Web site is much easier to maintain than a static Web site because most content changes require no change to the HTML behind the Web site. Instead, changes are made to the database that drives the Web site and the Web site automatically adjusts to reflect those changes.

FrontPage 2003 and Windows SharePoint Services extend the idea of the data-driven Web site to work with any data source that can be transformed into XML, hence the term XML data-driven Web site. This means that with FrontPage 2003 and Windows SharePoint Services, you are not limited to using relational databases to drive your data-driven Web site. Instead, you can choose from a multitude of data sources, including XML documents, Web services, server-side scripts, SharePoint lists, and of course, databases. Furthermore, FrontPage 2003 uses XSLT to transform and apply formatting to the live XML data driving the site.

By using XSLT, FrontPage 2003 is able to support the rich formatting of data without having to store the data statically in the page. But probably the most exciting aspect of the use of XSLT is that it is entirely invisible to the FrontPage 2003 user by virtue of the FrontPage 2003 graphical WYSIWYG XSLT editor. When you select a table cell on an XML data-driven Web page and click the bold icon on the toolbar or right-click the selection and choose Conditional Formatting from the shortcut menu, FrontPage 2003 carries out your formatting by manipulating the XSLT behind the page. While FrontPage 2003 makes XML data-driven Web sites possible using XML and XSLT, you don't have to know a stitch of XML or XSLT to take advantage of all of its power. (If you do know XSLT, you can view, and even hand-tune the XSLT using Code view.)

An XML data-driven Web site requires both FrontPage 2003 and Windows SharePoint Services. Windows SharePoint Services is the Microsoft application server for creating team-based Web sites that enable information sharing and document collaboration, increasing individual and team productivity. Windows SharePoint Services is a part of the Windows Server 2003 operating system. FrontPage 2003 itself does not require Windows Server 2003, nor does it have to be installed on the Windows SharePoint Services computer. However, to utilize the XML data-driven features of FrontPage 2003, the Web site must be hosted on a Windows SharePoint Services server, running under the Windows Server 2003 operating system.

Data Source Catalog and Data View

FrontPage 2003 contains a number of features that make it easy to build XML data-driven Web sites, including the Data Source Catalog and the Data View Web Part. The Data Source Catalog is a task pane that organizes available data sources for a Windows SharePoint Services site. You use the Data Source Catalog to insert Data Views onto the page.

A Data View is a live, read-only, customizable view of a data source. You can use a Data View to view data from a database query, an XML document, a Web service , a SharePoint list or server-side scripts. Data Views present live views of the data that you can filter, sort, or to which you can apply styles or conditional formatting in a completely WYSIWYG environment.

Much like Microsoft's .NET initiative, the FrontPage 2003 Data View is built on top of a strong XML foundation. The Data View never stores static data. On the contrary, data within a Data View always points back to the original data source and is formatted using the powerful XSLT language.

You work with Data Views in FrontPage 2003 using the Data View Web Part. A Web Part is a reusable component you can insert onto a page. The Data View is one powerful example of a Web Part that you use to view data. From the Data menu, select Insert and then Web Part to view the Web Parts task pane, which you can use to add other Web Parts to a page. Examples of other Web Parts that ship with FrontPage 2003 include those for working with shared documents, contacts and viewing content.

Note   It is possible to build a SharePoint Web site and personalize it using nothing more than Windows SharePoint Services and a browser. FrontPage 2003, however, provides the ability to fully customize the look and feel of a SharePoint Web site and extend it by integrating data from external sources, including database queries and XML Web services.

Creating an XML Data-Driven Web Site

To create an XML data-driven Web site, you need access to a Windows Server 2003 server running Windows SharePoint Services.

Note   You do not have to build a SharePoint-based Web site to create an XML data-driven Web site. Any site built on a Windows SharePoint Services Web server can take advantage of the Windows SharePoint Services capabilities, whether or not the site has the SharePoint look and feel.

To create an XML data-driven site

  1. On the File menu, select New to open the New task pane.
  2. Under New Web Site, select More Web site templates.
  3. FrontPage 2003 displays the Web Site Templates dialog box. Select the template of your choice from the General tab of the Web Site Templates dialog box.
  4. In the Specify the location of the new Web site box, type a name for the new Web site.

Working with the Data Source Catalog

From the Data menu, select Insert Data View to display the Data Source Catalog, as shown in Figure 1. Using the Data Source Catalog you can view all the data sources available in your site, create new data sources, and insert data views based on those data sources. The Data Source Catalog supports a variety of XML data sources, including database connections, XML files, SharePoint lists, Document libraries, server-side scripts that return XML, and Web services.

Figure 1. The Data Source Catalog

You are not limited to existing data sources; you can also add new data sources to the Data Source Catalog. If you want to create a new SharePoint list, under Data Source Catalog, click Create new SharePoint List (see Figure 1). Similarly, to create a new Document library, click Create new Document Library. To create a new database connection, XML file, server-side script, or Web service, click Add to Catalog under the appropriate node in the Data Source Catalog.

At the bottom of the Data Source Catalog task pane are three options for managing the catalog: Refresh catalog, Manage catalog, and Find a Data Source. There may be times when a recently added data source does not appear in the Data Source Catalog right away. In these cases, you can click Refresh catalog to force FrontPage 2003 to update the catalog with any newly added data sources.

You can use Manage catalog to gain access to data sources from other SharePoint sites. For example, let's say you have some data sources that you added to the Data Source Catalog of another SharePoint site, your Product Catalog site, which you wish to access from the current site. Click Manage catalog to display the Manage catalog dialog box. From the Manage catalog dialog box, click the Add button. At the Collection Properties dialog box, enter a descriptive name for the collection of data sources (the Product Catalog, for example) into the Display name text box, the URL of the site (http://iguana/productcatalog) into the Location text box, and click OK twice. The new set of data sources will now appear at the bottom of the Data Source Catalog after the current site's data sources.

There are a few caveats to using the Manage catalog feature. First, you will need to have Web author rights to the other site in order to access its data source catalog. If the other site is not on the same Windows SharePoint Services server as the current site, then its SharePoint lists will be unavailable. Finally, the information about the other site's data sources is stored on the FrontPage 2003 computer, not the Windows SharePoint Services computer. Thus, any other sites' data sources you add to the Data Source Catalog of the current site using Manage catalog will not be visible to other users of your site unless they also add the data sources using Manage catalog.

Click Find a Data Source to open the Find a Data Source task pane, which you can use to search the catalog for a data source. For example, click Find a Data Source, type northwind into the For text box, and click the Search Now button to return all data sources referencing the word Northwind in their title, description or keywords. Searches are case-insensitive.

Working with Database Data

You can create Data Views based on any database conforming to the OLEDB specification. This includes Microsoft SQL Server™, Oracle, and DB2. Before you can create a database-based Data View, however, you must first create a database connection.

To configure a database connection

  1. On the Data menu, select Insert Data View to open the Data Source Catalog.
  2. Under Database Connections, click Add to Catalog.
  3. In the Data Source Properties dialog box, click the Source tab, and then click the Configure Database Connection button.
  4. In the Configure Database Connection dialog box, enter a name for the SQL Server to which you wish to connect (or type localhost to connect to SQL Server on the current computer), select the authentication method, and click Next.
  5. Select the database, the name of a table, view or stored procedure (or, alternately, select the Using Custom Query check box to create a new query using SQL), and click Finish.
  6. FrontPage 2003 returns you to the Data Source Properties dialog box, where you can refine the fields returned by the query and filter or sort the data.

Walk-Through: Creating a Page Containing Data from a SQL Server Database

In this walk-through you will create a page containing data from the titles table of the SQL Server pubs sample database.

To create a database connection

  1. On the Data menu, select Insert Data View to open the Data Source Catalog.

  2. On the Data Source Catalog, under Database Connections, click Add to Catalog to display the Data Source Properties dialog box.

  3. Under the Source tab, click the Configure Database Connection button.

  4. At the Configure Database Connection dialog box (shown in Figure 2), enter the name of the SQL Server computer into the Server Name box to connect to SQL Server (if you are using MSDE, type servername\sharepoint). Click Next.

    Note   The option you choose under the Authentication section will depend on how Windows SharePoint Services and SQL Server are configured. If the SQL Server database and Windows SharePoint Services are installed on the same computer, SQL Server has been configured to use Windows authentication and the user will be logged on to Windows with sufficient rights to access the database. If SQL Server and Windows SharePoint Services are installed on the same computer, check Use Windows Authentication. Otherwise, check Save this username and password in the database connections and enter a user name and password with sufficient rights to the database.

    Figure 2. The Configure Database Connection dialog box

    Select pubs from the Database dropdown list, and select the titles table from the Table, View or Stored Procedure list box (see Figure 3). Click Finish.

    Figure 3. Use the Configure Database Connection dialog box to create a connection to the titles table in the SQL Server pubs database.

    FrontPage 2003 returns you to the Data Source Properties dialog box. Three additional buttons are available now that a database connection has been established: Fields, Filter, and Sort, as shown in Figure 4. Click the Sort button to sort the query results. FrontPage displays the Sort dialog box, as shown in Figure 5.

    Figure 4. The Source tab of the Data Source Properties dialog box gains additional buttons after you have configured a database connection.

    Figure 5. Select one or more sort fields using the Sort dialog box.

    At the Sort dialog box, select title_id from the Available fields list, click the Add button, and click OK to finalize your sort selection. You are returned to the Data Source Properties dialog box. Click the General tab. Type Titles table from pubs database into the Name box, enter a description and keywords if you wish, and click OK to create the data source connection.

    The Database Connections node of the Data Source Catalog should now contain the newly created connection.

To add the database connection to the page

  1. On File menu, choose New to open the New task pane.

  2. Under New Page, select More Page Templates.

  3. In the Page Templates dialog box, click the Web Part Pages tab, select Full Page, Vertical template, and click OK to create the new page. FrontPage 2003 creates a new page containing a single empty Web Part Zone.

  4. Switch to Design view.

  5. On the Data Source Catalog, under Database Connections, click the new connection and drag it to the page. Drop the Data View on the Web Part Zone (the box containing the text Click to Insert a Web Part). FrontPage 2003 adds a Data View Web Part to the page. The resulting Data View should display a grid containing rows from the titles table.

  6. Save and preview the page in Microsoft Internet Explorer. The page should look similar to the one shown in Figure 6.

    Figure 6. A Data View grabbing its data from the titles table of the SQL Server pubs database

Working with OLEDB Data Sources Other than SQL Server

If you wish to create a database connection to an OLEDB compliant database other than SQL Server (for example, Oracle or DB2), select the Use custom connection string option on the first page of the Configure Database Connection dialog box, click the Edit button, and enter an appropriate connection string.

Using Single-Sign Capabilities of SharePoint Portal Server

Microsoft Office SharePoint Portal Server provides a technology called Single Sign-On. This capability allows the server to cache your credentials in an encrypted store and delegate them as necessary. Using this capability, you can use Windows Authentication with SQL Server even when the SQL Server database is stored on a different server than the Windows SharePoint Services computer.

Troubleshooting Common Data Connection Problems

By default, Windows SharePoint Services disallows the ability to use custom queries in SQL Server database connections. You can turn on the custom query capability by following these steps:

  1. On the Windows SharePoint Services computer, from the Start menu, select Settings, Control Panel, Administrative Tools and SharePoint Central Administration.
  2. From the Central Administration page, under Component Configuration, click Configure data provider service settings.
  3. On the Data Source Provider Settings page, check Enable update query support.

If you need to create a database connection to a database on the other side of a firewall, you will need to either:

  • Install a proxy client on the server, or

  • Make a change to a Web.config file found at C:\\Program Files\Common Files\Microsoft Shared\Web Server Extensions\60\config. Add the following code after the closing </system.web> tag

     <system.net>
  <defaultProxy>
   <proxy proxyaddress="address_of_proxy" bypassonlocal="true" />
  </defaultProxy>
 </system.net>

Working with XML Files

Not all data is stored in databases. Many programs store data in a proprietary format that is inaccessible via the OLEDB specification. Fortunately, most programs do support the exporting of data as XML. And if you can export your data into an XML file, then you can use it as the data source for a FrontPage 2003 Data View.

To add a new XML data source to the Data Source Catalog

  1. On the Data menu, select Insert Data View to open the Data Source Catalog.

  2. Under XML Files, click Add to Catalog. FrontPage 2003 displays the Data Source Properties dialog box.

  3. Under the Source tab, click the Browse button. FrontPage 2003 displays a File Open dialog box.

  4. Navigate to the XML document and click Open to add the file to the catalog.

    If the file is located on your file system or a file share, FrontPage 2003 will warn you and ask you if it is okay to import the file into the site. Click OK to import the file. FrontPage 2003 displays the Import dialog box. Click OK at this dialog box to add the file to the Web site and the Data Source Catalog.

Walk-Through: Creating a Page with Data from an XML Document

In this walk-through you will create a page containing a Data View that derives its content from an XML document. However, before you can begin you will have to create the necessary XML document.

To create the XML Document

  1. On the File menu, choose New to open the New task pane.

  2. Under New page, select Text file. Add the following XML to the document:

    <?xml version="1.0" encoding="utf-8" ?>
<ymtitles>
   <title>
      <title_id>PC1000</title_id>
      <title>ASP.NET For Developers</title>
      <type>popular_comp</type>
      <pub_id>2456</pub_id>
      <price>39.99</price>
   </title>
   <title>
      <title_id>PC4842</title_id>
      <title>ASP.NET Unleashed</title>
      <type>popular_comp</type>
      <pub_id>2456</pub_id>
      <price>54.99</price>
   </title>
   <title>
      <title_id>PC5566</title_id>
      <title>Professional ASP.NET</title>
      <type>popular_comp</type>
      <pub_id>1153</pub_id>
      <price>59.99</price>
   </title>
</ymtitles>

  3. Under the File menu, select Save to save the file.

  4. At the Save As dialog box, in the File name box, type yetmoretitles.xml. Select XML (*.xml; *.xsd; *.xslt; *.dtd) from the Save as type dropdown list. Click Save.

Because the XML document is now part of the Web site, it should now be listed in the Data Source Catalog obviating the need to explicitly add it to the Data Source Catalog.

To add the XML data to the Data View

  1. Create a new page and ensure it is in Design view.

  2. In the Data Source Catalog, under XML files, click Yetmoretitles.xml and drag it onto the page. FrontPage 2003 adds the Data View to the page and displays the XML data in a grid.

  3. Save and preview the page in Internet Explorer. The page should look similar to the one shown in Figure 7.

    Figure 7. This page contains a Data View whose source is an XML document.

Working with XML File Data

FrontPage 2003 links to XML files rather than copying the XML into the page. This means that the XML data, like data that comes from databases connections, is live, and any updates to the data will be reflected in the original file. You can verify this by switching to Code view and attempting to search for a value that appears in the XML by selecting the Edit menu then choosing the Find menu command. For example, try searching for the string ASP.NET for Developers within the page you created in the last walk-through. The search will fail to find any matching data.

Integrating a Web Service into a Page

A Web service is nothing more than a specially constructed component that you can access over standard Web protocols (most commonly, HTTP, the protocol used by the World Wide Web). What is truly exciting about Web services is their simplicity. Because you can access them over the ubiquitous HTTP protocol, and because the calls to Web services and the return values produced by Web services are expressed in an XML language (Simple Object Access Protocol, or SOAP), they are almost universally supported across operating systems and development platforms.

You can use Web services as data sources in FrontPage 2003 XML data-driven Web sites. As with the other data sources discussed in this paper, you must first add a Web service to the Data Source Catalog before you can use it as the source for a Data View.

Note   The term XML Web service is used to describe Web services built with the Microsoft .NET Framework. FrontPage 2003 is not restricted to working with .NET-based XML Web services. FrontPage 2003 will work with virtually any Web service built on any platform as long as it complies with the SOAP and Web Services Description Language (WSDL) standards.

To add a Web service to the Data Source Catalog

  1. On the Data menu, select Insert Data View to open the Data Source Catalog.

  2. Under XML Web Services, click Add to Catalog. FrontPage 2003 displays the Data Source Properties dialog box.

  3. In the Service description location box, enter the URL that points to the Web service's WSDL document and click Connect Now.

    FrontPage 2003 attempts to connect to the Web service, and, if successful, fills in the Connection Info section of the dialog box with information about the Web service as shown in Figure 8. FrontPage 2003 also changes the caption of the Connect Now button to Disconnect.

    Figure 8. After connecting to the Web service, FrontPage 2003 fills the Connection Info section of the Data Source Properties dialog box with information about the Web service.

    You can communicate with the Web service using any of the ports the Web service supports (a port is a protocol for communicating with the Web service). XML Web services (Web services built on the .NET Framework) support three standard ports, or communication methods: HttpGet, HttpPost and SOAP. Web services built on other platforms may support a different mix of ports, but most should support the SOAP port. Unless you have a reason to choose an alternate port, you will want to use the SOAP port, because it is best able to handle complex data types. The SOAP port will be labeled serviceSOAP, where service is the name of the Web service.

    Web services support one or more operations (also known as methods). Select an operation that you wish to call using the Operation drop-down list. In Figure 8, we have chosen the GetTitles operation for the PubsQuery Web service, using the PubsQuerySOAP port.

    Many Web service operations have input parameters. After selecting the Web service operation, FrontPage 2003 fills the Parameters table with a list of parameters and their data types. If the chosen Web service has input parameters, you need to decide how those input parameters would be supplied to the Web service. You can either hard-code a value to be supplied to a parameter or choose to have the value set at runtime. Select a parameter and click Modify. FrontPage displays the Parameter dialog box as shown in Figure 9.

    Figure 9. The Parameter dialog box. In this example, the parameter will be supplied by a querystring item named pid.

    If you wish to hard-code the parameter, then enter its value in the Default Value combo box. Alternately, you can supply the parameter at runtime. The Default Value combo box supplies several options, including [QueryString(arg)] and [Form(arg)]. Select [QueryString(arg)] if you will be supplying the parameter at runtime via a querystring item. After selecting this option you will need to replace the word arg with the name of the query string item. Similarly, select [Form(arg)] if you will be supplying the parameter at runtime using a form field and replace the word arg with the name of the form field.

Walk-Through: Creating a Page that Consumes a Web Service

In this walk-through you will create a page that calls the PubsQuery Web service found at http://www.deeptraining.com/webservices. This XML Web service allows you to make queries of the SQL Server pubs database.

To add a Web service to the catalog

  1. From the Data menu, choose Insert Data View to open the Data Source Catalog.

  2. Under XML Web Services, click Add to Catalog.

  3. In the Data Source Properties dialog box, in the Service description location box, type http://www.deeptraining.com/webservices/pubsquery.asmx?wsdl and click the Connect Now button. FrontPage automatically fills in the Connection Info section of the dialog box with information about the Web service.

  4. Select the PubsQuerySOAP port and GetAuthors operation. GetAuthors returns records from the Authors table. It does not have any parameters.

  5. In the Data Source Properties dialog box, under the General tab, in the Name box, type PubsQuery.Authors and click OK.

    The XML Web Services node of the Data Source Catalog should now contain the newly added Web service.

To add the Web service to a Web page

  1. Create a new page. For this example, use a blank page rather than a Web Part page.

  2. Switch to Design view.

  3. From the Data menu, choose Insert Data View to open the Data Source Catalog.

  4. In the Data Source Catalog, under XML Web Services, click PubsQuery.Authors and drag it to the page.

    The resulting Data View should display a grid containing rows from the authors table as shown in Figure 10.

    Figure 10. The GetAuthors operation of the PubsQuery Web service returns a list of authors. It includes extra columns that you may wish to delete.

    The GetAuthors operation returns the following extra columns that you don't need to display: diffgr:id and msdata:rowOrder. Fortunately, you can remove these two columns by selecting the two columns, right clicking, and then click Delete Columns from the shortcut menu.

    With a couple of additional edits, the page will look even better. First, change the titles of the remaining three columns (au_id, au_lname, and au_fname) to the more friendly names ID, Last Name, and First Name, respectively. Simply select the column headings and type new column names. Next, format the table so that it looks a little more attractive using the AutoFormat feature. To do this, click anywhere inside the table. From the Table menu, choose Select, then choose Table to select the entire table. From the Table menu, select Table AutoFormat to display the Table AutoFormat dialog box. Select an AutoFormat format such as Grid 8 and click OK to apply it to the table. Save and preview the page in Internet Explorer. The page should look similar to the one shown in Figure 11.

    Figure 11. The page after altering the table returned by the GetAuthors operation of the PubsQuery Web service

Working with SharePoint Lists

Windows SharePoint Services team-based sites are great for keeping track of a variety of lists, including lists of announcements, contacts, events and tasks. Using FrontPage 2003 you can work with SharePoint list data using either the List View Web part or the Data View Web part.

To use the List View Web part, select Data and then choose Insert Web Part to open the Web Parts task pane. Drag a particular list type (for example, Announcements or Contacts) from the Web Part Gallery to the page. List Views allow the user to add and edit list items, whereas Data View Web parts can only be used to display data.

There may be times where you wish only to display the items in a SharePoint list. In these cases, you can use a Data View based on the list. By default, FrontPage 2003 populates the Data Source Catalog with entries for the standard SharePoint lists: announcements, contacts, events, general discussion, links, and tasks. You can also add a custom list type by clicking on the Create new SharePoint list link in the Data Source Catalog.

You can convert a List View Web Part into a Data View by right clicking on the List View Web Part and selecting Convert to XSL Data View from the shortcut menu. This keeps the List View toolbar for creating new items, but adds the rich customizability and formatting of the Data View.

Walk-Through: Creating a Data View Using a SharePoint List

In this walk-through you will create a new page within a SharePoint site and add a SharePoint announcements list to the page using the Data Source Catalog.

To add a SharePoint announcements list

  1. Create a SharePoint site by going to the File menu, and choosing New to open the New task pane. Under New Web site, select More Web site templates.

  2. In the Web Site Templates dialog box, under the General tab, select SharePoint Site.

  3. In the Specify the location of the new Web site box, specify a name for the new Web site.

  4. Open the new SharePoint site in your browser by right clicking on the Default.aspx page in the Folder List window and select Preview in Browser from the shortcut menu. To make this walk-through more interesting, click Add new announcement to add one or two announcements to the announcements list before continuing.

  5. Click the File menu and choose New to open the New task pane. Under New page, select More Page Templates.

  6. In the Page Templates dialog box, click the Web Part Pages tab. Select Full Page, then choose the Vertical template and click OK. FrontPage 2003 creates a new page with a single Web Part Zone.

  7. Switch to Design view. On the Data menu, choose Insert Data View to open the Data Source Catalog.

  8. From the Data Source Catalog, under SharePoint Lists, click the announcements list and drag it to the page, dropping it into the Web Part Zone (the box containing the text Click to insert a Web part).

  9. Save the page and load it into your browser. The page should look similar to the one shown in Figure 12.

    Figure 12. A page containing an announcements list with two announcements

Creating Custom Data Views of SharePoint Lists

If you'd like more control over the display of SharePoint list data you can take advantage of a FrontPage 2003 feature that lets you create a copy of a SharePoint list data source. The principal advantage of working with a copy of a SharePoint list data source is that, using the copy, you can specify which fields are displayed and filter and sort the list. To create a copy of a SharePoint list data connection, click an existing SharePoint list data source in the Data Source Catalog and select Copy and Modify from the shortcut menu. FrontPage 2003 displays the Data Source Properties dialog box. From here you can specify the fields to include, as well as filter and sort criteria for the copied data connection. After clicking OK, the copied data connection will be added to the Data Source Catalog.

Working with Data Views

When you create a Data View on a page, you are actually creating a Data View Web Part. The Data View is a powerful and flexible Web Part that you can use to present data in a variety of formats. The Data View is a live, read-only view of the data. The Data View never stores the data in the page; rather, it is linked to the original data source. This ensures that the Data View always provides an up-to-date view of the data.

The file extension for a page containing a Data View is .aspx, the extension of an ASP.NET page (ASP.NET is Microsoft's .NET server-side technology for creating dynamic Web pages; Windows SharePoint Services is built on top of ASP.NET.). If you look at the code behind a Data View, you will see that the Data View is a mixture of ASP.NET code and XML and XSLT.

Data Source Properties Dialog Box

You can manipulate the underlying properties of the data source by clicking on the data source in the Data Source Catalog and selecting Properties from the shortcut menu. This displays the Data Source Properties dialog box. For example, for SharePoint lists and database data sources you can change the set of fields that are returned. For XML Web services, you can change the SOAP parameter values and so on.

Data Views maintain their own private copy of the properties of a data source. You can get to the Data View's copy of these properties, by opening a page containing a Data View, and clicking Data source properties on the Data Source Details task pane.

If you change the data source properties of a data source in the Data Source Catalog after creating one or more Data Views based on that data source, the property changes will only affect new Data Views created after the changes are made. Any existing Data Views created before you make the property changes will be unaffected by the changes.

Using the Data Source Details Task Pane

You can manipulate a Data View using the Data Source Details task pane. You can display the Data Source Details pane by clicking on the data source in the Data Source Catalog and selecting Show data from the shortcut menu. An example of the Data Source Details pane is shown in Figure 13. The Data View Details pane is available from Design and Split views.

Figure 13. The Data Source Details task pane

The Manage view settings section of the Data Source Details task pane contains a number of clickable hyperlinks that display information about the currently selected Data View:

  • Style. The look of the Data View (possible values include basic table, repeating form, two-column repeating form, bulleted list and so on.). In addition, you can use the Style dialog box to control the Data View toolbar and manage Data View paging.
  • Filter. The filtering expression, if any, applied to the Data View.
  • Sort & group. The list of sort/group fields and their order indicated with "+" for ascending and "-" for descending or (none) if there are no sort fields. Grouping fields are indicated by a pair of square brackets surrounding the name of the field.
  • Conditional Formatting. A link to the Conditional Formatting task pane.

The Work with data section of the Data Source Details task pane contains a paginated list of the XML nodes in the data source. Click the "+" or "–" to the left of a node containing child nodes to expand or collapse a node, respectively. Click the navigation icons to move to the previous or next page. If you do not wish to display the data, you can uncheck the Show data values check box.

The next few sections discuss in greater detail how to format, filter, and sort a Data View using the Data View Details task pane.

Selecting Fields

When you drag a Data View to a page, FrontPage 2003 selects the fields to include in the Data View based on the following logic:

  • For SharePoint list data, it selects the Title, Modified, and Modified By fields.
  • For XML data with repeating nodes, the first five children of the first repeating node are selected.
  • For XML data with no repeating nodes, the first five sibling nodes are selected.

You can customize which fields are included on a page by following these steps:

  1. Place the cursor on the Web page where you wish to insert the Data View.

  2. Right-click the data source on the Data Source Catalog and select Show Data from the shortcut menu. FrontPage displays the Data Source Details task pane.

  3. Using the mouse, select the fields within the Work with data section of the Data Source Details pane. You can use the SHIFT key along with the left mouse button to select a contiguous range of fields and the CTRL key along with the left mouse button to select several non-contiguous fields. When selecting fields in this manner, you are not limited to five fields. The order in which you select fields controls the order the fields are displayed.

  4. Click Insert Data View to insert the Data View with the customized set of fields onto the page.

    Figure 14 shows the selection of six non-contiguous fields using the CTRL key and the left mouse button.

    Figure 14. In this Data View, six fields have been selected to insert onto the page.

Applying Styles

When you drag a Data View onto a page, FrontPage 2003 applies a default view style based on the type of data returned by the Data View. You can change the basic look of the Data View by opening the Data Source Details pane and clicking Style in the Work with Data section of the pane. FrontPage 2003 displays the View Styles dialog box. From the General tab of the View Styles dialog box, you can change the basic look of the Data View to a basic table, a repeating form, a bulleted list, a dropdown list or some other style, as shown in Figure 15.

Figure 15. The General tab of the View Styles dialog box

On the Options tab of the View Styles dialog box, you can select additional style options. On this tab you can opt to display a toolbar at the top of the Data View that allows for filtering, sorting, and/or grouping of data at runtime. You can enable a feature that turns the column headings into clickable links that sort the Data View by that column. This feature is only available when the Data View is displayed as a basic table. You can also choose to limit the total number of records displayed or paginate the Data View. Finally, you can modify the text that FrontPage 2003 displays when the Data View has no records to display.

Figure 16 shows a page containing a Data View with the sorting, filtering, and grouping toolbar turned on.

Figure 16. The Data View on this page has been filtered using the filtering, sorting, and grouping toolbar.

From the Options tab of the View Styles dialog box you can turn on or off the display of a header or footer for the Data View, which you can use for displaying totals and other summary calculations. To add a summary expression to the header or footer, place the cursor inside of the header or footer and right-click a field in the Data View Details task pane. From the shortcut menu, select Insert as datatype and FrontPage 2003 creates a summary expression based on the field for you. If the field is numeric, the default summary expression will be to sum the values. If the field is non-numeric, the default summary expression will be to count the values. Using the options menu displayed when you insert the summary expression, you can adjust the type of summary expression used. You can also optionally filter the summary expression so that, for example, you only count values with freight charges over $50.

Filtering, Sorting, and Grouping Data

While you can make it easy for users to sort, group, and filter data at runtime, you are not limited to performing these actions at runtime alone. The Manage view settings section of the Data View Details pane contains hyperlinks that allow you to customize the Data View's style, group, and filter attributes (see Figure 13).

Sorting

  • Click Sort & group to alter the sorting via the Sort and Group dialog box. The Sort and Group dialog box is shown in Figure 17.

    Figure 17. The Sort and Group dialog box

    To sort on a field from the Sort and Group dialog box, select the field in the Available Fields list box and click Add to move it to the Sort Order list box. If you have selected multiple fields (Figure 17 only shows one field selected), you can reorder them in the Sort order list box using the Move Up and Move Down buttons. You can adjust the order of a sort field by selecting it from the Sort order list box and clicking the appropriate option in the Sort Properties option group.

Grouping

You can turn any sort field into a grouping field by selecting the field from the Sort order list box and clicking the Show group header and/or Show group footer check box.

The detail rows beneath a group are normally expanded by default; however, you can select the Collapse group by default option to reverse this behavior. If you wish to completely hide detail rows beneath a group, select the Hide group details check box. For paginated Data Views, you can opt to keep the detail rows of a group together by selecting the Keep group items together check box. Figure 18 illustrates a Data View that has been sorted by type and title, with a group header turned on for the type field.

Figure 18. The Data View on this page is sorted by type and title. In addition, a group header for the type field has been enabled.

Filtering

From the Data View Details task pane, click Filter to create or modify criteria used to filter the data source supplying data to the Data View. FrontPage 2003 displays the Filter Criteria dialog box (Figure 19), which you can use to build sophisticated filters.

Figure 19. You can build fairly complex criteria for filtering the data using the Filter Criteria dialog box.

Click Click here to add a new clause to add a new filtering criterion, which consists of a field, a comparison and a value. You can link together multiple criteria by selecting a Boolean operator (And or Or). In addition, you can group sets of criteria together by holding down the shift key while clicking on the selector in the left-hand margin and clicking the Group button. Grouping criteria is the equivalent of using parentheses in a SQL Where clause.

If you have complicated filtering needs you can click the Advanced button to enter a custom filter expression.

Web Part Properties Dialog Box

You can use the Web Part Properties dialog box to modify certain settings of a Data View. Right-click a Data View and select Web Part Properties to display the Web Part Properties dialog box. From this dialog box, you can adjust a number of properties of the Data View, including the Data View's title, height and width.

Data Views and Caching

For performance reasons, the Data View by default caches its data for 15 seconds. You can control this caching mechanism via the Miscellaneous section of the Web Part Properties dialog box. From this section of the dialog box, you can turn caching on or off, change the caching timeout interval, and determine whether the cache is an all user or per user cache.

Applying Formatting to a Data View

From within FrontPage 2003, you can format the data within a Data View by directly applying formatting from Design view. FrontPage 2003 applies formatting to all data points at the same level in the XML by modifying the XSLT style sheet attached to the page. You can change the XSLT style sheet without having to know anything about XSLT, which makes FrontPage 2003 the first-of-its-kind WYSIWYG XSLT editor!

For example, open the page created in the section Walk-Through: Creating a Page with Data from an XML Document. Switch to Design view. Select the words ASP for Developers in the first column of the grid. On the Format menu, choose Font to display the Font dialog box. Select a font style of Bold and select Red from the color drop-down list. Click OK to apply the formatting choices and dismiss the Font dialog box.

Notice that all of the values in the title column become red and bolded. This happens because formatting is applied not to the data but to the XSLT style sheet for the titles element. This becomes clearer if you change to Split view and look at how the XSLT style sheet is changed when you apply the formatting as shown (see Figure 20).

Figure 20. From Split view you can see how formatting applied to a column value is reflected in the XSLT style sheet.

Notice in Figure 20 how the formatting which we applied to the cell in Design view was applied to the XSLT VALUE-OF element for the title field in Code view:

<b><font color="#FF0000"><xsl:value-of select="title" /></font></b>

FrontPage 2003 stores all Data View data, not just data originating in XML files, as XML/XSLT data. Thus, any formatting you apply to any data list, regardless of the type of its data source, is handled in the same way.

Conditional Formatting

FrontPage 2003 supports the formatting of data based on a condition. For example, you might change the font color of a date field if the date has already occurred. FrontPage 2003 allows you to apply formatting, hide, or show a field in response to some condition.

Once you've added a Data View to a page, you can add conditional formatting. In Design view, select a table cell, table row, or multiple data values within a row; right-click, and select Conditional Formatting from the shortcut menu. Alternately, you can select the value within the field you wish to format and click Conditional Formatting found in the Data View Details task pane. FrontPage 2003 displays the Conditional Formatting task pane. Click the Create button to create a condition (if the Create button is grayed out, then you have not selected the value within the field).

When you click the Create button, FrontPage 2003 displays a dropdown menu with the following choices: Show content, Hide content, and Apply formatting. If you wish to display or hide the contents of a field, use the Show content or Hide content choices, respectively. If you want to change the foreground color, background image, font, or perform some other formatting magic based on a condition, then select Apply formatting. Regardless of which of these three options you choose, your first order of business is to build the condition using the Condition Criteria dialog box. You use this dialog box, which is very similar to the Filter Criteria dialog box discussed earlier, to create a condition that, when the condition evaluates to true, will trigger the showing, hiding, or formatting of content.

For example, let's say you created a page that displayed the records from the Products table from the SQL Server Northwind sample database and you wished to call attention to products where UnitsInStock was equal to 0. With the mouse, select a value in the UnitsInStock column of any row of the table. Right-click the value and select Conditional Formatting from the shortcut menu. Click the Create button. From the dropdown menu, select Apply formatting. In the Condition Criteria dialog box, click Click here to add a new clause to add a new row to the dialog box and select UnitsInStock from the Field Name dropdown. FrontPage sets the default condition to Equals, which is exactly what you want in this scenario. Type 0 into the Value box. The Condition Criteria dialog box should now look like the dialog box shown in Figure 21. Click OK to finalize the condition.

Figure 21. You use the Condition Criteria dialog box to create the condition part of a conditional format.

At this point FrontPage 2003 displays the Modify Style dialog box as shown in Figure 22.

Figure 22. You use the Modify Style dialog box to create the formatting part of a conditional format.

Click the Format button to display a dropdown menu of the various formatting selections you can make, including font, paragraph, border, numbering, and position. For this example, select Border and in the Borders and Shading dialog box, click the Shading tab. Select a background color of red and click OK to return to the Modify Style dialog box. Click OK again to create the conditional format. This conditional format is shown at runtime in Figure 23.

Figure 23. Using a conditional format, the background of the UnitsInStock column is displayed in red when there are no units in stock.

Connecting Data Views

FrontPage 2003 lets you connect multiple Data Views together so that you filter data in one Data View based on the values of another Data View. You can also create Data View connections that supply parameters or are used to conditionally format a Data View. When creating a Data View connection you can place both Data Views on the same page or on different pages.

Walk-Through: Filtering the Records in One Data View with Another

In this walk-through you will create Data Views based on the Categories and Products tables from the SQL Server Northwind sample database. You will then connect the two Data Views together so that the currently selected category from the first Data View is used to filter the products displayed in the second Data View.

To create the database connections

  1. From the Data menu, choose Insert Data View to open the Data Source Catalog.
  2. Under Database Connections, click Add to Catalog.
  3. On the Data Source Properties dialog box, under the Source tab, click Configure Database Connection.
  4. In the Configure Database Connection dialog box, in the Server Name box, type the name of your SQL Server. The option you choose under the Authentication section will depend on how Windows SharePoint Services and SQL Server are configured. (See the section Walk-Through: Creating a Page Containing Data from a SQL Server Database.)
  5. At the second page of the Configure Database Connection dialog box, select Northwind from the Database dropdown list.
  6. From the Table, View or Stored Procedure list box, select Categories.
  7. Repeat steps 1–5 to create a second database connection to the Northwind Products table.
  8. From the Table, View or Stored Procedure list box, select Products.

To add Data Views to the page

  1. Create a new page.
  2. Drag the Categories Data View to the page.
  3. Drag the Products Data View to the page.

The page should now look like the page shown in Figure 24.

Figure 24. The Categories and Products Data Views as shown in Design view

To create the Data View Connection

  1. Switch to Design view.

  2. Right-click the Categories Data View and select Web Part Connections from the shortcut menu. FrontPage 2003 displays the Web Part Connections Wizard as shown in Figure 25.

    Figure 25. On the first page of the Web Part Connections Wizard, you must choose an action for the connection.

  3. Select Provide data values to another Web Part from the dropdown list and click Next.

  4. Select Connect to a Web Part on this page and click Next.

  5. From the Target Web Part list, select Products Data View.

  6. From the Target Action list, select Filter this view using data values and click Next.

  7. In the Columns in Categories on Northwind list, select Category ID. In the Columns in Products on Northwind list, select Category ID. This links the fields between the two Data Views as shown in Figure 26. Click Next.

    Figure 26. On the fourth page of the Web Part Connections Wizard, you identify the fields that will be used to link the two Data Views together.

  8. Choose a column in the provider Web Part to create a hyperlink that triggers the action in the consumer Web Part. Alternately, you can select [Current selection] to use the currently selected item. This option is useful if you have added a row selector image to the Data View that you wish for users to click to fire the connection. Select CategoryName from the dropdown control and click Next.

  9. On the sixth and final page of the wizard, click Finish to create the Web Part connection. Preview the page in your browser.

    The resulting page should look similar to the one shown in Figure 27. When you click the CategoryName hyperlink in the Categories Data View, the Products Data View is filtered to display that category's products.

    Figure 27. Clicking on the CategoryName hyperlink in the first Data View filters the records shown in the second Data View.

    When you connect two Data Views together, FrontPage 2003 by default triggers the connection logic for the first row of the source Data View when you initially call up the page. In many scenarios, this behavior is exactly what you want. However, there may be other scenarios where you would prefer that the connection logic not fire until a user clicks a hyperlink. You can alter the default behavior by right clicking on the source Data View and selecting Web Part Properties from the shortcut menu. Under the Miscellaneous section of the Web Part Properties dialog box, uncheck the FireInitialRow check box to disable the initial connection logic firing upon page load.

Working with Design and Coding Tools

FrontPage 2003 includes a multitude of new tools that you can use to work with XML data-driven Web site pages. Just a few of the new coding and design tools are highlighted here.

Split View

The new Split view feature displays both Design view and Code view at the same time. As you edit controls in Design view, FrontPage 2003 automatically updates the source code displayed in Code view. To reduce screen flashing when coding using Split view, FrontPage only updates Design view to synchronize with source code changes made in Code view until either you click in Design view or press F5. Split view is shown in Figure 28.

Figure 28. Split view enables you to see both the visual design of a page and its source code at the same time.

Code View Navigation

From Code view or Split view, you can use a number of navigation tools to help you get around the code.

To select a tag, its contents, and its closing tag

  1. Switch to Code view.
  2. From the Edit menu, select Code view, then Select Tag (or press CTRL+:].

To find the matching ending tag for a beginning tag (or the beginning tag that matches an ending tag)

  1. Switch to Code view.

  2. Select the tag for which you want to find the matching tag.

  3. From the Edit menu, select Code view, then Find Matching Tag (CTRL+;).

    If the tag is not completely selected when you first use Find Matching Tag or the keyboard shortcut, the first instance selects the first tag. Selecting Find Matching Tag (or using the keyboard shortcut) a second time selects the matching tag.

Quick Tag Selector

When working in Design view (or the Design portion of the window in Split view), FrontPage 2003 displays the Quick Tag Selector. This tool, which appears immediately below the page tab (see Figure 28), shows the HTML tree structure of the page. Using the Quick Tag Selector, you can easily select and manipulate elements and controls on the page.

IntelliSense

When working in Code view, FrontPage 2003 provides IntelliSense to help reduce coding errors. IntelliSense is a coding aid that suggests the names of elements, attributes, statements, functions, subroutines, methods, properties, parameters and enumerations as you write code. IntelliSense dramatically improves programmer productivity by reducing coding mistakes and saving time spent looking up syntax. Similar to the IntelliSense support in Microsoft Visual Studio® .NET, FrontPage 2003 IntelliSense support works with HTML, cascading style sheets (CSS), XSLT, JScript, VBScript, JavaScript and ASP.NET. An example of an IntelliSense drop-down that appears in FrontPage 2003 when inserting an ASP.NET control into a page is shown in Figure 29.

Figure 29. FrontPage 2003 supplies IntelliSense help in Code view for coding.

ASP.NET Controls

FrontPage 2003 supports the display of ASP.NET server controls in Design and Preview views. This support, coupled with FrontPage 2003 support for IntelliSense, makes it easier than ever to edit ASP.NET Web sites, including XML data-driven Web sites using FrontPage 2003 and to move back and forth between FrontPage 2003 and Visual Studio .NET.

Conclusion

FrontPage 2003 can be used with Windows SharePoint Services to produce sophisticated XML data-driven Web sites that integrate with data from a variety of sources, including databases, Web services, XML documents and SharePoint lists. The Data Views produced by FrontPage 2003 and Windows SharePoint Services support a complete set of customization capabilities, including support for styles, filtering, sorting, grouping and conditional formatting. In addition, multiple Data Views can be hosted on the same page (or different pages) and wired together to produce advanced XML data-driven Web pages and sites.

FrontPage 2003 features powerful design and coding tools that will make experienced developers feel right at home when they decide to hand-code pages. These features also make it much easier to manage a single site with both Visual Studio .NET and FrontPage 2003.

FrontPage 2003 supports a wide range of capabilities for building dynamic, XML data-driven Web sites. And while FrontPage 2003 certainly isn't the first Web tool to support building data-driven Web sites, it is the first tool to include a WYSIWYG XSLT editor and the first tool to make building sophisticated data-driven Web sites accessible to not only the server-side Web developer, but to anyone who wants to build dynamic Web sites.

About the author

Paul Litwin is a developer specializing in ASP, ASP.NET, Visual Basic, C#, SQL Server, and related technologies. He is the CEO of Deep Training and the creator of the Deep Training ASP.NET with VB Master Class and ASP.NET with C# Master Class courses. He is also the principal of Litwin Consulting, Inc, an application development consulting company. He has authored a number of books including ASP.NET for Developers (SAMS) and Access 2002 Enterprise Developer’s Handbook (SYBEX). Paul is the conference chair of Microsoft ASP.NET Connections, a Microsoft MVP, the .NET Developer's Association WebDev meeting leader, and a member of the International .NET Association (INETA) Speakers Bureau. You can reach Paul via e-mail.