ColdFusion Developmentbook

Flash Forms the Tabbed Form

A delightful new feature with the release of ColdFusion MX 7 are Flash Forms.  You can now easily provide professional looking forms with a tabbed interface to provide your users with easily navigable data.  So now instead of having several individual pages for a multi-step form, you can use tabs to provide all of the data on one form.  Amazingly, the tabs recognize the browsers back button and take you back to a prior tab instead of off the screen.

If you wanted to have a customer form with the data for an individual customer organized into different sections you would use a tabbed based form.  Here is a snippet of code for you to review to see how simple it is:

<cfform action="#sFunctionFile#" format="flash" width="720" height="550" skin="haloblue">
  <cfinput type="hidden" name="CustomerID" value="#DefaultCustomerID#">
  <cfinput type="hidden" name="UpdateCustomer" value="1">
  <cfformgroup type="tabnavigator">
   <cfformgroup type="page" name="General" label="General">
    <cfinput type="text" label="Status:" name="Status" size="3" maxlength="1">
    <cfinput type="text" label="Customer:" name="CustomerName" size="35" maxlength="50">
    <cfinput type="text" label="First Name:" name="NameFirst" size="15" maxlength="20">
    <cfinput type="text" label="Last Name:" name="NameLast" size="15" maxlength="20">
    <cfinput type="text" label="Address:" name="Address1" size="30" maxlength="30">
    <cfinput type="text" label="Address 2:" name="Address2" size="30" maxlength="30">
    <cfinput type="text" label="City:" name="City" size="15" maxlength="20">
    <cfinput type="text" label="State:" name="State" size="3" maxlength="2">
    <cfinput type="text" label="Zip:" name="Zip" size="10" maxlength="10">
   </cfformgroup>
   <cfformgroup type="page" name="TaxInfo" label="Tax Info">
     <cfinput type="checkbox" name="TaxExempt" value="0" label="Tax Exempt">
     <cfinput type="text" label="Tax Number:" name="TaxNumber" size="10" maxlength="10">
   </cfformgroup>
   <cfformgroup type="page" name="AccountInfo" label="Account Info">
    <cfformitem type="html" width="200">Account Number: <cfoutput>#DefaultAccountNumber#</cfoutput></cfformitem>
    <cfformitem type="html" width="200">Account Opened: <cfoutput>#DefaultAccountOpened#</cfoutput></cfformitem>
    <cfformitem type="html" width="200">Last Visit: <cfoutput>#DefaultLastVisit#</cfoutput></cfformitem>
    <cfformitem type="html" width="200">Total Visits: <cfoutput>#DefaultTotalVisits#</cfoutput></cfformitem>
    <cftextarea name="Notes" rows="3" cols="40"><cfoutput>#DefaultNotes#</cfoutput></cftextarea>
   </cfformgroup>
   <cfformgroup type="page" name="Training" label="Training">

   </cfformgroup>
   <cfformgroup type="page" name="CreditCard" label="Credit Card">
   </cfformgroup>
   <cfformgroup type="page" name="ShipTo" label="Ship To">

   </cfformgroup>
   <cfformgroup type="page" name="Subscription" label="Subscription">

   </cfformgroup>
  </cfformgroup>
  <cfformgroup type="horizontal">
    <cfinput type="Submit" value="Submit Form" name="UpdateCustomerBTN">
  </cfformgroup>
 </cfform>

As you can see from the basic code it is fairly simple to setup a tabbed form.  The first pair of cfformgroup tags designate that the container is a tabnavigator.  Each cfformgroup pair within that container are the individual page(s) within the tabnavigator group.  This would generate several tabs on a form.  You just ned to insert the cfinput tags with their labels.  Gone are the days of having to create a table and line up all of the input fields.  So have fun with this one.