This example builds on Example 1. It produces an HTML report that describes a Program and includes a chart. Because the Program is specified as a parameter, this example report will be able to describe any Program.
This example will focus on adding the chart. Most of the HTML template is described in more detail in Example 1.
Setting up Parameters
The report template is a straightforward HTML file, with a head section and a body section, with some references to the Velocity template language. Lines that start with '#' are Velocity directives. A number of Velocity variables are pre-defined. Within your HTML markup, you can refer to Velocity variables by name, preceded with a '$.'
The first step is a Velocity directive to create a variable called $program.
#set($program = $dashboardParameters.getProgram("AuditProject.id1", "Program")) |
Next, initialize the chart:
$dashboardParameters.initChart("Shared Reports/System/Project Reports/Entities in Project by Criticality", "large") |
The long name, "Shared Reports/System/Project Reports/Entities in Project by Criticality," refers to a specific chart in the tree hierarchy. The first argument to the initChart method is the URL of the chart. The second argument can be "large" or "small."
| Note: URLs are not affected by changes to UIDictionary.xml. By editing that file, users can change the display of terms such as 'System' or 'Reports.' Because URLs do not change, your custom reports do not have to be updated if UIDictionary.xml is changed. |
Adding the Chart
You can add the chart to the bottom of the text-only in Example 1 by appending the following HTML. In this example, you can arbitrarily limit the chart to 50% of the window width, but this can be specified in absolute units.
<table border='0' width='100%'> |
To display the program name, invoke the getName method on the program variable, just as you invoked the getProgram method on the pre-defined dashboardParameters object.
Example Template
The complete HTML template for this example is:
| #set($program = $dashboardParameters.getProgram("AuditProject.id1", "Program")) $dashboardParameters.initChart("Shared Reports/System/Project Reports/Entities in Project by Criticality","large") <html> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/> <title>Program Details</title> <link rel="stylesheet" href="/spc/css/homepage.css" > </head> <body margin marginheight="10" topmargin="10" leftmargin="10">> <center> <table border='0' width='750'> <tr> <td> <hr/> <br/><br/><br/><br/> <h1 align=left>$program.getName() </h1> $program.getDescription() <br/><br/><br/><br/><br/> <table border='0' width='100%'> <tr> <td ALIGN=LEFT valign='BOTTOM'> <b>Program key information</b><br><br> <b>Program Name: <i>$program.getName()</i></b><br><br> <b>Program Description:</b> <i>$program.getDescription()</i> <br> <br> <b>Program Owner:</b> <i>$program.getAuthor() </i> <br> <b>Program Status:</b> <i>$program.getStatusDB() </i> <br> <b>Program Workflow:</b> <i>$program.getRaWorkflowTemplate().getName()</i> <br> <b>Survey Taking:</b> <i>$program.getSurveyTakingPreferences().getName() </i> <br> <br/><br/> </td> <tr></tr> </tr> </table> </table> <table border='0' width='100%'> <tr> <td width='50%'> $dashboardParameters.getChart("Shared Reports/System/Project Reports/Entities in Project by Criticality") </td> </tr> </table> </center> </body> </html> |
The next example, Example 3, explains how to include multiple charts in a report.
