QuackFuzed [ Ramblings of a Con..ColdFuzed Mind ]

More XHTML Forms - Custom Forms and The Uni-Form Custom Tag Library

Posted on December 30, 2007 at 2:58 PM in Uni-Form Tag Library, ColdFusion

In my original post releasing the tag library I said that I'd post more as I had time to do so. I figured that today I'd take a short break from what I've been working on and write something up.

First, I should point out that there have been a couple of changes made, so the download has been updated. Be sure to get the latest files. The changes mostly involve textareas: (a) I had forgotten to output the provided value, and (b) I updated the fieldset.cfm and field.cfm files to trim() any content generated by the tags. (The trim() is not mission-critical, just cleans up the resultant HTML a little bit.)

So, without further ado, let's get to it.

Last night I was working on a "special case" form, where I wanted to utilize the tags (since they make my form-writing life so much easier), but needed some custom output to mix in with the form. At first I felt like I had been hit by a Mack truck:

"OMG!" I thought, "I can't use my tags to build this form because they aren't setup to handle this sort of thing! Holy &#^@!! I'm going to have to edit these SOBs so that they can handle custom stuff!"

So I sat there and stared at CFEclipse for several minutes, as though it would magically rewrite the tags for me, all the while over-analyzing the situation in my mind. (Over-analyzing is my thing. If you need help with mastering the skill, there is no better teacher than yours truly.) And then out of nowhere, that Mack truck really did run me over...

"DOH! You moron! Nothing needs to be rewritten. Just add in your custom code. Frequin ID10T!"

Okay, so it wasn't really a Mack truck...

"Quack, are you going to tell us about it, or are you going to type words all day long?" you interrupt, impatiently. "We want code, damnit! Enough words already, just show us the code!"

The Scenario

As part of this form, there is a *very* long list of checkboxes that need to be included, allowing the user to select from a variety of options. As-is, the tags will only display them either all run together, or each on its own separate line. Instead, I wanted them to be displayed in 3 columns, nice and orderly, and without requiring the user to scroll for half a century to view them all.

The Solution

The options are available to the form in a query. So the view file takes the query, makes preparations for setting up 3 columns, and then displays it. Here's a couple of snippets...

1. <cfscript>
2. // break the checkbox options up into 3 columns
3. col1 = ceiling(myQuery.recordCount/3);
4. col2 = col1;
5. col3 = myQuery.recordCount-(col1+col2);
6. </cfscript>
7. <div class="formContainer">
8. <!--- build the form --->
9. <uform:form action="#myAction#" id="myForm"
10. errors="#myErrors#"
11. submitValue="#btnSubmit#">
12. <uform:fieldset legend="Required Fields">
13. <cfoutput><input
14. type="hidden"
15. name="id"
16. value="#id#" /></cfoutput>
17. <uform:field label="Name" name="name"
18. isRequired="true"
19. type="text"
20. value="#form.name#"
21. hint="Your user name." />
22. <uform:field label="Message" name="msg"
23. type="textarea"
24. value="#form.msg#"
25. hint="Enter your message." />
26. </uform:fieldset>
27. <uform:fieldset legend="Select Options"
28. class="blockLabels">
29. <div class="ctrlHolder">
30. <p class="label">Check each that applies.</p>
31. <cfoutput>
32. <!--- BEGIN: options column #1 --->
33. <div class="float-left clear width-33">
34. <cfloop from="1"
35. to="#col1#"
36. index="i">
37. <div>
38. <label for="myOptions-#i#">
39. <input type="checkbox"
40. name="myOptions"
41. id="myOptions-#i#"
42. <cfif
43. listFindNoCase(form.myOptions,
44. myQuery.id) GT 0>
45. checked="checked"</cfif>
46. value="#myQuery.id#" />
47. &nbsp;#myQuery.option_name#
48. </label>
49. </div>
50. </cfloop>
51. </div>
52. <!--- END: options column #1 --->
53. <!--- BEGIN: options column #2 --->
54. <div class="float-left width-33">
55. <cfloop from="#col1+1#"
56. to="#col1+col2#"
57. index="i">
58. <div>
59. <label for="myOptions-#i#">
60. <input type="checkbox"
61. name="myOptions"
62. id="myOptions-#i#"
63. <cfif
64. listFindNoCase(form.myOptions,
65. myQuery.id) GT 0>
66. checked="checked"</cfif>
67. value="#myQuery.id#" />
68. &nbsp;#myQuery.option_name#
69. </label>
70. </div>
71. </cfloop>
72. </div>
73. <!--- END: options column #2 --->
74. <!--- BEGIN: options column #3 --->
75. <div class="float-left width-33">
76. <cfloop from="#col1+col2+1#"
77. to="#myQuery.recordCount#"
78. index="i">
79. <div>
80. <label for="myOptions-#i#">
81. <input type="checkbox"
82. name="myOptions"
83. id="myOptions-#i#"
84. <cfif
85. listFindNoCase(form.myOptions,
86. myQuery.id) GT 0>
87. checked="checked"</cfif>
88. value="#myQuery.id#" />
89. &nbsp;#myQuery.option_name#
90. </label>
91. </div>
92. </cfloop>
93. </div>
94. <!--- END: options column #3 --->
95. </cfoutput>
96. </div>
97. </uform:fieldset>
98. </uform:form>
99. </div>

Summary

And there you have it. We've successfully combined the speed and ease of using our tag library to do the bulk of the work for us, while still having our customized section. And the resultant XHTML is still 100% XHTML 1.0 Strict compliant! :)

Comments

There are no comments for this entry.

[Add Comment]