At PAI Industries, I’ve been working on a prototype for a new intranet application. This prototype contains many data entry forms. Normally, when I build forms, I hand-code the id attribute on inputs and the for attribute on the associated labels. But for the prototype, I’ve been using a utility method that constructs these values using a simple counter. And I kind of like it. It feels like one less piece of boilerplate that I have to think about.
The concept is simple. But I tried to flesh it out a bit in this ColdFusion exploration. I have two methods:
-
nextUid()– this increments a request-scoped counter (this approach isn’t meant to be thread-safe) and returns the latest token. -
getUid()– this reads the most recently created counter token, optionally providing a suffix (or list of suffixes) to use in the rendered attribute.
The goal is to make it easy to create matching pairs of id / for values; and, to add a tiny bit of magic for aria attributes. Here are my two method:
/**
* I create a new uid token and return it.
*/
private string function nextUid() {
// Ensure that the counter exists and is incremented on every call. This is
// intended to be used within the context of a single request thread and is NOT
// meant to be thread-safe or globally unique.
request.$$uid = ( ( request.$$uid ?: 0 ) + 1 );
return getUid();
}
/**
* I get the most recently created uid token. If a space / comma delimited string is
* passed-in, a compound token will be returned.
*/
private string function getUid( string after = "n" ) {
return after
.listToArray( ",; " )
.map( ( suffix ) => "uid#request?.$$uid##trim( suffix )#" )
.toList( " " )
;
}
The nextUid() method increments the request.$$uid counter and returns the generated token (calling getUid() in its return statement). The getUid() method wraps the current counter in a prefix (uid) and an optional suffix. If you provide the suffix as a delimited list, the getUid() method will return a string containing separate outputs for each item in the list.
These methods aren’t intuitive until you see how they get used. Here’s a simple ColdFusion form with two text inputs followed by a textarea. Pay closer attention to the textarea field because it uses aria-describedby to reference both a description and a note for the field, each of which needs a unique id value.
For the first two fields, the nextUid() and getUid() simply work hand-in-hand to make the labels clickable. But, the final textarea example gets more exciting. First, there’s the call to nextUid() to increment the request-scoped counter; but then there’s four calls to getUid() to read that counter:
getUid( "desc" )getUid()getUid( "desc md" )getUid( "md" )
Each of these reads the same request.$$uid counter; but each outputs a slightly different attribute value:
As you can see in the last form entry, all four calls to getUid() start with uid3; but, each has a distinct suffix which allows the id attribute to remain unique for all four invocations. Even the aria-describedby attribute ends up including two distinct id references within the same value.
I’m going to add this to Big Sexy Poems to see how it feels in a real world application. But, I’m curious to know if anyone else is using a technique like this?
Want to use code from this post?
Check out the license.
https://bennadel.com/4845
Source link
