CFTREE |
Description Inserts a tree control in a form. Validates user selections. Used within a cfform tag block. You can use a ColdFusion query to supply data to the tree.
Category Forms tags
Syntax
    <cftree name = "name"
    format="applet", "flash", xml, or "object"
       required = "yes" or "no"
       delimiter = "delimiter"
       completePath = "yes" or "no"
       appendKey = "yes" or "no"
       highlightHref = "yes" or "no"
       onValidate = "script_name"
       message = "text"
       onError = "text"
       lookAndFeel = "motif" or "windows" or "metal"
       font = "font"
       fontSize = "size"
       italic = "yes" or "no"
       bold = "yes" or "no"
       height = "integer"
       width = "integer"
       vSpace = "integer"
       hSpace = "integer"
       align = "alignment"
       border = "yes" or "no"
       hScroll = "yes" or "no"
       vScroll = "yes" or "no"
       style= "style specification"
       enabled = "Yes" or "No"
       visible = "Yes" or "No"
       tooltip = "tip text"
    onChange = "ActionScript"
       notSupported = "text">

    </cftree>
See also cfapplet, cfcalendar, cfform, cfformgroup, cfformitem, cfgrid, cfinput, cfselect, cfslider, cftextarea, cftreeitem; "Working with action pages" in Chapter 26, "Introduction to Retrieving and Formatting Data," and "Building tree controls with the cftree tag" in Chapter 27, "Building Dynamic Forms with cfform Tags," in ColdFusion MX Developer's Guide
History ColdFusion MX 7:

- Added the format attribute and support for generating Flash and XML and object output.
- Added enabled, onChange, style, tooltip, and visible attributes (Flash format only).

ColdFusion MX: Changed behavior: ColdFusion renders a tree control regardless of whether there are any treeitems within it.

Note: | In XML format, ColdFusion MX passes all attributes to the XML. The supplied XSLT skins do not handle or display XML format trees, but do display applet and Flash format trees.

Note: | All attributes are passed to the XML generated in XML format, but no ColdFusion MX skin interprets cftree XML.

Usage This tag must be in a cfform tag block. The applet format tree requires the client to download a Java applet. Also, if the client does not have an up-to-date Java plugin installed, the system might also have to download an updated Java plugin to display an applet format tree. The Flash format tree uses a Flash control, and can be embedded in an HTML format cfform tag. For this tag to work properly in either Flash or applet format, the browser must also be JavaScript-enabled.

Note: | If you specify Flash format for this tag in an HTML format form, and you do not specify height and width attributes, Flash takes up more than the remaining visible area on the screen. If any other output follows the tree, including any form controls, users must scroll to see it. Therefore, if you follow a Flash tree in an HTML form with additional output, specify height and width values.

If the following conditions are true, a user's selection from query data that populates this tag's options continues to display after the user submits the form:

- The cfform preserveData attribute is set to "Yes"
- The cfform action attribute posts to the same page as the form itself (this is the default), or the action page has a form that contains controls with the same names as corresponding controls on the user entry form

For more information, see the cfform tag entry.

Form variables When you select a tree item and submit the form that contains the tree, ColdFusion creates a structure with two variables in the action page Form scope. The structure name is the tree name. The fields are as follows:
object format If you specify object in the format attribute, ColdFusion returns the tree as a ColdFusion structure, and does not send the tree to the browser. You can, for example, loop over the structure to populate a menu, generate "breadcrumb" links for page navigation, or create a dhtml tree.

Note: | If you specify an object format tree in an XML format form, ColdFusion does not generate the tree.

The structure variable name is specified by the cftree name attribute. The top level of the structure has two types of entries:

- Attribute settings
- A children array

The structure has top-level entries with the values of the following cftree attributes:
The top-level children entry is an array of items entries. Each item has the following entries:
Example The following example creates a tree that shows available courses from the CourseList table of the cfdocexamples database, and puts each department's courses in a folder. This example is displayed in Flash and uses the Departments list to get department names.
    <cfquery name="getCourses" datasource="cfdocexamples">
       select d.dept_name, c.course_id, c.CorName, c.CorLevel, c.corName +' ( '
    +c.corLevel +' )' as corLabel
       from CourseList c, Departments d
       where d.Dept_ID = c.Dept_ID
       order by d.dept_Name, c.corName, c.corLevel
    </cfquery>

    <cfform name="studentForm" format="flash" width="400" height="450">
       <cftree name="courseTree"  width="350" height="400">
          <cftreeitem
             query="getCourses"
             value="dept_name,Course_id"
             display="dept_name,CorLabel" queryasroot="NO" expand="yes,no">
       </cftree>
    </cfform>
The following example creates a tree that shows the basic information about all employees in an organization, organized by department. The departments are expanded to show all employees. You can click the + signs to display additional information. If you click the employee name, ColdFusion links back to the same page and displays the Path and node values for the selection.
    <!--- Query the datasource to get employee information. --->
    <!--- Group the output by Department.
       (All fields are required in Group By clause.) --->
    <cfquery name = "GetEmployees" dataSource = "cfdocexamples">
       SELECT Emp_ID, FirstName, LastName, EMail, Phone, Department
       FROM Employees
       GROUP BY Department, Emp_ID, FirstName, LastName, EMail, Phone
    </cfquery>
    <html>
    <body>
    <h3>cftree Example</h3>

    <!--- The following runs if the user clicked on a link in the tree.
       A complete application would use the ID for additional processing. --->

    <cfif isdefined("Form.fieldnames")>
    <b>Selected item information</b><br>
    <cfoutput>
    <b>Path: </b>#form.Employees.Path#<br>
    <b>node: </b>#form.Employees.node#<br>
    <br>
    </cfoutput>
    </cfif>

    <!--- Display the tree. The cftree tag must be in a cfform. --->
    <cfform action="#cgi.script_name#" preservedata="Yes" format="Flash">
       <cftree name = "Employees" height = "400" width = "400"
          font = "Arial Narrow" italic="yes" highlighthref="No" HScroll="no"
    VScroll="no"
          completepath="no" lookandfeel="windows" border="No" required="yes">
          <!--- cfoutput tag with a group attribute loops over the departments. --->
          <cfoutput group="Department" query = "GetEmployees">
             <cftreeitem value="#Department#" parent="Employees" expand="yes">
             <!--- This cfoutput tag loops over the records for the department.
                   The cfoutput tag does not need any attributes. --->
             <cfoutput>
                <!--- Create an item for each employee in the department.
                   Do not expand children. Each employee name links to this page,
                   and sends the employee ID in the query string.--->
                <cftreeitem value = "#LastName#, #FirstName#"
                   parent = "#Department#" expand="false" img="cd"
                   href="#cgi.script_name#?user_id=#emp_id#">
                <!--- Each Employee entry has Id, and contact info children. --->
                <cftreeitem value = "#Emp_ID#" display = "Employee ID: #Emp_ID#"
                   parent = "#LastName#, #FirstName#" img="remote">
                <!--- Each node must be unique value, so use Emp_ID om value. --->
                <cftreeitem value = "#Emp_ID#_ContactInfo" img="computer"
                   display = "Contact Information"
                   parent = "#LastName#, #FirstName#" expand = "false">
                <!--- ContacInfo has two children --->
                <cftreeitem value = "#Phone#" parent = "#Emp_ID#_ContactInfo">
                <cftreeitem value = "#Email#" parent = "#Emp_ID#_ContactInfo">
             </cfoutput>
          </cfoutput>
       </cftree>
       <cfinput type="Submit" name="submitit" value="Submit" width="100">
    </cfform>

NAME |
| Required;
| All
Name for tree control.

FORMAT |
| Optional;
| All
Default value: "applet"

- applet: displays the tree using a Java applet in the browser.
- flash: displays the tree using a Flash control
- object: returns the tree as a ColdFusion structure with the name specified by the name attribute, For details of the structure contents, see "object format".
- xml: generates an XML representation of the tree. In XML format forms, includes the generated XML in the form.In HTML format forms, puts the XML in a string variable with the name specified by the name attribute.

REQUIRED |
| Optional;
| Applet, Flash
Default value: "No"

- Yes: user must select an item in the tree control.
- No

DELIMITER |
| Optional;
| All
Default value: "\\" Character to separate elements in the Forms.treename.path variable of the action page.

COMPLETEPATH |
| Optional;
| Applet, object
Default value: "No"

- Yes: starts the Form.treename.path variable with the root of the tree path when cftree is submitted.
- No: omits the root level from the Form.treename.path variable; the value starts with the first child node in the tree.

For the preserveData attribute of cfform to work with the tree, you must set this attribute to Yes.

For tree items populated by a query, if you use the cftreeitem queryasroot attribute to specify a root name, that value is returned. If you do not specify a root name, ColdFusion returns the query name.

APPENDKEY |
| Optional;
| All
Default value: "Yes"

- Yes: if you use cftreeitem href attributes, ColdFusion appends a CFTREEITEMKEY query string variable with the value of the selected tree item to the cfform action URL.
- No: does not append the tree item value to the URL.

HIGHLIGHTHREF |
| Optional;
| Applet, Object
Default value: "Yes"

- Yes: highlights as a link the displayed value for any cftreeitem tag that specifies an href attribute.
- No: disables highlighting.

ONVALIDATE |
| Optional;
| Applet
JavaScript function to validate user input. The JavaScript DOM form object, input object, and input object value are passed to the specified routine, which should return True if validation succeeds; False, otherwise.

MESSAGE |
| Optional;
| Applet
Message to display if validation fails.

ONERROR |
| Optional;
| Applet
JavaScript function to execute if validation fails.

LOOKANDFEEL |
| Optional;
| Applet, object
Default value: "windows"

- motif: renders the slider in Motif style.
- windows: renders the slider in Windows style.
- metal: renders the slider in Java Swing style.

If the platform does not support a style option, the tag defaults to platform default style.

FONT |
| Optional;
| Applet
Font name for text in the tree control.

FONTSIZE |
| Optional;
| Applet, Flash
Font size for text in the tree control, in points.

ITALIC |
| Optional;
| Applet, Flash
Default value: "No"

- Yes: displays tree control text in italics.
- No

BOLD |
| Optional;
| Applet, Flash
Default value: "No"

- Yes: displays tree control text in bold.
- No

HEIGHT |
| Optional;
| Applet, Flash
Default value: "320 (applet only)" Tree control height, in pixels. If you omit this attribute in Flash format, Flash automatically sizes the tree.

WIDTH |
| Optional;
| Applet, Flash
Default value: "200 (applet only)" Tree control width, in pixels. If you omit this attribute in Flash format, Flash automatically sizes the tree.

VSPACE |
| Optional;
| Applet
Vertical margin above and below tree control, in pixels.

HSPACE |
| Optional;
| Applet
Horizontal spacing to left and right of tree control, in pixels.

ALIGN |
| Optional;
| Applet, object

- top
- left
- bottom
- baseline
- texttop
- absbottom
- middle
- absmiddle
- right

BORDER |
| Optional;
| Applet, object
Default value: "Yes"

- Yes: displays a border around the tree control.
- No

HSCROLL |
| Optional;
| Applet, object
Default value: "Yes"

- Yes: permits horizontal scrolling.
- No

VSCROLL |
| Optional;
| Applet, object
Default value: "Yes"

- Yes: permits vertical scrolling.
- No

STYLE |
| Optional;
| Flash
Must be a style specification in CSS format, with the same syntax and contents as used in Macromedia Flex for the corresponding Flash element.

ENABLED |
| Optional;
| Flash
Default value: "Yes" Default value: "Flash format only: Boolean value specifying whether the control is enabled. A disabled control appears in light gray."

VISIBLE |
| Optional;
| Flash
Default value: "Yes" Default value: "Flash format only: Boolean value specifying whether to show the control. Space that would be occupied by an invisible control is blank."

TOOLTIP |
| Optional;
| Flash
Default value: "Flash format only: Text to display when the mouse pointer hovers over the control."

ONCHANGE |
| Optional;
| Flash
Default value: "ActionScript to run when the control changes due to user action." Default value: "If you specify an onChange event handler, the Form scope of the ColdFusion action page does not automatically get information about selected items. The ActionScript onChange event handler must handle all changes and selections."

NOTSUPPORTED |
| Optional;
| Applet
Text to display if a page that contains a Java applet-based cfform control is opened by a browser that does not support Java or has Java support disabled. For example: "<b> Browser must support Java to view ColdFusion Java Applets</b>" Default message:

<b>Browser must support Java to <br>view ColdFusion Java Applets!</b>

children

This item's child items; an array of item structures.

display

Tree item label, as determined by the cftreeitem display attribute.

expand

Whether to expand the item to display any children; value of cftreeitem expand attribute.

href

The URL to link to when the user selects the item; value of the cftreeitem href attribute.

img

The tree image icon Image to display as an icon for the tree item; value of cftreeitem img attribute.

imgOpen

Image to display when the tree item is open (expanded); value of cftreeitem imgopen attribute.

parent

Value of this item's parent item in the tree.

path

The node path from the tree root to the current element.

queryAsRoot

Whether the query is the root of the item; value of cftreeitem queryAsRoot attribute.

target

The link target, such as _blank; value of the item's cftreeitem target attribute.

value

The item's value, as determined by the cftreeitem value attribute.

path

The path through the tree to the selected node, in the form [root\]node_1\node_2\.... In applet format, the path includes the root node only if the completePath attribute is True. In Flash format, the path always includes the root node.

node

The value of the selected tree node.

align

completePath

highlightHref

lookAndFeel

appendKey

delimiter

hScroll

name

bold

fontWeight

italic

vscroll

border