A user on cf-talk today asked if it was possible to use ColdFusion 8's new HTML CFTREE as a navigation tool. Turns out it is rather simple, and like most things in ColdFusion, there are multiple solutions.
First off - when you use the HREF attribute of CFTREEITEM, you are allowed to use JavaScript. One simple solution would be to just do:
<cftreeitem display="products" href="javaScript:doProducts('...')">
You could use document.href.location to move the entire page, or use the new ColdFusion.navigate function to load a URL into a UI item like a CFDIV or CFWINDOW.
While that works ok for static, hard coded trees, it isn't a good solution for dynamic trees, and, it can be done simpler if you just bindings. Consider this example:
<cfform name="form">
<cftree format="html" name="mytree">
<cftreeitem display="Navigation" value="root">
<cftreeitem display="Page A" parent="root" value="a">
<cftreeitem display="Page B" parent="root" value="b">
</cftree>
</cfform>
<cfdiv bind="url:content.cfm?value={mytree.node}" />
I've built a simple tree with one main node and two child nodes. I then added a CFDIV that is bound to the tree. When binding to a tree, you can get two values: node and path. Node returns just the value for the selected item. Path returns the path of the node itself. Thanks to Todd Sharp for finding these values in the docs.
p.s. As a side question - who would like to see an API doc that covers stuff like this? I wasn't able to find it in the reference and it was hard to find in the developers guide. I'd like a guide that more clearly describes working with ColdFusion's new UI elements.
Archived Comments
Sounds like that would make a perfect Cheat Sheet!
I agree with Todd. A cheat sheet would be a great resource.
DW
I would. But, seriously, man, you need to Sleep. ;-)
Ray -
I asked the original question on CF-Talk. Thanks for your help, I really appreciate it.
I was actually trying to do it with the <cfdiv> and bind but I could not figure out the syntax for the node part.
I am still struggling with one part of it.
I want to load a new page in the "main" layout when each link in the tree is clicked. I made it work like this:
<cfform name="form">
<cftree format="html" name="mytree">
<cftreeitem display="Navigation" value="root">
<cftreeitem display="Page A" parent="root" value="pageA.cfm">
<cftreeitem display="Page B" parent="root" value="pageB.cfm">
</cftree>
</cfform>
<cfdiv bind="url:content.cfm?value={mytree.node}" />
and then on the content.cfm page I just have a simple <cfinclude template="#value#">.
This seems to work perfect when the links in the tree are clicked. Thing is, when the page initially loads it does not know the value of #value# and it errors out. That makes sense so I tried to add <cfparam name="value" default="page.cfm"> to the beginning of the page but that is not working.
For some reason the <cfparam> is not working with the bind to the cfdiv in the "main" layout when the ?value={mytree.node} is added. I even tried to just do a <cfoutput>#value#</cfoutput> without the include and it does not work. I thought it might have something to do with the naming so I tried changing the name in the <cfparam> to something else and that is also not working.
Any ideas?
Thanks again for your help. I am certain that you are very busy, so your help is very appreciated.
-Steve
You have two problems here.
First off - when the page loads, value does exist. If you use firebug you will see it gets passed as
value=
Now the value (the value of value ;) is blank, but it EXISTS! See the difference?
What you need is:
<cfif not isDefined("url.value") or not len(trim(url.value))>
<cfset value = "somedefault">
</cfif>
Your second problem is MUCH more serious. I HIGHLY urge you to change your application. Pardon the caps - but passing in a file to load via the query string is a very bad idea. What if I notice this and I change the value? What if I set url.value=content.cfm?
Point taken...
Thanks Ray, I will work on changing the structure of this application.
Thanks again.
Works great. But if I include the files the content.cfm is not found. I tried all combos of url:dir/content.cfm, url:/dir/content.cfm, etc... What is the trick?
Thanks.
for Steve Sequenzia, try below if I understood your problem correctly.
<cfdiv bind="url:content.cfm?value={mytree.node}" bindOnLoad = "false"/>
RZ - try using a full path from web root.
I would like to use navigate function, but cannot make it work:
My code:
--------
<cfform action="">
<cfoutput>
<CFTREE name = "Tree" highlighthref="yes" format="flash" height="320" width="200" appendkey="false">
<CFTREEITEM value="4" display="Accounting" expand="yes" img="./Images/folder_home.png" imgopen="yes">
<CFTREEITEM value="41" display="Reports" expand="no" img="element" parent="4" href="javaScript:ColdFusion.navigate('#self##xfa.accountingReport#','center')"></a>
<CFTREEITEM value="42" display="CAN Management" expand="no" img="element" parent="4" href="javaScript:ColdFusion.navigate('#self##xfa.accountingManageCAN#','center')">
</CFTREE>
</cfoutput>
</cfform>
-----------------------------------------
Thanks
Any ideas on how to do something similar with CF7?
It is a wrapper to a YUI library (as opposed to Ext I think). You can easily use them yourself.
Also... I cannot seem to get javascript to work with the href.
I have a simple function:
function hello(){
alert('hello');
}
and call it like so:
href="javaScript:hello()"
With this, I get a syntax error
In one of the requirements of a page in my website, I have to expand one of the cftreeitems. I was able to achieve using expand="yes". My problem is when a cftreeitem is set expand="yes" the folder is displaying a closed folder icon instead of an open folder icon.
Do you know how do I manipulate so that I get to show an open folder icon when an item is expanded on page load?
For e.g. assume that I have a cftree as following:
<cftree format="html" name="mytree">
<cftreeitem display="Navigation" value="root" expand="yes" img="folder" imgopen="folder">
<cftreeitem display="Page A" parent="root" value="pageA.cfm">
<cftreeitem display="Page B" parent="root" value="pageB.cfm">
</cftree>
Now on page load I need to do two things:
1. Highlight Page B
2. Show open folder icon for Navigation.
Thanks
Ranga
You can get the tree object (ColdFusion.Tree.getTreeObject) and see if there is a way via that.
hai ray,
thanks for your tutorial on cftree for navigation. it's really helpful link to my new project. i'm working on multiple layer cftree.