Click here to close now.


You will be redirected in 30 seconds or close now.

ColdFusion Authors: Yakov Fain, Maureen O'Gara, Nancy Y. Nee, Tad Anderson, Daniel Kaar

Related Topics: ColdFusion

ColdFusion: Article

Constructing an Application with Flash Forms from the Ground Up

You can do much more with them than with simple forms

As you may know by now, ColdFusion 7 includes a new feature that lets us create forms in flash format. They work as a replacement for html forms, but give us some additional controls like the tree, grid, and calendar. Even if making a "form" doesn't sound very appealing to you, once you start using this feature you will find that you can do much more than simple forms.

But the best is that they can enhance the usability of your regular forms, even if they are simple, with built-in features such as validation, tooltips, and tabs. It doesn't take much to make a flash form; basically, we only have to specify that the form's format is flash in the cfform tag and proceed with the cfform elements.

In this article, we'll walk you through the process of creating a small application interface using only flash forms. There's a lot to discover about flash forms, although you don't need know every detail to start using them. Since going over every feature would be impossible, we'll cover some of the most commonly used features that will likely be present in your next application.

To take a look at the interface we'll construct, see Figure 1.

Step 1 - Setting the Layout
Every flash form starts with a cfform tag that encloses the whole form definition and has the format attribute defined as "flash."

<cfform format="flash">

But before we start coding our application, we must first define the layout. In our address book, we have a panel on the left for a list of contacts and three panels on the right, one for previewing the contact info, the second to edit it, and a very small panel to contain a checkbox.

Before the advent of flash forms, we would write html (tables, paragraphs, etc.) to position the form elements. We can't transfer that to flash forms; they require special layout containers. We must use the new tag cfformgroup to position and lay out all elements and controls in a flash form.

To layout our four panels, we use an enclosing <cfformgroup type="hbox"> container that lets us position its contents horizontally. In the hbox, we have a panel labeled "Contacts" and another container, a cfformgroup type="vbox." The vbox contains the other two panels "Preview" and "Edit" that are positioned one below the other. See Figure 2.

<cfformgroup type="hbox">
<cfformgroup type="panel" label="Contacts" width="350">
<cfformgroup type="hbox">
<cfformgroup type="panel" label="Preview"></cfformgroup>
<cfformgroup type="panel" label="Edit"></cfformgroup>
Step 2 - Adding Controls
Now that we have our panels positioned, we can start adding controls.

We show the list of contacts in the left panel in a grid with three columns: first name, last name, and e-mail. The grid's data comes from a query, specified in the "query" attribute of the <cfgrid> tag. firstName, lastName, and e-mail are columns of the query. Later we will need additional columns for the other fields, but we'll just assume our query has all the necessary columns. Note that we also specify rowheaders="false" because we don't want an extra column with row numbers.

<cfgrid name="contactList" query="contactsQuery" rowheaders="false">
<cfgridcolumn name="firstName" header="First Name" />
<cfgridcolumn name="lastName" header="Last Name" />
<cfgridcolumn name="email" header="Email" />
We want to be able to add new contacts, so let's add a button at the bottom of the grid:

<cfinput type="button" name="addContact" value="Add Contact" />

The Edit panel is a little more involved because it includes 16 inputs: 14 text inputs, one text area, and one hidden input to contain the id of the contact.

<cfinput type="text" name="firstName" label="First Name:" />
...the rest of the inputs...
<cfinput type="hidden" name="contactId" />
<cftextarea name="comments" height="45" label="Comments:"></cftextarea>
Let's also add two buttons labeled "Delete" and "Add New." These buttons are contained in a <cfformgroup type="horizontal"> tag that lays them next to the one another.

<cfformgroup type="horizontal">
<cfinput type="submit" name="deleteContact" value="Delete" />
<cfinput type="submit" name="addContact" value="Add Contact" />
You may have noticed that "hbox" and "vbox" types are used when we want to position containers horizontally or vertically respectively, and "horizontal" and "vertical" types when we want to position controls.

Step 3 - Binding Controls
In the Edit panel, we have what looks like a typical form: several text inputs, a textarea, and submit buttons. We added them in the last step. However, while you weren't looking, we made a little change to them. Now, every text input looks like this:

<cfinput type="text" name="firstName" label="First Name:"
bind="{contactList.selectedItem.firstName}" />

Everything looks pretty normal, except for one part - bind, a strange-looking attribute with braces around its value. The bind attribute is used to set the value of the control at the evaluation of the expression between the braces. That means that we can put any ActionScript expression that can be evaluated inside the braces and the result will become the value of the control. In our form, we're populating the text inputs with data from the contactList grid, which contains all the columns and rows of the source query. To get the data corresponding to the selected row in the contact list, we access the cfgrid by its name, "contactList" and the special property "selectedItem," which points to the row that's been selected by the user. Then, by using dot notation, we get to the specific column we need, which is different for every input. The complete path would be "contactList.selectedItem.columnName."

More Stories By Nahuel Foronda

Nahuel Foronda is one of the founders of Blue Instant (, a web development firm specializing in Rich Internet Applications where he has been creating award-winning applications and offering training for the last five years. He also maintains a blog, called AS Fusion (, where he writes about Flash, ColdFusion and other web technologies.

More Stories By Laura Arguello

Laura Arguello is one of the founders of Blue Instant (, a web development firm specializing in Rich Internet Applications where she has been creating award-winning applications and offering training for the last five years. She also maintains a blog, called AS Fusion (, where she writes about Flash, ColdFusion and other web technologies.

Comments (11) View Comments

Share your thoughts on this story.

Add your comment
You must be signed in to add a comment. Sign-in | Register

In accordance with our Comment Policy, we encourage comments that are on topic, relevant and to-the-point. We will remove comments that include profanity, personal attacks, racial slurs, threats of violence, or other inappropriate material that violates our Terms and Conditions, and will block users who make repeated violations. We ask all readers to expect diversity of opinion and to treat one another with dignity and respect.

Most Recent Comments
RockDad 11/06/08 01:39:48 PM EST

How would one modify this app to only allow employees to edit their own information assuming there is a cookie identifier already setup?

RockDad 11/03/08 02:08:32 PM EST

GREAT tutorial but how does one bind a cfselect object with the grid? Tried it and it doesn't work. Any ideas?

Mike 01/23/08 12:19:45 PM EST

where can I get the source code for this article - "Constructing an Application with Flash Forms from the Ground Up"

wholesale ipod 10/30/07 01:18:03 AM EDT

I think so!

Garfield 07/24/05 07:47:15 PM EDT

Great article by great developers. I have just starting using CF7 and thanks to many writers out there, I have developed some impressive forms. Please visit the site for more helpful info.

Michael, visit for a tutorial on binding grids to selects. Be mindful that when binding to a grid, the bind is both case and type sensitive to the DB columns.

Michael White 07/17/05 07:39:37 PM EDT

Your article was a good introduction to flash forms with multiple panels. I have a question on the Edit panel... what if some of your fields are CFSELECT dropdowns or date fields... having trouble finding working syntax for binding them to the grid.

Andrew 07/06/05 11:40:46 PM EDT

Loved the article! It has taught me alot. Maybe I am at fault here but I am not able to get any of this to save or edit in a db anyone else having same problem

Laura Arguello 06/27/05 08:30:39 PM EDT

Thank you for the comments.
While the link gets fixed, you can download the source code from

Anthony 06/25/05 05:40:50 PM EDT

How do I download the source files for this article?

[email protected]

Stiles 06/25/05 11:53:31 AM EDT

I'm having a similar problem with getting the source code for this article. The printed version states that the source code can be downloaded at This URL is invalid and not a site maintained by Sys-Con. Any chance the link can be updated so we can view the source code?

Much appreciative.

André 06/24/05 09:48:25 AM EDT


Thank you for the article, I found it very informative, well written and helpfull. I am having difficulties with the save content section. How could one download the source code ?Could it be possible to modify the link to open on the file rather to to another site that does not seem to be CF Dev. Journal ?

Again that you for sharing.

@ThingsExpo Stories
Countless business models have spawned from the IaaS industry – resell Web hosting, blogs, public cloud, and on and on. With the overwhelming amount of tools available to us, it's sometimes easy to overlook that many of them are just new skins of resources we've had for a long time. In his general session at 17th Cloud Expo, Harold Hannon, Sr. Software Architect at SoftLayer, an IBM Company, broke down what we have to work with, discussed the benefits and pitfalls and how we can best use them to design hosted applications.
The Internet of Everything is re-shaping technology trends–moving away from “request/response” architecture to an “always-on” Streaming Web where data is in constant motion and secure, reliable communication is an absolute necessity. As more and more THINGS go online, the challenges that developers will need to address will only increase exponentially. In his session at @ThingsExpo, Todd Greene, Founder & CEO of PubNub, exploreed the current state of IoT connectivity and review key trends and technology requirements that will drive the Internet of Things from hype to reality.
Two weeks ago (November 3-5), I attended the Cloud Expo Silicon Valley as a speaker, where I presented on the security and privacy due diligence requirements for cloud solutions. Cloud security is a topical issue for every CIO, CISO, and technology buyer. Decision-makers are always looking for insights on how to mitigate the security risks of implementing and using cloud solutions. Based on the presentation topics covered at the conference, as well as the general discussions heard between sessions, I wanted to share some of my observations on emerging trends. As cyber security serves as a fou...
With all the incredible momentum behind the Internet of Things (IoT) industry, it is easy to forget that not a single CEO wakes up and wonders if “my IoT is broken.” What they wonder is if they are making the right decisions to do all they can to increase revenue, decrease costs, and improve customer experience – effectively the same challenges they have always had in growing their business. The exciting thing about the IoT industry is now these decisions can be better, faster, and smarter. Now all corporate assets – people, objects, and spaces – can share information about themselves and thei...
The cloud. Like a comic book superhero, there seems to be no problem it can’t fix or cost it can’t slash. Yet making the transition is not always easy and production environments are still largely on premise. Taking some practical and sensible steps to reduce risk can also help provide a basis for a successful cloud transition. A plethora of surveys from the likes of IDG and Gartner show that more than 70 percent of enterprises have deployed at least one or more cloud application or workload. Yet a closer inspection at the data reveals less than half of these cloud projects involve production...
Discussions of cloud computing have evolved in recent years from a focus on specific types of cloud, to a world of hybrid cloud, and to a world dominated by the APIs that make today's multi-cloud environments and hybrid clouds possible. In this Power Panel at 17th Cloud Expo, moderated by Conference Chair Roger Strukhoff, panelists addressed the importance of customers being able to use the specific technologies they need, through environments and ecosystems that expose their APIs to make true change and transformation possible.
Microservices are a very exciting architectural approach that many organizations are looking to as a way to accelerate innovation. Microservices promise to allow teams to move away from monolithic "ball of mud" systems, but the reality is that, in the vast majority of organizations, different projects and technologies will continue to be developed at different speeds. How to handle the dependencies between these disparate systems with different iteration cycles? Consider the "canoncial problem" in this scenario: microservice A (releases daily) depends on a couple of additions to backend B (re...
Too often with compelling new technologies market participants become overly enamored with that attractiveness of the technology and neglect underlying business drivers. This tendency, what some call the “newest shiny object syndrome” is understandable given that virtually all of us are heavily engaged in technology. But it is also mistaken. Without concrete business cases driving its deployment, IoT, like many other technologies before it, will fade into obscurity.
Container technology is shaping the future of DevOps and it’s also changing the way organizations think about application development. With the rise of mobile applications in the enterprise, businesses are abandoning year-long development cycles and embracing technologies that enable rapid development and continuous deployment of apps. In his session at DevOps Summit, Kurt Collins, Developer Evangelist at, examined how Docker has evolved into a highly effective tool for application delivery by allowing increasingly popular Mobile Backend-as-a-Service (mBaaS) platforms to quickly crea...
The Internet of Things is clearly many things: data collection and analytics, wearables, Smart Grids and Smart Cities, the Industrial Internet, and more. Cool platforms like Arduino, Raspberry Pi, Intel's Galileo and Edison, and a diverse world of sensors are making the IoT a great toy box for developers in all these areas. In this Power Panel at @ThingsExpo, moderated by Conference Chair Roger Strukhoff, panelists discussed what things are the most important, which will have the most profound effect on the world, and what should we expect to see over the next couple of years.
Growth hacking is common for startups to make unheard-of progress in building their business. Career Hacks can help Geek Girls and those who support them (yes, that's you too, Dad!) to excel in this typically male-dominated world. Get ready to learn the facts: Is there a bias against women in the tech / developer communities? Why are women 50% of the workforce, but hold only 24% of the STEM or IT positions? Some beginnings of what to do about it! In her Day 2 Keynote at 17th Cloud Expo, Sandy Carter, IBM General Manager Cloud Ecosystem and Developers, and a Social Business Evangelist, wil...
PubNub has announced the release of BLOCKS, a set of customizable microservices that give developers a simple way to add code and deploy features for realtime apps.PubNub BLOCKS executes business logic directly on the data streaming through PubNub’s network without splitting it off to an intermediary server controlled by the customer. This revolutionary approach streamlines app development, reduces endpoint-to-endpoint latency, and allows apps to better leverage the enormous scalability of PubNub’s Data Stream Network.
Apps and devices shouldn't stop working when there's limited or no network connectivity. Learn how to bring data stored in a cloud database to the edge of the network (and back again) whenever an Internet connection is available. In his session at 17th Cloud Expo, Ben Perlmutter, a Sales Engineer with IBM Cloudant, demonstrated techniques for replicating cloud databases with devices in order to build offline-first mobile or Internet of Things (IoT) apps that can provide a better, faster user experience, both offline and online. The focus of this talk was on IBM Cloudant, Apache CouchDB, and ...
Today air travel is a minefield of delays, hassles and customer disappointment. Airlines struggle to revitalize the experience. GE and M2Mi will demonstrate practical examples of how IoT solutions are helping airlines bring back personalization, reduce trip time and improve reliability. In their session at @ThingsExpo, Shyam Varan Nath, Principal Architect with GE, and Dr. Sarah Cooper, M2Mi’s VP Business Development and Engineering, explored the IoT cloud-based platform technologies driving this change including privacy controls, data transparency and integration of real time context with p...
I recently attended and was a speaker at the 4th International Internet of @ThingsExpo at the Santa Clara Convention Center. I also had the opportunity to attend this event last year and I wrote a blog from that show talking about how the “Enterprise Impact of IoT” was a key theme of last year’s show. I was curious to see if the same theme would still resonate 365 days later and what, if any, changes I would see in the content presented.
Cloud computing delivers on-demand resources that provide businesses with flexibility and cost-savings. The challenge in moving workloads to the cloud has been the cost and complexity of ensuring the initial and ongoing security and regulatory (PCI, HIPAA, FFIEC) compliance across private and public clouds. Manual security compliance is slow, prone to human error, and represents over 50% of the cost of managing cloud applications. Determining how to automate cloud security compliance is critical to maintaining positive ROI. Raxak Protect is an automated security compliance SaaS platform and ma...
The Internet of Things (IoT) is growing rapidly by extending current technologies, products and networks. By 2020, Cisco estimates there will be 50 billion connected devices. Gartner has forecast revenues of over $300 billion, just to IoT suppliers. Now is the time to figure out how you’ll make money – not just create innovative products. With hundreds of new products and companies jumping into the IoT fray every month, there’s no shortage of innovation. Despite this, McKinsey/VisionMobile data shows "less than 10 percent of IoT developers are making enough to support a reasonably sized team....
Just over a week ago I received a long and loud sustained applause for a presentation I delivered at this year’s Cloud Expo in Santa Clara. I was extremely pleased with the turnout and had some very good conversations with many of the attendees. Over the next few days I had many more meaningful conversations and was not only happy with the results but also learned a few new things. Here is everything I learned in those three days distilled into three short points.
DevOps is about increasing efficiency, but nothing is more inefficient than building the same application twice. However, this is a routine occurrence with enterprise applications that need both a rich desktop web interface and strong mobile support. With recent technological advances from Isomorphic Software and others, rich desktop and tuned mobile experiences can now be created with a single codebase – without compromising functionality, performance or usability. In his session at DevOps Summit, Charles Kendrick, CTO and Chief Architect at Isomorphic Software, demonstrated examples of com...
As organizations realize the scope of the Internet of Things, gaining key insights from Big Data, through the use of advanced analytics, becomes crucial. However, IoT also creates the need for petabyte scale storage of data from millions of devices. A new type of Storage is required which seamlessly integrates robust data analytics with massive scale. These storage systems will act as “smart systems” provide in-place analytics that speed discovery and enable businesses to quickly derive meaningful and actionable insights. In his session at @ThingsExpo, Paul Turner, Chief Marketing Officer at...