TechnicallyChris.com

If you have a flash form with tabs that submits to itself, something you might like to add to your user interface is having the last tab the user was viewing come back by default, instead of the first. I’ve described the way I have done this in the past below.

Step 1: You’ll need to come up with a variable to define which tab the form should load. You should do this before the form loads, it should be a form variable, and you’ll need to use CFPARAM to set it so that it gets reset when the form submits. For this example, we’re going to use iTabIndex. It’s important to know that the tab indexes are zero-based, meaning the first tab is 0, the second tab is 1, and so on.

1

<cfparam name="form.iTabIndex" default="0" type="integer">

Step 2: Next, we’ll need to change the tab when the form loads. There are a few ways to do this, but I’m still using CFSAVECONTENT. Before the form starts, I’d great this using:

2
3
4

<cfsavecontent variable="frmOnLoad">
 grpTabMain.selectedIndex = <cfoutput>#form.iTabIndex#</cfoutput>;
</cfsavecontent>

The name of the variable, frmOnLoad, can be virtually anything, but grpTabMain needs to be the name of the id of the TabNavigator, as we’ll go over in step 4.

Step 3: Next, we’ll have to setup the form so that, upon loading, it selects the tab that we desire. We can do this using the onLoad event of the form. The variable we add here needs to be the name of the variable we created in the previous step.

5

<cfform name="frmExample" method="post" format="flash" onload="#frmOnLoad#">

Step 4: You need to add an ID to your TabNavigator. This is as simple as adding an ID parameter to your CFFORMGROUP, like so:

6

<cfformgroup type="tabnavigator" id="grpTabMain">

And finally, step 5: You need to setup your tabIndex field so that it always contains the current tabIndex for when the form is submitted. This is easier than you think, and can be done just by adding a hidden field inside your form:

7

<cfinput name="iTabIndex" type="hidden" bind="{grpTabMain.selectedIndex}">

And there you have it, you now have a form that, when submitted to itself, will select the tab that was last open.

Chris ColdFusion ColdFusion, Flash