Creating A Basic Spry Data Set and Dynamic Region

In our first Spry example, I'll go over how to create a basic Spry data set and bind the data set to a dynamic region of the web page. In future examples we will add additional Spry features.

Step 1 - Create a CFC method that returns the data you want as XML (GetInfo.cfc in my example). Make sure you set the output to false for the component and for the function. Return type must be XML (which works beginning with CFMX 7.0.1).

Step 2 - Test calling the CFC via a URL. You should see your data and if you view source you should see the XML formatting. Note the name of the root node (the first node) and the node below the root that repeats for each set of data. In my example the root node is NewDataSet and Table is the node below that and repeats for each row of data.

Step 3 - Create the web page used to display the data. Include the two JavaScript files: SpryData.js and xpath.js.

Step 4 - Inside a script type=text/javascript tag create an object of the Spry data set. The call to the Spry XMLDataSet method takes two arguments. The first is the file that provides the XML data and the second is the root node/first node. In my example:

Step 5 - Create a div block

The class is optional. The value for spry:region is the name of the XMLDataSet object we created above

Step 6 - Inside the div block create a table and have a row use the spry:repeat attribute. That table row will be repeated for each row of data in the XMLDataSet object

Some things to note:

Spry is case sensitive. So you must match the case of your XML nodes.

You don't have to use every node in your output. You can just specify the nodes you want to use.

Lastly, we can add some nice-to-have features to the Spry data set.

While Spry is creating the XMLDataSet object we should let the user know that something is going on. We can use the Spry:State attribute for a div tag to have a specific message (or animated GIF) appear while Spry is loading the data set.

You put this div inside the div with the spry:region attribute. While Spry is loading the data set for that region the div will be visible.

You can specify that columns can be sorted. Add to the tag this code:

When the user clicks on the column heading, Spry will sort the data set in by the node specified. The toggle argument to the sort function means that the sort can go from ascending to descending and back.

You can view the example page here. Use View Source to the source code.

In our next example, we will add the ability for the user to select the city and based on the user's city selection we will have Spry update our table containing the information about that city (state, zip, area code, etc) without refreshing the page.