Step 13: Customizing the HTML Template

By default, the HTML generator uses the "default.htm" template for HTML page layout. You can find this template in the "<installation>\Templates\Html" folder.

In this step, you will explore the default template, and customize your reports by associating them with a different template than the default template.

1.	Open the "Default.htm" template file located in the "<installation>\Templates\Html" folder. Use your favorite editor.

This is where the USoft generator inserts the page title specified for the HTML set when defining an External Set.

The @data@ placeholder is mandatory and indicates at what point data is going to be inserted by the generator.

4.	In the default template, the @data@ placeholder is enclosed in the <FONT></FONT> tag pair. Take a look at one of your generated HTML files to verify that data has indeed been inserted between this pair of tags.

5.	In the default template file, locate the @template@ string.

The @template@ string is used by the generator to identify the table definition the generator should use if the Table layout style is specified.

If you want to specify your own table style, replace the table definition containing the @template@ string by a customized version.

1.	Retrieve the STEP11_ESET external set, open its HTML Set window, and type "Booking Overview" in the Page Title field.

2.	Regenerate the HTML report by running the STEP11_JOB job, then open the regenerated report in your browser.

3.	Open the generated HTML file with your editor.

4.	Note the substitution of the @header@ placeholder by the actual page title value.

Instead of the default layout, you want the page title to appear in red, centralized on the page and in a larger but not underlined font:

1.	Make a copy of the "default.htm" file in the "<installation>\Templates\Html" folder within the same folder and rename the copied file to: "Step13_Default.htm".

2.	Associate the external set with this new template: In the Definer, retrieve the STEP11_ESET definition and click on the HTML Set button at the HTML Set field. Type "Step13_Default.htm" in the Template File field. Save this setting.

3.	Open the "Step13_Default.htm" file using your editor.

4.	Carefully locate the HTML command determining the presentation of the page title. This is the first line in the file that has a <p> tag. It reads as follows:

5.	In this line, add a center alignment setting to the <p> tag, add a red font color setting, increase the font size, and remove the <u> and </u> tags that make the page title underlined, so that the resulting line reads:

6.	Save the customized template (in plain text format).

7.	Regenerate the HTML report by running the STEP11_JOB job, and then open the regenerated report in the browser.

1.	Locate the "testdrive.gif" image file and copy it to the <installation>\Templates\Html\Images folder.

2.	Open the "Step13_Default.htm" template file with your editor.

3.	Locate the line in which a file called "fog.jpg" is specified as the body background of the HTML page. Change the filename from "fog.jpg" to "testdrive.gif".

4.	In the same line, replace the "#FFFFFF" value specifying the overall background color of the HTML page to "#000080" (dark blue).

The table in which the data are shown looks better with a kaki background color and different border and cellpadding settings.

5.	Locate the beginning of the table specifications, which reads:

7.	Finally, the horizontal ruler line between the page title and the table does not look good against the new background. Remove it by removing the HTML tag.

10.	In the browser, issue the Reload command to see the new template which should look as follows: