Coding *List.htm

The left pane of the PT application's form views contains a scrollable list. The User form displays a list of persons in the left pane, the Activity form displays a list of activities, and so forth. Screen Layout in Design Decisions shows the layout of a form view.

The code in *list.htm, which displays the left pane, is similar for the six PT application forms: Activity, ActivityType, Group, Group Membership, Location, and User. Information in the following topics is applicable to all forms unless a form is specifically excluded:

Linking a Cascading Style Sheet

The PT application uses one cascading style sheet (CSS), named Forms.css, for all locale-specific versions of the application. The globalized template file (*List.xml) for a *List.htm file contains the CSS reference; for example, the ActivityList.xml file lists the CSS reference that appears in ActivityList.htm. The following line of code shows the reference to Forms.css:

<link href="../Forms.css" rel="stylesheet" type="text/css">

Instantiating the XML Data Source Object

An <OBJECT> tag in the *list.htm file instantiates the XML Data Source Object (XML DSO). The following code fragment is from ActivityList.htm, but other HTML files contain identical code that supports left-pane functionality:

<object id="xmldso" classid="clsid:550dda30-0541-11d2-9ca9-0060b0ec3d39" width="0" height="0" VIEWASTEXT>
</object>

Including JavaScript Files in *List.htm

All *List.htm files include three JavaScript files: GetParam.js, LoadList.js, and *List.js. For example, the name of *List.js in ActivityList.htm is ActivityList.js.

The following lines of script show how these files are included in *List.htm:

<script language="JavaScript" SRC="../Scripts/GetParam.js"></script>
<script language="JavaScript" SRC="../Scripts/LoadList.js"></script>
<script language="JavaScript" SRC="../Scripts/ActivityList.js"></script>

The following topics describe functions that work together to create the lists in the left pane of the PT application's forms:

Including DIV and TABLE Elements in *List.htm

Each of the *List.htm files contains five nested <DIV> tags and one <TABLE> tag. The outermost DIV element is the large black block in the left pane. This DIV contains:

The following code fragment shows the nested DIV elements and the TABLE element: 

<div style="background-color: black; color: white; height:100%">
<div align="center" style="font-size=x-small"><label LID="lbl13">Activity List</label></div>
<div id="ScrollContainer" style="overflow: scroll; width: 100%; height: 97%">
   <table border="1" id="TargetTable" width="100%" style="table-layout: fixed;border-collapse: collapse;">
      <tbody id="TargetBody"></tbody>
   </table>
   <div id="NoRecords" style="display:none;font-size:xx-small"><label LID="lbl14">No records found.</label></div>
   <div id="firstspacer" style="display:block"></div>
</div>
</div>

*List.htm contains one additional TABLE element, SourceTable. This is a hidden TABLE element (the display property is set to none). SourceTable is bound to xmldso, the XML DSO instantiated earlier in the script. The following line of script shows how this is done. Notice that the syntax requires you to prefix the XML DSO name with a number sign (#).

<table id="SourceTable" datasrc="#xmldso" datapagesize="20" style="table-layout: fixed; display: none">

A row in the table contains several cells and each cell contains a <SPAN> tag to enable data binding of individual cells. The following code fragment from Activity.htm shows how cells are bound to columns from the Activity table in the Eval database. The first cell is bound to the ActivityId column and the second cell is bound to the Description column. These columns are returned to the browser in an XML recordset. The first cell is hidden (the display property is set to none). Storing the ActivityId in a hidden column allows code to retrieve the record from the database when the user clicks an entry in the list. Data Binding Intrinsic HTML Objects to xmldso describes the code that displays a single record in the right pane when the user clicks the entry for that record in the list. The values in the datafld properties (ActivityId and Description) bind the cells to fields in the XML recordset.

<tr>
    <td style="display:none">
      <span datafld="ActivityId"></span>
    </td>
    <td>
      <span datafld="Description"></span>
    </td>
  </tr>

The following line of code, which is from the window_onLoad function in ActivityList.js, shows ActivityId and Description in the query string of the URL. Coding *List.js contains further information on the window_onLoad function.

var xml = '../Scripts/viewData.asp?tableName=activity&fieldList=ActivityId,Description&sortBy=Description';

Note  All PT application forms except the User form use two data-bound columns in *List.htm. The HTML file, PersonList.htm, which creates the list in the left pane of the User form, has three data-bound fields: PersonId, LastName, and FirstName.

Completing Page Load

The first line in the JavaScript file for *List.htm assigns window_onLoad (a JavaScript function in *List.js) to the onload event of the Window object. The LEFTPANE frame is the Window when loading *List.htm. When the Window has loaded completely, the script in window_onLoad runs. Coding *List.js describes the script in window_onLoad that: