Creating a Custom HTML Report
Step-by-step for creating a custom HTML report. This sample shows
how to create a report to display the birthday of all living individuals.
Introduction
GenoPro has a powerful report generator capable of generating almost any kind
of report from your family tree data. The following article
shows you how to create an HTML report to display all the birthdays of
living individuals. This tutorial assumes you are
familiar with HTML and have some understanding of the JavaScript programming
language.
The entire source code of this report is available in GenoPro version
2.0.1.0. To generate such a report, click on the toolbar button
Generate Report, select the report skin Birthday
Listing and click on the button Generate.
GenoPro will generate an HTML page containing all birthdays present in your
family tree as the screenshot below:
To view the source code, click on the button Edit Skin and
open the file Default.htm using a text editor such as
Notepad.
You
should see the following HTML code:
<html>
<head>
<title>Birthdays</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<h1>Birthdays from @[Report.WriteText(ReportGenerator.Document.Name);]@</h1>
<%[
var strBirthdayPrev;
var colIndividualSortedByBirthday = Individuals.SortBy("Birthday");
// Loop through all individuals (already sorted by birthday)
for (var i = 0; i < colIndividualSortedByBirthday.Count; i++)
{
var ind = colIndividualSortedByBirthday(i);
if (!ind.IsDead) // Exclude any individual deceased
{
// The individual is alive, so fetch his/her birthday
var strBirthday = ind.Birthday.ToString("MMMM d");
if (strBirthday != "")
{
if (strBirthday != strBirthdayPrev)
Report.WriteFormatted("<br/><b>{0}</b></br/>", strBirthday);
strBirthdayPrev = strBirthday;
// Write the name of the individual in the page
Report.WriteT3Br(" - ", ind.Name);
}
}
}
]%>
</body>
</html>
In addition to regular HTML elements, the report template contains code for
GenoPro to interpret and execute. The code looks almost like an HTML tag, but is marked
by a pair of delimiters: it begins with <%[ and ends with
]%>. Whatever code is within those delimiters is
executed by GenoPro producing HTML content from the data of your family
tree. GenoPro supports an alternative pair of delimiters,
@[ and
]@, for HTML editors reporting a syntax error with
<%[ and
]%>.
The very first line of code var strBirthdayPrev is for remembering the birthday of the
previous individual. Since multiple individuals from a family tree may
have the same birthday, it is important to remember the last written
birthday to avoid writing it multiple times in the report.
The next line creates a collection of individuals sorted by birthday. The
global variable
Individuals contains a collection of all individuals from the
document, however sorted by ID. You can sort any collection by almost
any sort key, such as sorting by name, gender, age, date of birth, date of death,
cause of death, number of children, number of pictures, occupations and
more.
For the complete list of sort keys, use the Tag Definitions
dialog from the Tools menu. There are many other collections available
such as Families, Pictures, Places, Occupations and so on.
The next step is to iterate (loop) through the collection of individuals and
generate HTML content for each living individual who has been assigned a
birthday. GenoPro offers a wealth of routines to format text and
generate phrases for producing rich HTML reports. In this report we
use two methods, WriteFormatted
and WriteT3Br. If you are
familiar with formatting strings, then you will guess the {0} inserts the
content of the first parameter, {1} inserts the content of the second
parameter, and so on. The method WriteT3Br writes the text only if not
empty (sometimes an individual's name may be unknown) and with the prefix "
- " followed by the <BR/> tag for a new line.
Packaging a Report Skin
A report skin needs a configuration file to instruct GenoPro the sequence of
templates to process, and how to process them. This file is named
Config.xml.
In this file, you specify the name of the skin, the scripting language
(JavaScript or VBScript), the templates and the start page of the report.
<?xml version="1.0" encoding="UTF-8"?>
<Skin Name="Birthday Listing">
<ReportGenerator ScriptLanguage="JavaScript" >
<Report Template="default.htm" />
<StartPage>default.htm</StartPage>
</ReportGenerator>
</Skin>
When the dialog Generate Report is being
displayed, GenoPro open all files named
Config.xml to get the
names of the available skins. Without the file Config.xml, your report
won't be listed in the Generate Report dialog.
You are welcome to modify any existing skin or create one of your own.
If you create something innovative, we may include it with the next update
of GenoPro.
| | | | To test your new knowledge on skins, a great exercise would be to add all wedding anniversaries to the page. | | | | |
|