Step 13: Customizing the HTML Template

Previous Next

See Also

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.

To explore the default HTML template:

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

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

3. Locate the @data@ placeholder.

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.

6. Close the file.

To define a page title:

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.

To specify some examples of customized layout:

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:

<p><font size="5"><u>@header@</u></font></p>

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:

<p align="center"><font color=red size="7">@header@</font></p>

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.

To change to a template with more drastic visual impact:

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:

<table border="3" cellpadding="3"

6. Change this to:

<table bgcolor="bdb76b" border="8" cellpadding="2"

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.


8. Save the "Step13_Default.htm" file.
9. Re-run the batch job.
10. In the browser, issue the Reload command to see the new template which should look as follows:

You have now completed the long track.