A user on the CF irc channel asked about how a Flash Form "page" (a tab or accordion doohicky) can be updated based on a drop down. Turns out the code is rather simple:
<cfform format="flash" name="foo" width="400">
<cfsavecontent variable="change">
tabs.selectedIndex=chooser.selectedIndex;
</cfsavecontent>
<cfselect name="chooser" onChange="#change#" label="Navigator">
<option value="1">Tab One</option>
<option value="2">Tab Two</option>
</cfselect>
<cfformgroup type="tabnavigator" id="tabs">
<cfformgroup type="page" label="Tab One">
<cfinput type="text" name="textone" label="Text One">
</cfformgroup>
<cfformgroup type="page" label="Tab Two">
<cfinput type="text" name="texttwo" label="TextTwo">
</cfformgroup>
</cfformgroup>
</cfform>
<cfsavecontent variable="change">
tabs.selectedIndex=chooser.selectedIndex;
</cfsavecontent>
<cfselect name="chooser" onChange="#change#" label="Navigator">
<option value="1">Tab One</option>
<option value="2">Tab Two</option>
</cfselect>
<cfformgroup type="tabnavigator" id="tabs">
<cfformgroup type="page" label="Tab One">
<cfinput type="text" name="textone" label="Text One">
</cfformgroup>
<cfformgroup type="page" label="Tab Two">
<cfinput type="text" name="texttwo" label="TextTwo">
</cfformgroup>
</cfformgroup>
</cfform>
As you can see, the code is all of one line - we bind the selectedIndex of the tab group to the selectedIndex of the drop down. This assumes they are equal of course. The one thing to note - in order to get this to work you need to add an ID attribute to the tab navigator.
Archived Comments
Ray - I've done something similar, but using buttons instead. It creates a really cool effect if you hide the tabs in a tab navigator (by adding a style attribute to the "page" of "tab-height: 0;tab-width: 0;"). With the hidden tabs and the button navigation it almost looks like you're jumping page to page.
Hey Todd, would you be willing to post your code somewhere for us to take a gander at?
Thanks
I'll throw something together this evening - if Ray is OK with that?
Todd - email me directly, ray@camdenfamily.com. I'll add the code in the 'pretty' format to the main entry if it can fit.
Daniel:
Here is an example:
<cfform format="flash" name="test">
<cfformgroup type="tabnavigator" id="tabnav" height="300" width="300" style="tab-height: 0;tab-width: 0;">
<cfformgroup type="page">
<cfformitem type="html">This is tab 1.</cfformitem>
<cfinput type="button" name="goto_tab_2" value="Go To Tab 2" onclick="tabnav.selectedIndex = 1;">
</cfformgroup>
<cfformgroup type="page">
<cfformitem type="html">This is tab 2.</cfformitem>
<cfinput type="button" name="goto_tab_1" value="Go To Tab 1" onclick="tabnav.selectedIndex = 0;">
</cfformgroup>
</cfformgroup>
</cfform>
Obviously additional actionscript functionality can be added (such as hiding the button until a certain form field is populated, etc). Don't forget, actionscript starts counting at 0...
I've done it with a Tree as well ;)
http://cfpim.blogspot.com/2...
Hey PIM - when are we going to see some new posts on your site? It's been a while. And please, english next time! :)
LOL it was supposed to land on my other blog, anyway wasn't it a good exercise for you language lovers? ;))
I have stopped a bit playing with CF7 flash forms because of Flex, I am quite active on the flexcoder mailing list now, I 'd to blog about it, but I have asked for the non-commercial license a few months ago and never got a reply.
The thing is that I'm not asked much for those pretty forms in my work, so my interest is going down, and beside that not much people have shown interest, except Nahuel from ASFusion ;)
I got plenty of emails asking me to debug code, but not really about forms :((
what irc server/channel do most users use?
efnet coldfusion
?
where can I find an example of hiding a tab on a tab navigator until you select a record from a grid in the same form?