QuackFuzed [ Ramblings of a Con..ColdFuzed Mind ]

cfUniForm v2.3 - Optgroup Support and Other Feature Enhancements

Posted on September 9, 2008 at 1:07 PM in ColdFusion, Uni-Form Tag Library

Wow! After Monday's v2.2 release, this makes two minor releases in two days. You'd think I have nothing better to do with my time. Here are the nitty gritty details on the v2.3 release.

<optgroup> Support

Bob Silverberg, who recently began a love affair with <optgroup>, contacted me the other day and asked about supporting the tag in the cfUniForm tag library. Being the charitable guy I am, I replied:

"Sure, Bob. Want to write it?"

Bob, of course, being the ever-charitable guy he is, submitted code to add support. If you're not familiar with <optgroup>, I recommend checking out Bob's post first. If you are familiar with it (or have already checked his post), here's how you make use of it with cfUniForm.

1. <cfimport taglib="/cfMgmt/tags/forms/UniForm/" prefix="uform" />
2. <div class="cfMgmt-form-container">
3. <uform:form action="foo.cfm"
4. id="MyForm">
5. <uform:fieldset legend="My Legend">
6. <uform:field label="Subject"
7. name="contactSubject"
8. isRequired="true"
9. type="select">
10. <uform:optgroup label="Group 1">
11. <uform:option display="Option A" value="1" />
12. <uform:option display="Option B" value="2" />
13. <uform:option display="Option C" value="3" />
14. <uform:option display="Option D" value="4" />
15. <uform:option display="Option E" value="5" />
16. </uform:optgroup>
17. <uform:optgroup label="Group 2">
18. <uform:option display="Option F" value="6" />
19. <uform:option display="Option G" value="7" />
20. <uform:option display="Option H" value="8" />
21. <uform:option display="Option I" value="9" />
22. <uform:option display="Option J" value="10" />
23. </uform:optgroup>
24. </uform:field>
25. </uform:fieldset>
26. </uform:form>
27. </div>

With the new optgroup tag, we can now break our options up in groups. This provides nice, clean code that is easier to read for the human eye, and is also much more accessible and descriptive for those who require screen readers. Here's the resultant markup:

1. <div class="cfMgmt-form-container">
2. <form action="foo.cfm"
3. method="post"
4. enctype="multipart/form-data"
5. id="MyForm"
6. class="uniForm">
7. <fieldset class="inlineLabels">
8. <legend>My Legend</legend>
9. <div class="ctrlHolder">
10. <label for="contactSubject"><em>*</em> Subject</label>
11. <select name="contactSubject"
12. id="contactSubject"
13. class="selectInput">
14. <optgroup label="Group 1">
15. <option value="1">Option A</option>
16. <option value="2">Option B</option>
17. <option value="3">Option C</option>
18. <option value="4">Option D</option>
19. <option value="5">Option E</option>
20. </optgroup>
21. <optgroup label="Group 2">
22. <option value="6">Option F</option>
23. <option value="7">Option G</option>
24. <option value="8">Option H</option>
25. <option value="9">Option I</option>
26. <option value="10">Option J</option>
27. </optgroup>
28. </select>
29. </div>
30. </fieldset>
32. <div class="buttonHolder">
33. <button type="submit" class="submitButton"> Submit </button>
34. </div>
35. </form>
36. </div>

This should also help those of you who do a lot of government work and are required to be compliant with Section 508.

IMPORTANT: optgroup is *not* required, but it is available to you should you wish to use it. If not, you can continue to handle your select/options in the same manner as before.

1. <uform:field label="Subject"
2. name="contactSubject"
3. isRequired="true"
4. type="select">
5. <uform:option display="Option A" value="1" />
6. <uform:option display="Option B" value="2" />
7. <uform:option display="Option C" value="3" />
8. <uform:option display="Option D" value="4" />
9. <uform:option display="Option E" value="5" />
10. <uform:option display="Option F" value="6" />
11. <uform:option display="Option G" value="7" />
12. <uform:option display="Option H" value="8" />
13. <uform:option display="Option I" value="9" />
14. <uform:option display="Option J" value="10" />
15. </uform:field>

Deprecated 'addClass' Attribute

The 'addClass' attribute on the 'field' tag has been deprecated as of this release. You should no longer use it in new code. If you are using it in your existing code base, please be sure to download the latest release, and do a Find/Replace and replace 'addClass' with 'containerClass' (more below).

Enhancement: 'containerClass' Attribute

New in v2.3 is the 'containerClass' attribute for the field tag. With this new attribute, you can assign additional classes to the container div for the field in question, giving you more styling control.

1. <uform:field containerClass="MyContainerClass" />

Result:

1. <div class="ctrlHolder MyContainerClass">

Enhancement: 'inputClass' Attribute

Also new in v2.3 is the 'inputClass' attribute for the field tag. With this new attribute, you can assign additional classes to the input control itself for the field in question.

1. <uform:field inputClass="MyInputClass" />

Result:

1. <input type="text"
2. class="textInput MyInputClass" />

Enhancement: 'showSubmit' Attribute

Another use case that Bob had was to use a custom field for adding his submit control, rather than using the default submit button. You can now (optionally) pass 'showSubmit="false"' in on your form tag, and the default submit buttons will not be rendered.

1. <uform:form action="foo.cfm"
2. id="MyForm"
3. showSubmit="false">

Behavior Change: 'legend' Attribute

The 'legend' attribute on your fieldset tag is now optional.

Thank You

Thanks again to Bob Silverberg for his contributions (both in code and in suggestions) to the library. Hopefully these new enhancements will be of use to many.

Comments

(Comment Moderation is enabled. Your comment will not appear until approved.)

On 9/9/08 at 2:56 PM, Bob Silverberg said:

No problem, Matt. Thanks for the excellent library.

I'll be sending out wedding invitations later in the day, what's your mailing address ;-)

On 9/9/08 at 4:42 PM, Brian FitzGerald said:

Great news Matt!! These are nice additions to the library. I had also come across a situation where I didn't want to have the submit button show, so I'm especially pleased by that option.

Thanks again!

On 1/23/09 at 9:53 AM, George said:

Hi Matt, I am totally loving your cfUniform library. What is the best way to do a select box coming from a query?

On 1/23/09 at 5:24 PM, Matt Quackenbush said:

@ George - Thanks for the kind words. There's a quickie example in the comment linked below.

http://www.quackfuzed.com/index.cfm/2008/6/2/UniFo...

Hope that helps.

[Add Comment]