Tuesday, September 23, 2008

Create Spry Data Sets Using Inline Data

I finally figured out how to create a Spry dataset using inline data. This is a major step towards usability, and wasn't posted on any of the Spry examples that I searched thru on Adobe's site.

To create a Spry dataset using inline data, you can just create a javascript array, and give the array to the dataset object using the Data Set's setDataFromArray(array) function. I have tested it in both FireFox and IE. You can find more information about the setDataFromArray(array) fuction here: http://labs.adobe.com/technologies/spry/articles/data_api/apis/dataset.html#setdatafromarray

The example below uses ColdFusion syntax to get data from the database and to populate the array. However, this would work with whichever language you like, or even with static data. See the following example:

Example:

<cfquery name="get_users" datasource="ds">
SELECT last_name, first_name, phone, address
FROM user

</cfquery>

<script type="text/javascript" src="Spry_1_6_1_022408/includes/SpryData.js"></script>

<script>

user_array = [<cfloop query="get_users">{last_name: "#get_users.last_name#", first_name: "#get_users.first_name#", phone: "#get_users.phone#", address:"#get_users.address#"}<cfif currentrow="" neq recordcount="">, </cfif></cfloop>]

user_dataset = new Spry.Data.DataSet();

user_dataset.setDataFromArray(user_array);
</script>

<div id="users_region" spry:region="user_dataset">

<table border="1">
<tr>
<th spry:sort="last_name">Name</th>
<th spry:sort="phone">phone</th>
<th spry:sort="address">Address</th>
</tr>
<tr spry:repeat="personnel_dataset">
<td>{last_name}, {first_name}</td>
<td>{phone}</td>
<td>{address}</td>
</tr>
</table>

</div>

You may have noticed that the above example doesn't var scope its JavaScript variables. This was on purpose, and it will still work. Experience has shown that var scoping variables can make them incompatible with some of the ColdFusion 8 CF-ajax stuff.

9 comments:

Kin Blas said...

FYI, there is a sample on the Spry samples page that shows you how to do this. You can find it here:

http://labs.adobe.com/technologies/spry/samples/data_region/DataSetSample.html

The main sample page can be found here:

http://labs.adobe.com/technologies/spry/samples/

--== Kin ==--

Matthew Reinbold said...

I believe you've got a minor error. The setDataFromArray needs a reference to the spry dataset space it needs to operate on. Instead of

user_dataset = setDataFromArray(user_array);

It should be

user_dataset.setDataFromArray(user_array);

Neil said...

Thanks, Matthew. A transposition error. Instead of copying my code from Eclipse, I typed it manually into my blog so that I could escape less-than signs. I will fix the code in the blog post. Good catch.

Neil said...

Kin: I had a look at the link that you posted. Thanks for the comment. I think that the Spry team should make the sample you mentioned more prominent. Unless you really search, they make it look like you can only use external XML/JSON files.

Massimo Foti said...

I agree this is a technique that deserve more visibility. As a plus using this solution you have no need to load the xpath.js file.
For what worth, my Spry CFC has a toDataSet() method that turn a CF query into an inline Spry dataset. You can grab it from here:
http://www.massimocorner.com/coldfusion/cfc/tmt_spry.zip

jones said...
This comment has been removed by a blog administrator.
Paul Alkema said...

I also have noticed that the line in your array isn't valid as well.

<cfif currentrow="" neq recordcount="">

Damon said...

Once we had problem with "table" tag. I asked my friend and he advised me to change

table id="DirData"

table width="20%" border="1"

TO

table id="DirData" width="20%" border="1"

Dan said...

I am getting an error:

"Invalid CFML construct found on line 11 at column 185.
ColdFusion was looking at the following text:

The CFML compiler was processing:
a cfif tag beginning on line 11, column 170."

It appears to be tied to Paul Alkema post: cfif currentrow="" neq recordcount=""

Please help!