Quantcast

Spry: Custom Columns

Get the WebProNews Newsletter:


[ Business]

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.

Comments

Tag:

Reddit | Furl

Bookmark WebProNews:

Raymond Camden, ray@camdenfamily.com
http://ray.camdenfamily.com

Raymond Camden is Vice President of Technology for roundpeg, Inc. A long
time ColdFusion user, Raymond has worked on numerous ColdFusion books
and is the creator of many of the most popular ColdFusion community web
sites. He is an Adobe Community Expert, user group manager, and the
proud father of three little bundles of joy.

Spry: Custom Columns
Comments Off
About Raymond Camden
Raymond Camden, ray@camdenfamily.com
http://ray.camdenfamily.com

Raymond Camden is Vice President of Technology for roundpeg, Inc. A long time ColdFusion user, Raymond has worked on numerous ColdFusion books and is the creator of many of the most popular ColdFusion community web sites. He is an Adobe Community Expert, user group manager, and the proud father of three little bundles of joy. WebProNews Writer


Top Rated White Papers and Resources

Comments are closed.

  • Join for Access to Our Exclusive Web Tools
  • Sidebar Top
  • Sidebar Middle
  • Sign Up For The Free Newsletter
  • Sidebar Bottom