Setting global defaults in CFWheels for cleaner form code

July 30, 2009 · Chris Peters

One of the cool things about CFWheels functions is that you can set global defaults for any of their parameters.

One of the cool things about CFWheels functions is that you can set global defaults for any of their parameters. This is useful if you find yourself typing the same argument values every time you call a specific CFWheels function.

Update: Things have changed a little since I wrote this. Note that instead of using wrapLabel in the examples below, try using the labelPlacement argument instead. Possible values are before (my preference), after, and around.

Hey, it’s my first post where I actually tell you how to do things in CFWheels. I suppose I can confess that this is a year and a half overdue. But would you rather have random blog posts or documentation? (I know the answer: both. But that wasn’t a choice.)

I prefer to see my form markup structured similar to this:

<form action="/user/save" method="post">
<div>
<label for="name">Name</label><br />
<input id="name" name="name" />
</div>
<div>
<label for="email">Email</label><br />
<input id="email" name="email" />
</div>
<div>
<input type="submit" value="Save Changes" />
</div>
</form>
view raw form.html hosted with ❤ by GitHub

Again, this is my preference. Yours may be slightly different.

Normally, I would need to write my CFWheels view code like this (assuming that I loaded a user object in the controller):

<cfoutput>
#startFormTag(action="save")#
<div>#textField(label="Name", objectName="user", property="name", wrapLabel=false, appendToLabel="<br />")#</div>
<div>#textField(label="Email", objectName="user", property="email", wrapLabel=false, appendToLabel="<br />")#</div>
<div>#submitTag()#</div>
#endFormTag()#
</cfoutput>
view raw messy-form.cfm hosted with ❤ by GitHub

The good news is that this can be simpler. I can assign default values for textField() that remove the need to add the <div> tags and the appendToLabel and wrapLabel arguments to every single call to textField().

All that I need to do is use CFWheels’s set() function with the functionName argument. I then pass the default argument values that I prefer as additional named arguments. The best place for this is in config/settings.cfm:

<cfset set(functionName="textField", appendToLabel="<br />", wrapLabel=false, prependToLabel="<div>", append="</div>")>

With that one line, all of my calls to textField() can be simplified (aka DRYer):

<cfoutput>
#startFormTag(action="save")#
#textField(label="Name", objectName="user", property="name")#
#textField(label="Email", objectName="user", property="email")#
<div>#submitTag()#</div>
#endFormTag()#
</cfoutput>
view raw form.cfm hosted with ❤ by GitHub

No repetitive typing of those extra arguments and HTML tags.

Here is the general spirit of that applied to other form helpers that I’ve been calling in my applications:

<!--- Form helpers --->
<cfset set(functionName="textField", appendToLabel="<br />", wrapLabel=false, prependToLabel="<div>", append="</div>")>
<cfset set(functionName="passwordField", appendToLabel="<br />", wrapLabel=false, prependToLabel="<div>", append="</div>")>
<cfset set(functionName="fileField", appendToLabel="<br />", wrapLabel=false, prependToLabel="<div>", append="</div>")>
<cfset set(functionName="fileFieldTag", appendToLabel="<br />", wrapLabel=false, prependToLabel="<div>", append="</div>")>
<cfset set(functionName="select", appendToLabel="<br />", wrapLabel=false, prependToLabel="<div>", append="</div>")>
<cfset set(functionName="selectTag", prependToLabel="<div>", append="</div>")>
<cfset set(functionName="textArea", appendToLabel="<br />", wrapLabel=false, prependToLabel="<div>", append="</div>")>
view raw settings.cfm hosted with ❤ by GitHub

About Chris Peters

With over 20 years of experience, I help plan, execute, and optimize digital experiences.

Leave a comment