This is the final tip in a three part series, where we learn how to build custom HTML reports in TIBCO Spotfire. We started by learning how to output aggregated data from table-based visualizations, and then how to export images of Spotfire visualizations. We then applied stylesheets to these assets to create custom reports. In this week’s tip, we will put it all together and include a custom report generator which will create an HTML report, which includes a custom layout, including stylesheets, comments, and a few other bells and whistles like which filters are being used. It can even be extended to create a WYSIWYG report generator interface.
There are several key components to the Spotfire report: the visualizations, the layout, and the contextual information. We have already learned how to output the visualizations and style them, so we will now focus on the layout.
Custom Report Layout
Since this is HTML, we can use HTML Tables, or Cascading Style Sheets to create an exact layout for the desired report. If you are building this report for a specific Spotfire Analysis file, you can build a layout specific to that as well. Otherwise, you can also use a more generic layout so it is applicable to all analysis files.
You can also create a property control to allow the user to define the report type. In this example, we have a standard report (called ‘classic’), one specific for printouts, one for displaying on large displays, one specific for displaying in tablet PCs, and one for displaying in a Spotfire analysis file, like a Cover Page.
Each selection will have its own CSS associated with it that will determine the layout and style.
One example HTML and CSS is shown below:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Custom Spotfire Report</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
<!--
#Table_01 {
position:absolute;
left:0px;
top:0px;
width:928px;
height:566px;
}
#tabbedNavigation {
position:absolute;
left:0px;
top:0px;
width:928px;
height:19px;
}
#header {
position:absolute;
left:0px;
top:19px;
width:672px;
height:158px;
}
#filter {
position:absolute;
left:672px;
top:19px;
width:248px;
height:547px;
}
#divider {
position:absolute;
left:920px;
top:19px;
width:8px;
height:547px;
}
#vis1 {
position:absolute;
left:0px;
top:177px;
width:672px;
height:188px;
}
#vis2 {
position:absolute;
left:0px;
top:365px;
width:672px;
height:201px;
}
-->
</style>
</head>
<body style="background-color:#FFFFFF;">
<div id="Table_01">
<div id="tabbedNavigation">
<!--INSERT TABBED NAVIGATION -->
</div>
<div id="header">
<!--INSERT HEADER TEXT -->
</div>
<div id="filter">
<!--INSERT FILTER SCRIPT -->
</div>
<div id="divider">
<img id="spacer" src="images/divider.gif" width="8" height="547" alt="DIVIDER" />
</div>
<div id="vis1">
<!-- INSERT FIRST SPOTFIRE VISUALIZATION-->
</div>
<div id="vis2">
<!-- INSERT SECOND SPOTFIRE VISUALIZATION-->
</div>
</div>
</body>
</html>
This example layout has placeholder for 4 things: header text, filter settings, and 2 spotfire visualizations.
The header text can be inputted by a user from a series of property controls:
In addition, we want to display the current filter settings per page in our export report. We are able to retrieve that using a script which is listed here.
http://spotfire.tibco.com/community/blogs/stn/archive/2010/07/19/seeing-what-filter-devices-are-active.aspx
Then we add a script to our text area, which will export the visualizations (which we learned the last two tips), write the HTML template layout which will read in the correct CSS file, and add in the properties and images to the report:
from System.IO import Path
tempFolder = Path.GetTempPath()
tempFilename = Path.GetTempFileName()
f = open(tempFilename, 'w')
f.write(
"<html>\n"+
" <head>\n"+
" <link rel='stylesheet' type='text/css' href='print.css' media='print'/>\n"+
" </head>\n"+
" <body style='background-color:#FFFFFF;'>\n"+
" <div id='Table_01'>\n"+
" <div id='tabbedNavigation'>\n"+
" <!--INSERT TABBED NAVIGATION -->\n"+
" </div>\n"+
" <div id='header'>\n"+
Document.Properties["header"] +"\n"+
" </div>\n"+
" <div id='filter'>\n"+
strFilterSettings +"\n"+
" </div>\n"+
" <div id='divider'>\n"+
" <img id='spacer' src='images/divider.gif' width='8' height='547' alt='DIVIDER' />\n"+
" </div>\n"+
" <div id='vis1'>\n"+
vis1src +"\n"+
" </div>\n"+
" <div id='vis2'>\n"+
vis2Src +"\n"+
" </div>\n"+
"</div>\n"+
"</body>\n"+
"</html>\n")
f.close()
Here are a couple samples of the output when everything is put together. This scenario creates an HTML report which looks similar to the tabbed layout you would see in the Spotfire Web Player, only with static HTML:
Other Deployment Options
If you wish to have a solution similar to this available for all Analysis files, then you can use the SDK and our C# extensions to create a Custom Export Tool, which can be built to show up both in TIBCO Spotfire Professional as well as in the TIBCO Spotfire Web Player.
You can also hook this code up to Automation Services and create a server-side reporting renderer. This would provide a centralized approach to storing and rendering reports, and would also allow users to view reports without installing additional software or requiring additional licenses.