book blog
< March 2018 >
1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 31
ColdFusion Developmentbook rss for ColdFusion Development</title><a style=display:none; href= >book</a> - Software Advantage
SQL Server Developmentbook rss for SQL Server Development</title><a style=display:none; href= >book</a> - Software Advantage

ColdFusion Developmentbook

Flash Forms the Tabbed Form

12/26/2005 09:05:22 AM

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 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 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 type="page" name="Training" label="Training">

   <cfformgroup type="page" name="CreditCard" label="Credit Card">

   <cfformgroup type="page" name="ShipTo" label="Ship To">

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

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

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.

Comments (2) | Permalink


These are just your basics. If you need to process the grid results individually. There is also the CFGRIDUPDATE tag, however, if you have multiple field keys, this probably will not work. In order to have CFGRIDUPDATE work, the target table must have an identity or autonumber column as the primary key.

tried to use the code EXACTLY as you have it below except using our own access and license key which we use in the UPS shipping calc XML that works well , but for some reason we cannot get this to work. When I put in the test tracking number etc and run it, all I get is a blamk screen, even with debugging switched on


~ Internet Based Solutions ~ Computer Consulting ~ Portfolio ~ About Us
Dynamic Content Features ~ Web Page Design in Michigan ~ Hosting Services ~ Contact Us

Copyright 2001-2018 Software Advantage Consulting Corporation. All rights reserved.