r:xslt_transform

• Home
• How to's & Tips
• Theme Development
• Tag Documentation
• r:xslt_transform

The <r:xslt_transform> tag opens up the ability to pull XML (or JSON) formatted data from any source accessible via a URL, into a site/template. The data can come from another site that is hosted on CleanSlate or anywhere else on the web. This allows you to do all kinds of crazy stuff.

You need two things in order to use the <r:xslt_transform> tag.

1. The URL for the XML data source you wish to use
2. An XSLT stylesheet that tells CleanSlate how to transform the XML data it retrieves into the HTML, or any other format, you want in your site/template.

Example 1 - Weather

What can you do with this?
Let's take a simple example. I want to display the current weather for Morgantown, WV on my site. There are many sources for this type of information on the web. One of those is Yahoo! Weather. They provide an API with an XML endpoint that we can use with <r:xslt_transform> at https://developer.yahoo.com/weather/. You specify the city and state for which you want the weather after the text query string variable. So for XML weather data for Morgantown, WV we would use https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20weather.forecast%20where%20woeid%20in%20(select%20woeid%20from%20geo.places(1)%20where%20text%3D%22morgantown%2C%20wv%22)&format=xml&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys.

The data from the URL above looks something like the following:

To retrieve this data and transform it into HTML for the site, we could use the following in a theme template.

The content of the <r:xslt_transform> tag above is the XSLT stylesheet that will be used to transform the raw XML data retrieved from Yahoo! into the HTML we want to output for the site. Nothing about XSLT is special to CleanSlate. It has been a web standard forever and there are many sources for learning more about it on the web, such as W3Schools.

The output from the above would be similar to the following:

What is CleanSlate doing here?
CleanSlate parses the <r:xslt_transform> tag and makes a web request for the URL given in the url attribute. It takes the response from that request and applies the given XSLT stylesheet to it. The result of applying the XSLT to the data is then output into the template.

Example 2 - PRT Status

Include the current status of the WVU PRT system on our website.

This will produce output similar to the following:

Using a file for your XSLT stylesheet

You can do some pretty complex stuff with XSLT and before long your XSLT stylesheet could become quite large. When this happens, it's probably best to store the XSLT is a file outside of your theme template. This also makes it easy to use the same stylesheet across multiple templates, should the need ever arise.

To start, create a new directory in the root of your theme. You can call it whatever you want as long as it isn't one of directories reserved by CleanSlate, which includes images, javascripts, stylesheets, public, or views. I will use 'xslt' as the directory in this example.

Next, create a file with whatever name you want. I will use 'example.xslt' here. Construct your XSLT stylesheet in this new file.

When you're ready to use the stylesheet with <r:xslt_transform>, just specify the path to the XSLT file you just created in the xslt_file attribute of the tag.

<r:xslt_transform xslt_file="/views/xslt/example.xslt" url="http://example.com/datafile.xml">

Using XSLT with a JSON data source

XSLT only works with XML data; however, <r:xslt_transform source_format="json"> will allow you to transform data from a JSON formatted data source. It does this by converting the the JSON data to XML format before applying the XSLT stylesheet. Something to note is that when this conversion from JSON to XML is done, the JSON data will be wrapped in an <xml> element in the resulting XML. JSON and XML are entirely different beasts, so this solution may not be pretty, but it can still be useful for simple data sets.

Additional Information

For a detailed example of using <r:xslt_transform> to implement a cross site blog solution, checkout Creating a cross site blog with XSLT.

Last updated on February 15, 2021.