Generating a Grouped Page

Grouped pages display records of related tables in a set of hierarchical page sections, each of which has its own Record Navigation control (refer to Figure 24.1, at the beginning of the chapter). The section hierarchy is based on the relationships between the sections' tables, as displayed in the Field List. You use the Field List to add individual text boxes to display field values from the base and related tables.

Creating a Three-Level Hierarchical Grouped Page Structure

The first step in designing a grouped page is to create the group structure. Follow these steps to establish a basic three-level grouped hierarchy from the Customers, Orders, and Order Details table:

1. Open a new page in Design view, open the Field List, and expand the Customers table node. Type Customers-Orders-Order Details as the title, reduce the font size, and delete the empty <H1> element.

2. Drag the CustomerID field to the Section: Unbound region. The Section: Unbound caption changes to Header: Customers, and a NavigationSection: Customers appears at the bottom of the page. When you drag a field from the Field List at this point, the Layout Wizard's dialog doesn't open.

3. Adjust the size of the CustomerID text box to accommodate the five-character CustomerID value. Apply the Bold attribute to the label, and adjust its size.

4. With the CustomerID text box selected, click the Promote button of the toolbar to add an Expand control to the section and create an additional Header: Customers section. Header: Customers changes to Header: Customers-CustomerID.

5. Expand the Field List's Related Tables and Orders nodes, and drag the OrderID field to the Header: Customers section. Select the Columnar option in the Layout Wizard dialog, and click OK to add an OrderID text box. The section name changes to Header: Orders (see Figure 24.58).

   Figure 24.58. Promoting the first level of the hierarchy and dragging the OrderID field from the related Orders table creates the second level.

   

   Tip

   Be sure to select tables at the second and lower levels of the hierarchy from the Field List's Related Tables node to preserve the relationships between the tables in your page.

6. Select the OrderID text box, and click the Promote button. Header: Orders changes to Header: Orders-OrderID, and a new Header: Orders section is added to the page.

7. Scroll in the Field List to the Orders table node, expand its Related Tables node, and expand the Order Details node.

8. Drag the UnitPrice field to the Orders-OrderID section, leaving room for a label and text box to its left. Accept the Columnar default, and click OK to close the Layout Wizard. The section name changes to Header: Order Details. (Don't drag the ProductID field to the section; ProductID is a lookup field, which opens the Combo Box Wizard.)

9. Drag the Quantity, and Discount fields to the Header: Order Details section.

10. In the Field List, open the Order Details Node, expand its Related Tables node, and expand the Products node. Drag the ProductID field to the left of the UnitPrice field, and click OK to close Layout Wizard dialog.

11. Drag the ProductName and QuantityPerUnit fields under the first row of labels and text boxes, and then reduce the height of the Order Details section.

12. Apply bold formatting to the labels, and adjust the size and location of the newly added labels and text boxes (see Figure 24.59).

    Figure 24.59. The Order Details section includes fields from the Order Details table and the related Products table.

    

13. Change to Page view to check your work so far. Click the Expand control of the Customers section to display the first five OrderID values for ALKFI, and expand one of the OrderIDs (see Figure 24.60).

    Figure 24.60. An example of the OrderIDs page.

    

14. Choose File, Save As, and give the shortcut a readable name, such as Orders and Details by Customer. Save your page with a shorter file name, such as CustomersOrdersDetails.htm, and acknowledge the warning message.

Adding Fields and Captions

Moving labels to captions increases the number of text boxes that you can place on a single line. Adding fields to existing grouping sections requires an approach that differs from adding fields to a detail section. If you drag an additional field from the table node to the grouping section, the text box displays CountOfFieldName, not FieldName values. To add text boxes to display additional fields, you must add an unbound text box from the Toolbox and then bind the text box to the field in the Data page of the text box's properties window.

To make the grouped page more readable and informative by removing the default alternate row color, moving some labels to captions, and adding more fields to the existing headers, do the following:

1. Return to Page Design view, right-click the Customers-CustomerID header, and choose Group Level Properties. In the All page, type white as the value of the AlternateRowColor property. Do the same for the Orders-OrderID and Order Details groups.

2. Move the labels and text boxes in the Customers-CustomerID and Orders-OrderID headers up one grid dot, and then move the bottom of the headers to equalize the top and bottom margins. (Press Ctrl when dragging the bottom of the header to inhibit the snap-to-grid feature.) Delete ID from the CustomerID label.

3. Click the Navigation: Order Details bar and change the BackgroundColor property value from gainsboro to white. Do the same for the Orders-OrderID and Order Details sections.

4. Open the Toolbox, and select the Text Box control. Draw a text box to the right of the CustomerID text box, and delete its label.

5. With the added text box selected, click the Other tab and type txtCompanyName as the Id value. Click the Data tab, open the ControlSource list, and select CompanyName (see Figure 24.61). When you close the list, the property value changes to GroupOfCompanyName1: CompanyName.

   Figure 24.61. Adding text boxes to display field values to group sections requires using the Toolbox to add an unbound text box and then setting the ControlSource property value of the text box to the desired field.

   

6. Repeat step 4 for the City and Country fields, but don't delete the labels. Type City: and Country: as the label captions, and apply the bold attribute.

7. Repeat step 5 for the two text boxes, naming them txtCity and txtCountry, and setting the ControlSource property value to City and Country, respectively.

   Tip

   Check your work frequently as you add bound text boxes. If the result in Web Page Preview is what you want, save the page.

8. Following the same procedure, add Order Date:, Shipped Date:, and Ship Via: labels and text boxes to the Orders-OrderID section. For Ship Via, select CompanyName1 under the ShipperID field as the ControlSource property value.

9. Right-click the Order Details section header, and choose Caption to add the default caption section above the header.

10. Change the Product ID: label caption to ID, and remove the colons from the other labels.

11. Select all the labels, and press Ctrl+X to remove them from the Header section. Click the Caption: Order Details header, and press Ctrl+V to add the labels to the caption.

12. Arrange the caption labels and header text boxes, and decrease the depth of the Header: Order Details section, as shown in Figure 24.62. Thensave the page.

    Figure 24.62. The redesigned Order Details section conserves vertical space on the page.

    

13. Open the page in IE 6+ to test your work (see Figure 24.63).

    Figure 24.63. Design changes to the three-level hierarchy achieve the goals of providing additional information on customers, orders, and line items.

    

Tweaking a Read-Only Page Design

The following are a few minor design changes that improve the overall appearance of the page and make the order selection process more usable:

1. The text of labels isn't aligned vertically with the contents of text boxes. Select all labels in the Header: Customers-CustomerID section, press Ctrl, and press the key to move the labels down a pixel at a time. (Pressing the Ctrl+ArrowKey combination moves selected objects one pixel at a time in any direction.)

2. Changing the label color to steel blue the default named color for caption sections reduces the contrast of the page. With the labels selected, click the Properties button and replace the default #000000 (black) value of the Color property to steelblue.

3. Repeat steps 1 and 2 for the labels of the Orders-OrderID section.

4. Order data is more useful if you sort orders in descending date sequence. To change the sort order of the Orders: OrderID section, right-click the section, choose Group Level Properties, and add a space and Desc to the value of the DefaultSort property.

5. If you don't have many line items per order and orders per customer, which is the case for Northwind Traders, set the Group Level DataPageSize property value to All and set RecordNavigationSection to False for the Orders-OrderID and Order Details headers.

6. You can edit records only in nongrouped sections in this case, the Header: Order Details section. The ProductID, ProductName, and QuantityPerUnit values come from the Products table, so it's not feasible to add or edit records with this configuration. Open the Group Level Properties window for this section, and set the AllowAdditions, AllowDeletions, and AllowEdits property values to False. Set DataPageSize to All and RecordNavigationSection to False.

Figure 24.64 shows the effect of the preceding changes in Page view. The final version of the CustomersOrdersDetails.htm page is in the \Seua11\Chaptr24 folder of the accompanying CD-ROM.

Figure 24.64. The final tweaking process involves sorting the orders in descending date sequence, removing the navigation bars for orders and line items, and vertically aligning the text of labels and text boxes.