Sample HTML Report

HTML Report Generator - Sample Application Screenshot

Introduction
The HTML Report Engine is a .NET class library which helps in generating well formatted HTML reports. It can take any DataSet as its report source. Reports can have sectional data contents and bar charts.

Background
Crystal Reports is a reporting tool that comes along with VS.NET, but designing and deploying a Crystal Reports report in your application is a bit complex. Though this HTML report engine utility has only limited number of features, it can produce awesome reports with no complex designing and coding work involved.

Using the code

Its a generic reporting utility which takes as a report source, a DataSet containing at least one DataTable. The class library contains three main classes:
Field

Section Report

The Field class contains report field information like report column name, column header, background color, and so on. The Section class holds information about a section like group by column name, title prefix, background color, charting information, and so on. The Report class contains all the methods and properties required to render an HTML report. In this class, a few CSS (Cascaded Style Sheet) classes are used to format the report content. The following code sample explains how to use this utility in your application:
Collapse | Copy Code

//Include the namespace using HTMLReportEngine; //Create report object and set properties. Report report = new Report(); report.ReportTitle = "Issue Report"; //Create a DataSet ds and fill it before using this code. report.ReportSource = ds; //Create Section Section release = new Section("Release","Release: "); //Create SubSection Section project = new Section("Project","ProjectID: "); //Add the sections to the report release.SubSection = project; report.Sections.Add(release); //Add report fields to the report object. report.ReportFields.Add(new report.ReportFields.Add(new report.ReportFields.Add(new report.ReportFields.Add(new report.ReportFields.Add(new Field("TicketNo", "Ticket", 50, ALIGN.RIGHT)); Field("CreatedBy", "CreatedBy", 150)); Field("AssignedTo", "AssignedTo")); Field("Release", "Release", 200)); Field("Project", "Project", 150, ALIGN.RIGHT));

//Generate and save the report report.SaveReport(@"C:\Data\Report.htm");

Class properties and methods

Field Property FieldName HeaderName Width Alignment BackColor HeaderBackColor Type Description A column name in the DataSet. String to be displayed as column header. Width of the column in pixels. Text alignment of the field. Default is ALIGN.LEFT. Column background color. Column header background color. If true, the field is included for total. Default is

String String
Int ALIGN Color Color

isTotalField

bool

false.

Field() Section Property GroupBy TitlePrefix BackColor

Constructor There are eight overloaded constructors available.

Type

Description Column name on which group by is to be applied. Prefix text for section header. Section header background color.

String String
Color

GradientBackground

bool bool
Section

true to display gradient color; false to display plain background color. Default is false.
Display/hide Total row. Subsection of type Section. Display/hide chart. Chart title text.

IncludeTotal SubSection IncludeChart ChartTitle ChartShowAtBottom

bool String bool

true - show chart at bottom (after data rows);

false show chart at top. Default is false.

ChartChangeOnField

String String bool String

Chart Y-axis field, usually text field. Chart X-axis field, must be a numeric field. Default is record count. Enable/disable chart border. Chart label column header text. Default is Label. Chart percentage column header text. Default is Percentage. Chart value column header text. Default is Value.

ChartValueField

ChartShowBorder

ChartLabelHeader

ChartPercentageHeader

String

ChartValueHeader

String

Section() Report Property ReportTitle

Constructor There are three overloaded constructors available.

Type

Description Report title text. Report source is a DataSet. The DataSet must contain at least one DataTable with data. Collection of report sections. Each element is of type Section. Collection of report fields. Each element is of type Field. Report font as string. Collection of column names to be listed in Total row. Each element is of type string. Display/hide Total row. Display/hide chart.

String
DataSet

ReportSource

Sections

ArrayList

ReportFields

ArrayList

ReportFont

String
ArrayList

TotalFields

IncludeTotal IncludeChart

bool bool

ChartTitle

String bool String String bool String

Chart title text.

ChartShowAtBottom

true - show chart at bottom (after data rows); false show chart at top. Default is false.
Chart Y-axis field, usually text field. Chart X-axis field, must be a numeric field. Default is record count. Enable/disable chart border. Chart label column header text. Default is Label. Chart percentage column header text. Default is Percentage. Chart value column header text. Default is Value. Generates the HTML report and returns it as a StringBuilder object. Generates the HTML report and saves it to disk with the given file name.

ChartChangeOnField

ChartValueField

ChartShowBorder

ChartLabelHeader

ChartPercentageHeader

String

ChartValueHeader

String

GenerateReport()

Method

SaveReport(string fileName)

Method

Formatting the report

Including totals
This report engine supports multiple SUM fields for a report. And the SUM can be displayed on demand in any of the sections added to the report. The SUM field must be of type numeric. The following code explains how to add SUM fields:
Collapse | Copy Code

//Add Total fields report.TotalFields.Add("Project"); report.TotalFields.Add("ProgressedHours"); //Set IncludeTotal property of the sections to true project.IncludeTotal = true; release.IncludeTotal = true;

Adding charts
This engine can produce bar charts. The developer has to provide only the ChangeOnField and ValueField as input. If the developer has not given any ValueField, the record count will be taken as the Value. Changing the ChartShowAtBottom property would let your charts come either at the top or the bottom of the section.
Collapse | Copy Code

//Set Chart properties release.ChartChangeOnField = "Severity"; release.ChartValueField = "ProgressedHours"; release.ChartTitle = "Severity-Wise report"; release.ChartLabelHeader = "Severity Type"; release.ChartValueHeader = "Hours"; release.ChartPercentageHeader = "Progress";

Aligning fields
Field texts can be aligned to Left, Right, or Center. By default, the text alignment is set to Left.
Collapse | Copy Code

//Set field Alignment Field field1 = new Field(); field1.Alignment = ALIGN.RIGHT;

Specifying colors

The developers are allowed to change the background colors of section headers, column headers, and column data. Section headers can have gradient backgrounds by setting the GradientBackground property to true.
Collapse | Copy Code

//Specifying Colors //Main Section header color release.BackColor = Color.WhiteSmoke; release.GradientBackground = true; //Sub Section header color project.BackColor = Color.GhostWhite; project.GradientBackground = true; //Field Colors field1.HeaderBackColor = Color.LightSlateGray; field1.BackColor = Color.Gainsboro; field2.HeaderBackColor = Color.LightSlateGray; field2.BackColor = Color.White; field3.HeaderBackColor = Color.LightSlateGray; field3.BackColor = Color.Gainsboro;

Points of interest
It is recommended that you specify the column width for all report fields except one. That one may be a variable text field. The field without column width will automatically fit into the remaining space available in the table. There is a simple way to export data to MS Excel. You can open the generated HTML file in Internet Explorer, right click on the report, and select 'Export to Excel'. Done!