User Guide

Building Tree Controls with cftree 147
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, or supply a
URL to your own gif image.
To create and populate a tree control from a query:
1 Open a new file named tree1.cfm in ColdFusion Studio.
2 Modify the page so that it appears as follows:
<cfquery name="engquery" datasource="CompanyInfo">
SELECT FirstName + ’ ’ + LastName AS FullName
FROM Employee
</cfquery>
<cfform name="form1" action="submit.cfm"
method="Post">
<cftree name="tree1"
required="Yes"
hscroll="No">
<cftreeitem value=fullname
query="engquery"
queryasroot="Yes"
img="folder,document">
</cftree>
</cfform>
3 Save the page and view it in your browser.
Reviewing the code
The following table describes the highlight code and its function:
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.
<cftreeitem value=FullName
query="engquery"
Create an item in the tree and put the results of the
query named engquery in it. Because this tag uses
a query, it puts one item on the tree per query entry.
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.