Website Design Company

Ecommerce web site design uk, Custom Web Site Design Kent

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:

<?xml version="1.0" encoding="utf-8"?>
<customers>
<customer>
<name>John Smith</name>
<tel>07779009876</tel>
<email>info@johnsmith.co.uk</email>
</customer>
<customer>
<name>Mark King</name>
<tel>07098764567</tel>
<email>info@yahoo.co.uk</email>
</customer>
<customer>
<name>Albert Montgomery</name>
<tel>12245679605</tel>
<email>info@gmail.com</email>
</customer>
</customers>

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

Create spry data set in Dreamweaver CS3 image
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).

Spry data set window in Dreamweaver CS3 image
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).

Upload supporting files to the server image
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).

Add Spry table element to the page
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).

Insert Spry table element to the page image
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

Core Media Design is a member of Sussex Enterprise and Federation of Small Businesses

Affordable Web Site Design | Freelance Web Designer | Web Design Tutorials
Web Site Design Sussex | Small Business Web Site Design | Tutorials