| The easiest way to display multiple records on a page is by using HTML tables. You can insert placeholders for dynamic data from the recordset fields in a table row, a group of rows, or an entire table, and then add a Repeat Region server behavior to include multiple records on a single page. In the next few tasks in this section, you'll define a recordset using ColdFusion and the CompassTravel database, and then create a dynamic table, step by step, by first inserting a table and adding dynamic fields, and then adding a Repeat Region server behavior to display more than one record at a time. (If you haven't created a connection to the CompassTravel database, see "To connect to a data source using ColdFusion" in Chapter 4 for more information.) In the last task in this section, you'll create a dynamic table in one step by adding the Dynamic Table application object to your recordset. Although it's easier to create a new dynamic table using the Dynamic Table application object than it is to create a dynamic table one step at a time, you may want to add dynamic fields to an existing table or edit an existing dynamic table, so it's useful to be familiar with both techniques. To create a recordset for a dynamic table: 1. | Open a new ColdFusion page in Dreamweaver by choosing File > New > Dynamic page > ColdFusion. Save the page as employees.cfm.
| 2. | In the Application panel group, click the Bindings tab to access the Bindings panel.
| 3. | Click the plus (+) button to add a recordset. (See Chapter 6 for more details on defining a recordset.)
The Recordset dialog appears.
| 4. | In the Name field, enter employees, and from the Data Source drop-down list, select CompassTravel (Figure 9.1).
Figure 9.1. Create a recordset for a dynamic table in the Recordset dialog. 
You'll use this recordset for the remaining tasks in this section.
| 5. | From the Table drop-down list, select employees. In the Columns section, choose the Selected radio button; then select the employeeID, FirstName, LastName, Title, Extension, and Email fields.
| 6. | In the Sort section, select LastName from the first drop-down list and Ascending from the second drop-down list to sort the records in ascending order by last name.
| 7. | Click the Advanced button to access the advanced Recordset dialog.
We'll use the advanced Recordset dialog to add a field from another table in the CompassTravel database to the employees recordset. Although the employees table includes a Department field, it contains the department ID number, not the name. In order to display the department name in the dynamic table, you need to include the DptName field from the departments table.
| 8. | In the Database Items box, select Tables and click the plus button on the left to display the Tables list (Figure 9.2). Select the departments table and click the plus button to display the table fields. Select the DptName field.
Figure 9.2. Use the advanced Recordset dialog to create a complex SQL query involving fields from more than one tablein this case, the employees table and the departments table. 
| 9. | In the Add to SQL section, click the SELECT button to add the DptName field to the SQL statement.
| 10. | Click the Test button to preview the recordset data (Figure 9.3).
Figure 9.3. View the recordset data in the Test SQL Statement dialog before you save the recordset. 
| 11. | Click OK to close the preview, and then click OK in the advanced Recordset dialog to save the recordset and close the dialog. The employees recordset now appears in the Bindings panel list (Figure 9.4).
Figure 9.4. After you add a recordset, the recordset name appears in the Bindings panel list. 
| 12. | Save the employees.cfm page.
|
To insert a table and add dynamic table fields: 1. | Open the employees.cfm page in Design view. Choose File > Save As, and save the page as employees1.cfm.
We're saving this page with a different name because you'll need the original employees.cfm page in the task "To create a dynamic table with an application object," later in this section.
| 2. | Place the insertion point at the location on the page where you want to insert the table, and then choose Insert > Table. The Table dialog appears.
The next few steps involve adding two rows with seven columns for the seven fields in the employees recordset.
| 3. | In the Rows field, enter 2, and in the Columns field, enter 7 (Figure 9.5).
Figure 9.5. Use the Table dialog to specify table options such as number of rows and columns, width, border size, cell spacing, and cell padding. 
| 4. | In the Table Width field, enter 700, and select pixels from the drop-down list. In the Border Thickness field, enter 1.
| 5. | In the Cell Padding field, enter 2 to add two pixels of padding in each table cell. In the Header section, select Top to add table header cells to the top row of the table. Click OK to close the dialog and insert the table.
| 6. | In the Application panel group, click the Bindings tab to access the Bindings panel. From the recordset list, click the plus (+) button to the left of Recordset (employees) to display the field names (Figure 9.6).
Figure 9.6. On the Bindings panel, expand the employees recordset to display the field names. 
| 7. | Select the LastName field, and drag the field to the first cell of the second row in the table. A placeholder displays in the table cell with the name of the table and the name of the field (Figure 9.7).
Figure 9.7. In Design view you can view placeholders for dynamic table fields. 
Repeat to add a field to each of the table cells in the second row, in this order: FirstName, employeeID, DptName, Title, Extension, Email.
| 8. | In the first row of the table, enter a column name in each cell: Last Name, First Name, ID, Department, Title, Extension, and Email (Figure 9.8).
Figure 9.8. Add column headers to the first row of table cells. 
The column names are used to identify the information in each column, but they don't need to be exactly the same as the actual field names.
| 9. | Save the page.
|
To add a Repeat Region server behavior: 1. | Open the employees1.cfm page in Design view.
| 2. | Select the second row of the table.
You only want to repeat the second row, not the row with the column names, so be sure not to select the whole table.
| 3. | In the Application panel group, click the Server Behaviors tab to access the Server Behaviors panel.
Each placeholder you inserted in the preceding task is included in the list of Dynamic Text fields (Figure 9.9).
Figure 9.9. On the Server Behaviors panel, the placeholders for the dynamic table fields are included in the list of Dynamic Text fields. 
| 4. | Click the plus (+) button. The Server Behaviors menu appears. Select Repeat Region (Figure 9.10).
Figure 9.10. Add a Repeat Region server behavior in the Server Behaviors panel. 
The Repeat Region dialog appears, with the employees recordset selected in the Recordset drop-down list (Figure 9.11).
Figure 9.11. Enter the number of records you want to display on each page in the Repeat Region dialog. 
| 5. | In the Show field, enter 10 to display ten records on each page.
| 6. | Click OK to close the dialog.
On the Server Behaviors panel, Repeat Region appears in the list of Server Behaviors (Figure 9.12).
Figure 9.12. Repeat Region is added to the list on the Server Behaviors panel. 
| 7. | Save the employees1.cfm page.
| 8. | Select File > Preview in Browser to view the first ten records in the recordset (Figure 9.13).
Figure 9.13. Preview the page in a browser to view the records in the dynamic table. 
In the "Navigating Records" section, later in this chapter, you'll add navigation links to create additional pages to display the rest of the employees recordset data.
|
To edit a server behavior: 1. | Open the employees1.cfm page you saved from the previous task.
When the page containing the server behavior is open in the Document window, you can make changes to the server behavior.
| 2. | In the Application panel group, click the Server Behaviors tab to access the Server Behaviors panel.
| 3. | Double-click the Repeat Region listing. The Repeat Region dialog appears, displaying the current settings (Figure 9.11).
| 4. | Make whatever changes you need to make in this dialog. In the Recordset drop-down list, select a different recordset; or, in the Show field, change the number of records that display on a page. Click OK to save the changes and close the dialog.
| 5. | Save the page to save the changes in the server-side code.
|
Adding a Dynamic Table application object In the following task, you'll create a dynamic table in one step by adding the Dynamic Table application object with the employees recordset to your Dreamweaver page. This application object inserts HTML table code, and then adds column headings to the first row of table cells (using the recordset field names), placeholders for the recordset fields to the second row of table cells, and a Repeat Region server behavior to display multiple records in the table. This table includes the same fields as the table you created in the preceding tasks, but the formatting and field order are different. To create a dynamic table with an application object: 1. | Open the employees.cfm page in Design view. (You created this page in "To create a recordset for a dynamic table," earlier in this section.)
| 2. | Place the insertion point at the location on the page where you want to insert the table, and then select Insert > Application Objects > Dynamic Data > Dynamic Table (Figure 9.14).
Figure 9.14. Insert an application object to add the HTML and server-side code to create a dynamic table. 
The Dynamic Table dialog appears, with the employees recordset selected in the Recordset field.
| 3. | In the Show field, enter 10 to display ten records on each page (Figure 9.15). In the Border field, enter 1. In the Cell Padding field, enter 2, and in the Cell Spacing field, enter 0. Click OK to insert the table and close the dialog.
Figure 9.15. Use the Dynamic Table dialog to specify the number of records you want to display on a page, as well as table border size, cell padding, and cell spacing. 
The dynamic table appears in Design view (Figure 9.16). The recordset field names display in the cells of the first row, and placeholders for the recordset fields display in the cells of the second row.
Figure 9.16. The Dynamic Table application object automatically adds a dynamic table, including column headers and placeholders. 
| 4. | If you want to change any table-formatting properties, select the table in Design view and open the Property inspector (Window > Properties). Add and edit formatting in the Property inspector (Figure 9.17).
Figure 9.17. Add and edit table formatting in the Property inspector. 
| 5. | If you want to change the order of the cells in the second row, select and delete the placeholder in any cells you want to change. Follow the instructions in Steps 6 and 7 in the task "To insert a table and add dynamic table fields," earlier in this section, to add new placeholders for dynamic text. Be sure to change the column headings if you change the placeholder text.
| 6. | If you want to change the column headings in the first row of the table, just select the text you want to change and enter new text.
| 7. | Save the page. Choose File > Preview in Browser to view the first ten records of the employees recordset.
|
 Tips
Names and placeholders for the recordset fields are added to the dynamic table in the order in which the fields were added when you created the recordset. If you know you will be creating a dynamic table, add the fields to the recordset in the order in which you want them to appear in the table row. The Application Objects menu (Figure 9.14) lists both server behaviors and application objects. If you compare the items available in this menu with the ones available in the Server Behaviors menu in the Server Behaviors panel (Figure 9.10), you'll see that the Application Objects menu includes all the options in the Server Behaviors menu plus additional options for inserting application objects, such as dynamic tables and recordset navigation bars. You can insert application objects with the Insert menu (Insert > Application Objects) or the Application Insert bar. The same options are available in both and include server behaviors as well as application objects. The available options are based on the application server type of the active page in the Dreamweaver Document window and vary slightly for each application server type.
|
