Building Tree Controls with CFTREE

The CFTREE form lets you display hierarchical information in a space-saving collapsible tree populated from data source queries. To build a tree control with CFTREE, you use individual CFTREEITEM tags to populate the control. You can specify one of six built-in icons to represent individual items in the tree control.

Note To create and populate a tree control from a query:
  1. Open a new file named tree1.cfm in Studio.
  2. Modify the page so that it appears as follows:
    <CFQUERY NAME="engquery" DATASOURCE="CompanyInfo">
        SELECT FirstName + ' ' + LastName AS FullName
        FROM EMPLOYEES
    </CFQUERY>
    <CFFORM NAME="form1" ACTION="submit.cfm" 
        METHOD="Post">
    <CFTREE NAME="tree1" 
    REQUIRED="yes" 
    HSCROLL="no" 
    VSCROLL="yes">
        <CFTREEITEM VALUE=FullName
    QUERY="engquery"
    QUERYASROOT="yes"
    IMG="folder,document">
    </CFTREE>
    </CFFORM>
    
  3. Save the page and view it in your browser.

Code Review
Code Description
<CFTREE NAME="tree1"
Create a tree and name it tree1.
REQUIRED="yes" 
Specify that a user must select an item in the tree.
HSCROLL="no" 
Don't allow horizontal scrolling.
VSCROLL="yes">
Allow vertical scrolling.
<CFTREEITEM VALUE=FullName
QUERY="engquery"
Create an item in the tree and put the results of the query named engquery in it.
QUERYASROOT="yes"
Specify the query name as the root level of the tree control.
IMG="folder,document"
Use the images "folder" and "document" that ship with ColdFusion in the tree structure.

Grouping output from a query

In a similar query, you may want to organize your employees by the department. In this case, you separate column names with commas in the CFTREEITEM VALUE attribute

Note To organize the tree based on ordered results of a query:
  1. Open a new file named tree2.cfm in Studio.
  2. Modify the page so that it appears as follows:
    <!--- CFQUERY with an ORDER BY clause --->
    <CFQUERY NAME="deptquery" DATASOURCE="CompanyInfo">
        SELECT Department_ID, FirstName + ' ' + LastName
        AS FullName
        FROM EMPLOYEES
        ORDER BY Department_ID
    </CFQUERY>
    
    <!--- Build the tree control --->
    <CFFORM NAME="form1" ACTION="submit.cfm"
        METHOD="Post">
    
    <CFTREE NAME="tree1"
        HSCROLL="no"
        VSCROLL="no"
        BORDER="yes"
        HEIGHT="350"
        REQUIRED="yes">
    
    <CFTREEITEM VALUE="Department_ID, FullName"
        QUERY="deptquery"
        QUERYASROOT="Department_ID"
        IMG="cd,folder">
    
    </CFTREE>
    
    <BR><INPUT TYPE="Submit" VALUE="Submit">
    </CFFORM>
    
  3. Save the page and view it in your browser.

Code Review
Code Description
ORDER BY Department_ID
Order the query results by department.
<CFTREEITEM 
VALUE="Department_ID, FullName"
Popluate the tree with the Department ID, and under each department, the Full Name for each employee in the department
QUERYASROOT="Department_ID"
Make the Department ID the root of the tree
IMG="cd,folder">
Use the ColdFusion-supplied images CD and Folder.

Note that the comma-separated items in the IMG and the VALUE attributes correspond. If you leave out the IMG attribute, ColdFusion uses the folder image for all levels in the tree.

CFTREE form variables

The CFTREE tag allows you to force a user to select an item from the tree control by setting the REQUIRED attribute to YES. With or without the REQUIRED attribute, ColdFusion passes two form variables to the application page specified in the CFTREE ACTION attribute:

The root part of the path is only returned if you set the COMPLETEPATH attribute tof CFTREE to YES; otherwise, the path value starts with the first node.

In the previous example, if the user selects the name "John Allen" in this tree, the following form variables are returned by ColdFusion:

form.tree1.node = John Allen
form.tree1.path = Department_ID\3\John Allen

You can specify the backslash character used to delimit each element of the path form variable in the CFTREE DELIMITER attribute.

Input validation

Although, the CFTREE does not include a VALIDATE attribute, you can use the REQUIRED attribute to force a user to select an item from the tree control. In addition, you can use the ONVALIDATE attribute to specify the JavaScript code to perform validation.