• Request free online quote
• View our design portfolio
• Pay monthly option

How can we help you?

• Easy Apps for the Small Business
• Static Brochure Websites
• Content Management Systems
• E-commerce Applications
• Search Engine Optimisation
• Database Design
• Corporate Identity
• Flash & 3D Modeling and Animation
• Screencasts - Video Guides
• Professional Copywriting
• Artistic Photography
• Web Hosting and Domain Names

Services by business type

• Small Business Solutions
• Medium Size Business Solutions
• Corporate Solutions

Latest articles

Web Design Tutorials

Display xml data in the table using Spry framework

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:

	
		John Smith
		07779009876
		info@johnsmith.co.uk
	
	
		Mark King
		07098764567
		info@yahoo.co.uk
	
	
		Albert Montgomery
		12245679605
		info@gmail.com
	
 

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).

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).

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).

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).

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).

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 Web design tutorials – Sebastian Sulinski