Posted in | Posted on 12-27-2006 | 3,509 views
A few days ago I posted a link to a few new Spry demos including one that shows how to build custom columns in Spry. This is a pretty cool feature so I thought I'd whip up another demo so folks can really appreciate how handy this is. The idea is simple: You tell Spry to run code after the data is loaded and simply manipulate the data structure to add the new column. The new column can contain anything you want. This is great if you don't have control over the XML that your Spry page is using.
Consider an XML document that returns a ColdFusion date:
2
3<cfcontent type="text/xml">
4<cfoutput><people>
5 <person>
6 <name>Raymond Camden</name>
7 <date>#now()#</date>
8 </person>
9 <person>
10 <name>Jacob Camden</name>
11 <date>#now()#</date>
12 </person>
13</people></cfoutput>
This simple XML file will return two people. The date value for each will be set to the current time. If used as is, the date would look like this:
{ts '2006-12-27 09:20:35'}
Pretty ugly, eh? So lets make it nicer. First lets add an "Observer" to the Spry dataset. This tells Spry to run a function on any type of change in the data set:
Now lets look at the processData function:
2 if (notificationType != "onPostLoad") return;
3
4 var rows = data.getData();
5 var numRows = rows.length;
6
7 for (var i = 0; i < numRows; i++) {
8 var row = rows[i];
9 row.datepretty = myDateFormat(cfToDate(row.date));
10 }
11}
First note that we check the event type with the notificationType variable. (I based my function on the Adobe sample, so thanks go to them.) We get the data and the number of rows and then simply loop over the rows of data.
To add my custom column, I simply set a new value in the row. If I did:
Then the dataset would have a new column named goober with a static value of foo.
In my sample code, I wrote two custom functions, cfToDate, and myDateFormat. These are ugly functions that parse the date sent from ColdFusion and handle the formatting of the date. This could probably be done better, but you get the idea. I've included them in the zip (see Download link below).
Anyway - this is a very handy feature! Obviously you want to correct the XML server side if at all possible, but if you can't, this is a great way to handle it.
I could also have the database format the date, but I doubt that I should be hard coding the date/time formats into the queries.
I'm having one of those days where I am really hoping to find, "The Most Obvious Way" and just get my project completed. But this post just got me thinking that date formatting can be done anywhere along the line with SQL, CF, or Javascript and there seems to be pros and cons to each. It's even more confusing when you're trying to stay within the confines of MVC. (And I'll bet we'll have a way to do it in CSS in a few years as well. ;-)
Following MVC, the date formatting should probably be done in the Javascript template, but that's going to be the slowest and most cumbersome method. You're right that it's easier in CF (or even SQL), and it's probably faster since the formatting can be cached.
But, your point here was just to show that it could be done in Spry/Javascript, which is great. It's good to be knowledgeable about and to consider the different methods.
So thank you for sharing this info. I'll continue looking for "The Most Obvious Way" with the rest of the project. ;-)