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:

<cfsetting enablecfoutputonly="true" showdebugoutput="false">

<cfcontent type="text/xml"> <cfoutput><people> <person> <name>Raymond Camden</name> <date>#now()#</date> </person> <person> <name>Jacob Camden</name> <date>#now()#</date> </person> </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:

data.addObserver(processData);

Now lets look at the processData function:

function processData(notificationType, notifier, thisdata) { if (notificationType != "onPostLoad") return;

var rows = data.getData(); var numRows = rows.length;

for (var i = 0; i < numRows; i++) { var row = rows[i]; row.datepretty = myDateFormat(cfToDate(row.date)); } }

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:

row.goober = "foo";

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.

Download attached file.