Website Design Company

• Website Design
• Ecommerce online shops
• Web content management systems
• Database design
• Website optimisation service

Back to the list of tutorials

This tutorial explains how to display xml data within html page using Dreamweaver´s Spry widgets. Demo.

First we need to create some simple xml file ­ for this purpose copy and paste the following to the new file and save it as data.xml:

Create new html page and save it with any name you wish. Open this page and from the menu choose Insert > Spry > Spry XML Data Set (Fig. 01).

In the Spry XML Data Set window browse for our data.xml file and click Get schema button to display the structure of the xml file.
In the Data Set columns section select tel and using Data type dropdown menu assign number data type to it.
From the Sort menu select name and leave Direction as default to display records in Ascending order. Lastly select Distinct on load checkbox to avoid displaying duplicate records and click OK to create a new Data Set (Fig. 02).

Save the file. In the new window click OK to indicate that you will remember to upload supporting files to the server (Fig. 03).

We are now going to insert behaviour which will display our data from the xml file in the form of table.
From the menu choose Insert > Spry > Spry Table (Fig. 04).

In the Spry Table window select any record you would like to be sorted when you click the header in the table and check Sort column when header is clicked.
If you have any stylesheet defined, you can assign class to the different state of the table header. Lastly check Update detail regions when row is clicked and click OK to add dynamic table to our page (Fig. 05).

When you test the page in the browser you should now see data from the xml file being displayed in the table.

Written by Freelance Web Designer ­ Sebastian Sulinski

Back to top