ColdFusion is a pretty powerful language when it comes to managing all your server / enterprise resources, but it is also useful to manipulate user interfaces.
In this post, we speak about using the CFInclude tag to build intuitive user experiences.
To start with, here is our problem. We had multiple pages in a website, and all of them were used to capture data. The issue was, none of the fields captured were finite. We had to capture (into a database) fields that were different across forms. Creating a table for each form was impractical – so it had to be into a single table. To reframe in a more technical wording, the problem is to insert key value pairs from multiple web forms, into a common database. A fairly simple problem, but the expectation was also to ensure a good user-experience. Here’s an illustration of how we went about solving it.
Like we said, all data were to be inserted into a common database table. So we created a database table that had the following fields,
recordID (auto incremented integer)
The fields are fairly self descriptive. The first, is a auto incremented primary key. The second is a reference to the webpage from which the information is being inserted. The third and fourth are fields expected to hold the key value pairs – the data captured via the web forms we spoke about.
To proceed, we created files with the following structure.
A simple HTML page that defines three free form text fields.
<label>Install Location <input name="install_location" type="text" placeholder="C:\\"></input> </label> <label>Install Platform <input name="platform" type="text" placeholder="Windows"></input> </label> <label>Install as user <input name="user" type="text" placeholder="root"></input> </label>
A HTML page that defines a set of dropdowns who’s visibility is updated based on the value of the first drop down.
Now, our mainPage.cfm expects a query parameter that defines whether template1.cfm, or template2.cfm, is required to be loaded. It also defines a form control, which then inserts the contents of the template through CFInclude. Here’s the code. In order to keep the code simple, no error handling scenarios exist.
What we have here is a main page that is queried with the name of the form that needs to be loaded, while defaulting to template1.cfm. All form content can be broken down to a key and value – thanks to the Form Submit action that holds the form-data. Our savePage.cfm then just captures all the form-data, and inserts them into our database table. Notice mainPage.cfm also has a hidden form element, meta_webpageIdentifier. This information is also appropriately inserted into the database. Key’s with a prefix such as ‘meta_’ can be skipped during insert with a selective search.
<cfset keyList=""> <cfloop LIST="#FORM.FIELDNAMES#" index="item"> <cfif FindNoCase("meta_",item) neq 1> <cfset keyList=ListAppend(keyList,item)> </cfif> </cfloop> <cfquery name="deleteKeyValuePairs" datasource="#datasource#"> delete from keyValueStore where webpageIdentifer = #FORM.meta_webpageIdentifier# </cfquery> <cfloop list="#keyList#" index="item"> <cfset value=#FORM[item]#> <cfquery name="addNewKeyValuePairs" datasource="#datasource#"> insert into keyValueStore(webpageIdentifer, `Key`, `Value`) values (#FORM.meta_webpageIdentifier#, "#item#","#value#") </cfquery> </cfloop>
And that’s how we maintain a common database for a set of inputs taken in from completely different user interfaces – with zero lines of code for manipulating data, or for processing input data before database insertion.