Advanced - Tabular Data Control
Tabular Data Control
Using the Tabular Data Control.
Say you have an export of data from another program and you wish to display it in a certain way you can use the
Tabular Data Control which gives you some extra functionality.
Say we have a file called Data.csv which contains 3 Fields, "First Name", "Last Name" and "Gender".
Data.csv
FirstName LastName Gender
Rick Rost Male
Alex Hedley Male
Sue Jones Female
FirstName,LastName,Gender
Rick,Rost,Male
Alex,Hedley,Male
Sue,Jones,Female
We can then create a simple webpage to mimic this:
<html>
<body>
<h2>Customers</h2>
<table border='1' width='100%' cellspacing='0' >
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Gender</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</body>
</html>
To display this data in the page you can add the TabularDataControl using the Obect tag.
This must have both an id and a Class ID: classid="clsid:333C7BC4-460F-11D0-BC04-0080C7055A83"
<object id="data" classid="clsid:333C7BC4-460F-11D0-BC04-0080C7055A83">
</object>
You can then add a number of parameters to this object to make it more functional.
Parameter
Value
Explanation
DataURL
data.csv
The relative file, i.e. this is in the same folder as the HTA.
UseHeader
True
Is there a Header in your file.
TextQualifier
,
It's a CSV so it's separated by commas (,), change this if necessary
SortColumn
LastName;FirstName
The Sort separated by ";"
Filter
Gender = Male
The WHERE clause
<object id="data" classid="clsid:333C7BC4-460F-11D0-BC04-0080C7055A83">
<param name="DataURL" value="data.csv">
<param name="UseHeader" value="True">
<param name="TextQualifier" value=",">
<param name="SortColumn" value="LastName;FirstName"><!-- "-" to swap order -->
<param name="Filter" value="Gender = Male">
</object>
You then need to inform the display Table about the Data, this is done by giving the Table a datasource that matches the id.
<object id="data" classid="clsid:333C7BC4-460F-11D0-BC04-0080C7055A83">
</object>
<table border='1' width='100%' cellspacing='0' datasrc=#data>
</table>
The rows then need to be told what data to expect.
Add a div tag with a parameter of datafld and match up the Column headings.
<div datafld="FirstName"></div>
<table border='1' width='100%' cellspacing='0' datasrc=#data>
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Gender</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div datafld="FirstName"></div>
</td>
<td>
<div datafld="LastName"></div>
</td>
<td>
<div datafld="Gender"></div>
</td>
</tr>
</tbody>
</table>
Finished page.
<html>
<body>
<object id="data" classid="clsid:333C7BC4-460F-11D0-BC04-0080C7055A83">
<param name="DataURL" value="data.csv">
<param name="UseHeader" value="True">
<param name="TextQualifier" value=",">
<param name="SortColumn" value="LastName;FirstName"><!-- "-" to swap order -->
<param name="Filter" value="Gender = Male">
</object>
<h2>Customers</h2>
<table border='1' width='100%' cellspacing='0' datasrc=#data>
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Gender</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div datafld="FirstName"></div>
</td>
<td>
<div datafld="LastName"></div>
</td>
<td>
<b>
<div datafld="Gender"></div>
</b>
</td>
</tr>
</tbody>
</table>
</body>
</html>
As you can see the Data is sorted and is filtered.
FirstName LastName Gender
Alex Hedley Male
Rick Rost Male
The benefit here is that you can set it up once and then every time you get a new file created with new data just replace it in the folder and the HTA will update showing the new data with no configuration necessary.
You could build different view for different users.
Sample Files
Data.csv
TabularDataControl.hta
Alex Hedley
Click here FREE tips
By: 
