Saturday, March 10, 2012

A Reminder of the Power of CFML Custom Tags

Yeah, they've been around forever, and many people forgot all about custom tags when that whole CFC thing came about, but I still absolutely love custom tags and think they are incredibly useful in the view layer of an application.

I was reminded of this today while working on Enlist, which is an open source application for managing volunteers and events. It was again the focus on the hackfest at OpenCF Summit this year and we're pushing towards a 1.0 release before long.

One of the things that was added to the application at OpenCF Summit this year was DataTables, which is a really slick jQuery plugin that adds sorting, searching, and paging to HTML tables, and with their latest update it works fantastically well with Twitter Bootstrap.

I'm sure many of you are already familiar with DataTables but for those of you who aren't, the way it works is you simply add a little JavaScript at the top of a page containing a table to which you want to add the DataTables functionality. Identify the table by its ID and voila, you're done.

The trick comes in when you're using this on several pages, especially when you're adding a bit more to the JavaScript as far as specific functionality, placement of controls, etc. In that case what you wind up with is the same code on numerous pages with the only difference being the ID of the table  to which you're adding DataTables, and this doesn't give you much flexibility to do things like enable row clicking on one table but not another.

Enter the underappreciated CFML custom tag. This is a perfect use case for a custom tag, because this allows the JavaScript functionality of DataTables to be wrapped with a little CFML to add some flexibility and intelligence to what otherwise would be a lot of copy/pasta JavaScript code.

You can see the code for the custom tag on GitHub, but basically this wrapper for the DataTables JavaScript lets a table ID, table body ID, and row link be passed in, and that's then applied appropriately.

As for using the tag on a page, it's as simple as importing the tag library and then wrapping the HTML table with the custom tag:

<!--- datatable.cfm custom tag lives in /enlist/customtags ---> <cfimport prefix="tags" taglib="/enlist/customtags" /> ... <tags:datatable tableID="myTableID" tableBodyID="myTableBodyID">   <table id="myTableID">     <thead>       <tr>         <th>Foo</th>         <th>Bar</th>         <th>Baz</th>       </tr>     </thead>     <tbody id="myTableBodyID">       <tr>         <td>Foo!</td>         <td>Bar!</td>         <td>Baz!</td>       </tr>     </tbody>   </table> </tags:datatable>

There's a bit more to it in its real-world use which you can see here since it does row linking as well.

Simple enough, but oh so powerful. Now I have a flexible, reusable wrapper for DataTables that I can drop into any page and customize further as needed.

So as you're messing with all the highfalutin doo-dads we have at our disposal in CFML these days, don't forget about the lowly custom tags because they can add a ton of flexibility and power to your view layer.


No comments: