# 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.

| 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

| 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:

- form.treename.node -- Returns the node of the user selection.
- form.treename.path -- Returns the complete path of the user selection, in the form: root\node1\node2\node_n\value

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.