GenoPro Home
GenoPro Home  |  SDK Home  |  Report Generator  |  Support  |  Search  |  Help  |  Site Map

Skip Navigation Links.

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.


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  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:

Sample report listing all birthdays of a genealogy tree

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:

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <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);

Programming 101

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 ]%>.  

Understanding the Code

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" />

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.



Copyright ┬ę 1998-2020. All rights reserved. GenoPro┬« and the GenoPro logo are registered trademarks.