Using URL Parameters to Control Data Regions

This sample shows how to use the SpryURLUtils.js functions with Spry Data to control the data from external URLs. In the scenario when you want to link to a Spry Data page and have particular data showing in Detail Regions, you can pass a URL parameter to set the Current Row of the data set. This will let allow the page to load in the wanted state.

Set by RowID- In this example, we set the detail region by sending the row ID of the product we want.

{name} |

The idea here is that the URL contains parameters that Spry can read and use on the page. In this example, the URL can contain a 'row' parameter that we can use to set the currentRow.

http://labs.adobe.com/technologies/spry/samples/data_region/DataWithURLParams.html?row=17

In this example, the URLs are generated dynamically by writing the file name (this page) and adding a URL parameter 'row' that has a value of {ds_RowID}. When run in the browser, this creates a real URL with a incrementing row value.

<p spry:region="ds1" spry:repeat="ds1">
<a href="DataWithURLParams.html?row={ds_RowID}">{name}</a> | 
</p>

In order to keep this sample to one page, these links refer to this same page. The real usefulness of this is that these links can be on other pages and it will set the currentRow when the page is loaded.

To extract this info, we use the SpryURLUtils.js file, linked in the head. Then, we declare a variable and add the Spry function that gets the values from URL.

<script src="../../includes/SpryURLUtils.js" type="text/javascript"></script>
<script type="text/javascript">
var params = Spry.Utils.getLocationParamsAsObject();
</script>

This creates an object called 'params'. We use this name to get to the name of the parameters in the format of 'varName.parameterName'. In this example, we would use 'params.row' to get the value.

We now update the currentRow of the data set. Because of the asynchronous nature of Ajax, we have to wait until the data is loaded before we can set the currentRow. We register an observer and once the data is updated (onPostLoad), we set the currentRow with the value of 'params.row'.

ds1.addObserver({ onPostLoad: function(ds, type) { 
 ds1.setCurrentRow(params.row); } 
 });

So the whole thing looks like:

   //Define the Data Set
var ds1 = new Spry.Data.XMLDataSet("../../demos/products/products.xml", "products/product");
   //Get the URL parameter for the row number
var params = Spry.Utils.getLocationParamsAsObject();
   //Set an observer so that when the data is loaded, we update the current row to the url param value
ds1.addObserver({ onPostLoad: function(ds, type) { 
 ds1.setCurrentRow(params.row); } 
 });

Set by Product Name - This sample uses XPath filtering to show one row of data. The filter value is the value of the url param, in this case, the product name.

<a href="DataWithURLParams.html?product=Adobe Photoshop CS2">

Click the links to have the page load with that product's details. These links are on this page for demonstration purposed. This example is to show how external links and URL params can control the Spry page.

Adobe Photoshop CS2 | Adobe Illustrator CS2 | Adobe InDesign CS2 | Adobe GoLive CS2 | Adobe Dreamweaver 8 | Adobe Flash 8 Professional

This sample works similarly to the one above, except that the links are hard coded (they don't use Spry data). Instead of setting the currentRow, the product name is sent as a URL parameter called 'product' and we use that value to do an XPath filter.

    //Data set for the second example.
var ds2 = new Spry.Data.XMLDataSet("../../demos/products/products.xml", "products/product");
   //If the URL parameter 'product' has a value, set the XPath that includes a filter and then load the data.
if (params.product){
   ds2.setXPath("products/product[name = '"+params.product+"']");
   ds2.loadData();
}

Since we called the URL utility above, we don't need to do it again for the second example. For the second example, we want 'params.product'.

Using Multiple Parameters

Nothing says we can only use one parameter at a time. We can set multiple parameters in one URL and use them as we need. For instance, this URL will set the rowID for the first example and the Product for the second example. URL parameters are separated by an ampersand (&).

DataWithURLParams.html?row=4&product=Adobe Dreamweaver 8

This should set both yellow areas to Dreamweaver.