Processing the CSV file's fields. After the HTA verifies that
the file exists, it executes the getFields function. As Listing
2 shows, the getFields function populates the fields array (a global
variable) with the field names from the CSV file. The function uses the FileSystemObject's
Open-TextFile method to open the CSV file and read its first line, then closes
the CSV file. Next, it empties the fields array by setting its length
property to zero. The function uses the split method to return an array of substrings,
using the comma (,) character as a delimiter. Be aware that the get-Fields function
uses the split method to parse the first line of the CSV file, so the function
will fail if a field name contains a comma (even if it's enclosed in quotes).
The getFields function then uses the for statement to iterate the array
of substrings that the split method creates. If the useHeader function returns
true (which will be the case if you've selected the check box), the function
uses the replace method to remove any double-quote (") characters from
the field name. Next, the function determines whether the field name contains
the colon (:) character, indicating a field type. (I'll discuss field types
in a moment.) If the field name contains a colon, the getFields function removes
the colon and the remainder of the string so that only the field name is added
to the fields array. For example, if the field is named Size:Int, the
fields array will contain only Size (the :Int is not part of the
field's name).
If the useHeader function returns false, the getFields function will populate
the fields array with the field names Column1, Column2, Column3, and
so forth. The TDC requires these field names if it's processing a CSV file that
doesn't have a header line.
Defining the field types. When a CSV file contains a header line,
a field name can include a colon (:) and a field type. Acceptable field types
are String (the default), Date, Boolean, Int, or Float. For example, if the
field's name is Size:Int, the TDC will use Size as the field's name and Int
as its type. Without field types, the TDC will sort information as text strings,
so if you want to sort a numeric field, make sure to specify its type in the
CSV file before viewing it with CSVviewer.hta. See http://msdn.microsoft.com/workshop/database/tdc/reference/use
header.asp for more information about field types.
Creating the output table. After the getFields function determines
the list of field names, the processFile function executes the putData function
to create the output in the bottom section of the HTA window. The putData function
dynamically populates the data area of the document with the CSV data by setting
the innerHTML property of the <div> element at the bottom of the document.
The putData function starts by creating a series of HTML elements that contains
the Filter and navigation buttons. Next, the function creates the HTML table
element that connects to the TDC as a data source by setting the table's datasrc
attribute to #csvdata (the leading # character is required). The function
also sets the table's id attribute, which binds the navigation buttons
to the table; that is, the Previous Page, Next Page, First Page, and Last Page
buttons use this ID to update the table on the screen with the data from the
CSV file. The table's datapagesize attribute comes from the Display
x records per page text box near the top of the document.
After creating the opening <table> tag, the putData function adds a <thead>
tag and a <tr> tag and iterates the array of field names populated by
the getFields function. For each field name, the function creates a <th>
element, with each <th> element's id attribute set to the field's
name. It also sets the <th> element's onclick event handler to
a sorting function, which I describe shortly. After the function iterates the
field names, it closes the table heading by adding the </tr> and </thead>
tags.
Next, the putData function adds a <tbody> tag, an opening <tr>
tag, and iterates the fields array a second time. For each field name,
the function creates an opening <td> tag, a <span> element with
its datafld attribute set to the TDC object's id, and a closing </td>
tag. The datafld attribute is how the table rows bind to the TDC data
source. After iterating the array, the function adds the closing </tr>,
</tbody>, and </table> tags. Figure
3 shows the HTML table the putData function will create if you view the
CSV file shown in Figure 1.
After the putData funtion has generated the HTML that contains the navigation
buttons and the table, it sets the innerHTML property of the document's <div>
element to the generated data. To complete its work, it sets the TDC's DataURL
property to the CSV file's name, sets its UseHeader property, and calls the
TDC's Reset method to display the data.
Filtering the data. When you click Filter, CSVviewer.hta calls
the setFilter function, which uses JScript's prompt method to display a simple
dialog box that requests a filter string, as Figure
4 shows. The string you enter in this text box is set as the TDC's Filter
property. See http://msdn.microsoft.com/workshop/database/tdc/reference/filter.asp
for information on filtering the TDC's data.
Sorting the data. The TDC initially displays an unsorted view
of the CSV file, but CSVviewer.hta makes sorting easy. When the putData function
constructs the HTML table, it creates <th> elements with id attributes
set to the CSV file's field names. It also configures each <th> element's
onclick attribute to call the sortBy function, with the field name as
a parameter (see Figure 3 for an
example). The sortBy function sets the TDC's Sort property to the column name
that you clicked, then calls the TDC's Reset method to redisplay the data.
Know Your Limits
CSVviewer.hta relies on the TDC to connect to the CSV file and retrieve its
data, so it's subject to the TDC's limitations. If you open a very large CSV
file, be aware that the file might take a long time (and a lot of memory) to
open. Also, take care that the CSV file doesn't start with a blank line, which
will cause the TDC to not display any data at all. Even with these limitations,
CSVviewer.hta is a useful tool for viewing CSV files.