In a previous article for ColdFusion Developers Journal I described a ColdFusion component (CFC) that I wrote to report on what search terms visitors used on a site's search facility when visiting the Web sites I managed (February 11, 2005 - http://cfdj.sys-con.com/read/48234.htm).

My work is largely comprised of moderate-traffic sites hosted on shared servers and, while most hosting companies offer fairly robust statistical reporting, including well-articulated reports on the referring keyword terms used to enter a site from a search engine, I wanted a report that would show in a simple and easily readable way what terms had been entered in the search facilities (usually Verity-powered) that I had created for use within the site.

One method of the component recorded each search term used when it was used in a data table, and other methods called and displayed a time-sorted count of the most frequently used search terms.

That turned out to be so handy for me and my clients that I crafted another similar CFC that reports on which data records are being called into a detail page so the client and I can see, for instance, what performing arts events are most looked at or e-mailed about.

Since the same collection of records can be called from different calling pages and into different presentations of the details - for instance, one page of event listings can call a detailed page regarding one event, or a detail page itself can call a page to "Email a friend" - this reporting component needed to have a field in its data table for the calling page as well as the record called.

Displaying that information is a classic use of the "group" attribute of ColdFusion's <cfoutput> tag, which specifies the query column to be used when retrieving a record set that's ordered on a query column.

For our calling page CFC, the reporting query looks like this:

<cfquery name="recordcount" datasource="#thedatasource#">
SELECT thecallingscript, thecalledrecordtitle, COUNT(thecalledrecordtitle) AS TheCount
FROM tbl_calledrecords
WHERE thecalledtime BETWEEN #CreateODBCDate(arguments.thestartdate)
# AND #CreateODBCDate(DateAdd('d',1,arguments.theenddate))#
GROUP BY thecallingscript, thecalledrecordtitle
ORDER BY thecallingscript, TheCount DESC, thecalledrecordtitle
</cfquery>

The code for the <cfoutput> tag looks like this:

<cfoutput query="recordcount" group="thecallingscript">
    Here were the records called to the page
    <strong>#thecallingscript#</strong>:<br>
    <table width=600 cellpadding=2 cellspacing=0 border=1>
    <cfoutput>
      <cfif TheCount gte arguments.minRecords>
        <tr>
        <td style="font-size:11px;" valign="top" align="left" width=80>#TheCount#</td>
        <td style="font-size:11px;"" valign="top" align="left">#thecalledrecordtitle#</td>
        </tr>
      </cfif>
    </cfoutput>
    </table><br>
<br>
</cfoutput>

And that results in a display that looks like Table 1.

Note the difference between <cfoutput>'s "group" attribute and "GROUP BY" in the SQL statement. GROUP BY is used with aggregate functions to sort rows into the specified groups before applying an aggregate function to each group.)

What <cfoutput>'s group attribute does is isolate the query column that identifies a group defined by the query's ORDER BY clause, whereupon you can, with an additional <cfoutput> tag nested inside, output the individual rows that have matches to that specified query column. In our example, we output the variable #thecallingscript# and use it as a title for an output of each set of rows creating a match for the different instances of #thecallingscript#.

This use of the "group" attribute can be nested at as many levels as you need. You can have a query that orders rows by several fields, like this:

<cfquery name="thequery" datasource="datasource">
SELECT maincategory, subcategory, subsubcategory, description, theurl
FROM thetable
ORDER BY maincategory, subcategory, subsubcategory, description
</cfquery>

And you can output it by nesting at each group level like Table 1:

<cfoutput query="thequery" group="maincategory">
<ul>
   <li>#maincategory#</li>
   <cfoutput group="subcategory">
   <ul>
     <li>#subcategory#</li>
     <cfoutput group="subsubcategory">
     <ul>
       <li>#subsubcategory#</li>
       <cfoutput>
       <ul>
         <li><a href="theurl">#description#</a></li>
       </ul>
       </cfouput>
     </ul>
     </cfoutput>
   </ul>
   </cfoutput>
   </ul>
</ul>
</cfoutput>

Note that the source query is identified only in the outermost top-level <cfoutput> tag, and that it's not necessary to name the "group" at the innermost level. We'll see in the next example that it's also possible (and very useful) to have more than one <cfoutput> at a given level of the nesting.

What You See Is What You Output, Made to Look the Way You'd Like It To
Because this means of grouping data comes on the output side of the process, the means of styling the display can be made an integral part of the grouping, such as our simple use of unordered list tags in the example above, and is independent of any of the query logic except the ORDER BY clause - complex queries that join two or more tables use aggregate functions. Filters by various parameters are ready for use in the "group" attribute of cfquery.

What's more the various nested levels of grouped output can each have their own display treatment, allowing for some handy integration with CSS or other display code.

A case in point came up recently when one of my clients, a very successful biomedical firm that operates plasma donation centers in a couple of dozen U.S. states, asked for a map application on its Web site that would show its donation centers by state, with detail pages as the site visitor drilled down to specific states and cities.

There are countless examples on this kind of display on various sites around the Web, a large number of which employ HTML <map> and <area> tags to define coordinates of spots on a map that can be linked (Table 2). For users of an application server like ColdFusion, however, this can be made into a dynamic display and the "group" attribute of <cfquery> plays a central role in passing information from the database into CSS that makes the display work.

For the biomedical firm, I started by creating a graphical map of the U.S. and then measured coordinates for the spot on each state where a text abbreviation would sit; these coordinates are stored in a simple table called "tbl_states":

The "tbl_states" table gives me a set of map coordinates to join with my ongoing database of plasma center locations for this query that will get the information needed for the display:

   <cfquery name="getmapinfo" datasource="#thedatasource#">
SELECT distinct c.state, c.city, c.status, c.state_full, s.state_ab, s.state_top, s.state_left
FROM tbl_states s
LEFT OUTER JOIN biocenters c
ON s.state_ab = c.state
ORDER BY state_ab, status, city
   </cfquery>