Embedding URLs in a cftree

The href attribute in the cftreeitem tag allows you to designate tree items as links. To use this feature in a cftree, you simply define the destination of the link in the href attribute of cftreeitem. The URL for the link can be a relative URL or an absolute URL as in the following examples.

To embed links in a cftree:

  1. Open a new file named tree3.cfm in ColdFusion Studio.
  2. Modify the page so that it appears as follows:
    <cfform action="submit.cfm">
    
    <cftree name="oak"
      highlighthref="Yes"
      height="100"
      width="200"
      hspace="100"
      vspace="6"
      hscroll="No"
      vscroll="No"
      border="No">
    
      <cftreeitem value="Important Links">
      <cftreeitem value="Macromedia Home"
        parent="Important Links"
        img="document"
        href="http://www.macromedia.com">
      <cftreeitem value="ColdFusion Home"
        parent="Important Links"
        img="document"
        href="http://www.coldfusion.com">
    </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
href="http://www.macromedia.com"> 
Make the node of the tree a link.
href="http://www.cofldusion.com"> 
Make the node of the tree a link.
Note that, although this example does not show it, href can refer to the name of a column in a query if the tree item is populated from that query.

Specifying the tree item in the URL

When a user clicks on a tree item to link to a URL the cftreeItemKey variable, which identifies the selected value, is appended to the URL in the form:

http://myserver.com?cftreeitemkey =selected_value

Automatically passing the name of the selected tree item as part of the URL makes it easy to implement a basic "drill down" application that displays additional information based on the selection. For example, if the specified URL is another CFML page, it can access the selected value as the variable URL.cfteeitemkey.

You can disable this behavior by setting the appendkey attribute in the cftree tag to No.