sample html report
TRANSCRIPT
-
8/3/2019 Sample HTML Report
1/8
Sample HTML Report
HTML Report Generator - Sample Application Screenshot
-
8/3/2019 Sample HTML Report
2/8
Introduction
The HTML Report Engine is a .NET class library which helps in generating well formattedHTML reports. It can take any DataSet as its report source. Reports can have sectional datacontents and bar charts.
Background
Crystal Reports is a reporting tool that comes along with VS.NET, but designing and deploying aCrystal Reports report in your application is a bit complex. Though this HTML report engineutility has only limited number of features, it can produce awesome reports with no complexdesigning and coding work involved.
Using the code
Its a generic reporting utility which takes as a report source, a DataSet containing at least oneDataTable . The class library contains three main classes:
Field
-
8/3/2019 Sample HTML Report
3/8
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, titleprefix, background color, charting information, and so on.
The Report class contains all the methods and properties required to render an HTML report. Inthis class, a few CSS (Cascaded Style Sheet) classes are used to format the report content. Thefollowing 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 Field( "TicketNo" , "Ticket" , 50 , ALIGN.RIGHT));report.ReportFields.Add( new Field( "CreatedBy" , "CreatedBy" , 150 ));
report.ReportFields.Add( new Field( "AssignedTo" , "AssignedTo" ));report.ReportFields.Add( new Field( "Release" , "Release" , 200 ));report.ReportFields.Add( new Field( "Project" , "Project" , 150 , ALIGN.RIGHT));
//Generate and save the report
report.SaveReport( @"C:\Data\Report.htm" );
Class properties and methods
http://www.codeproject.com/KB/cs/HTMLReportEngine.aspxhttp://www.codeproject.com/KB/cs/HTMLReportEngine.aspxhttp://www.codeproject.com/KB/cs/HTMLReportEngine.aspxhttp://www.codeproject.com/KB/cs/HTMLReportEngine.aspx -
8/3/2019 Sample HTML Report
4/8
Field
Property Type Description
FieldName String A column name in the DataSet .
HeaderName String String to be displayed as column header.
Width Int Width of the column in pixels.
Alignment ALIGN Text alignment of the field. Default is ALIGN.LEFT .
BackColor Color Column background color.
HeaderBackColor Color Column header background color.
isTotalField bool If true , the field is included for total. Default isfalse .
Field() Constructor There are eight overloaded constructors available.
Section
Property Type Description
GroupBy String Column name on which group by is to be applied.
TitlePrefix String Prefix text for section header.
BackColor Color Section header background color.
GradientBackground bool true to display gradient color; false todisplay plain background color. Default is false .
IncludeTotal bool Display/hide Total row.
SubSection Section Subsection of type Section .
IncludeChart bool Display/hide chart.
ChartTitle String Chart title text.
ChartShowAtBottom bool true - show chart at bottom (after data rows);
-
8/3/2019 Sample HTML Report
5/8
false show chart at top. Default is false .
ChartChangeOnField String Chart Y-axis field, usually text field.
ChartValueField String Chart X-axis field, must be a numeric field. Default
is record count.
ChartShowBorder bool Enable/disable chart border.
ChartLabelHeader String Chart label column header text. Default isLabel .
ChartPercentageHeader String Chart percentage column header text. Default isPercentage .
ChartValueHeader String Chart value column header text. Default isValue .
Section() Constructor There are three overloaded constructors available.
Report
Property Type Description
ReportTitle String Report title text.
ReportSource DataSet Report source is a DataSet . The DataSet mustcontain at least one DataTable with data.
Sections ArrayList Collection of report sections. Each element is of type Section .
ReportFields ArrayList Collection of report fields. Each element is of typeField .
ReportFont String Report font as string .
TotalFields ArrayList Collection of column names to be listed in Totalrow. Each element is of type string .
IncludeTotal bool Display/hide Total row.
IncludeChart bool Display/hide chart.
-
8/3/2019 Sample HTML Report
6/8
ChartTitle String Chart title text.
ChartShowAtBottom bool true - show chart at bottom (after data rows);false show chart at top. Default is false .
ChartChangeOnField String Chart Y-axis field, usually text field.
ChartValueField String Chart X-axis field, must be a numeric field. Defaultis record count.
ChartShowBorder bool Enable/disable chart border.
ChartLabelHeader String Chart label column header text. Default isLabel .
ChartPercentageHeader String Chart percentage column header text. Default isPercentage .
ChartValueHeader String Chart value column header text. Default isValue .
GenerateReport() MethodGenerates the HTML report and returns it as aStringBuilder object.
SaveReport( string fileName) Method
Generates the HTML report and saves it to diskwith the given file name.
Formatting the report
Including totals
This report engine supports multiple SUM fields for a report. And the SUM can be displayed ondemand in any of the sections added to the report. The SUM field must be of type numeric. Thefollowing 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 ;
http://www.codeproject.com/KB/cs/HTMLReportEngine.aspxhttp://www.codeproject.com/KB/cs/HTMLReportEngine.aspxhttp://www.codeproject.com/KB/cs/HTMLReportEngine.aspxhttp://www.codeproject.com/KB/cs/HTMLReportEngine.aspx -
8/3/2019 Sample HTML Report
7/8
Adding charts
This engine can produce bar charts. The developer has to provide only the ChangeOnField andValueField as input. If the developer has not given any ValueField , the record count will betaken as the Value . Changing the ChartShowAtBottom property would let your charts comeeither 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 toLeft .
Collapse | Copy Code
//Set field Alignment
Field field1 = new Field();field1.Alignment = ALIGN.RIGHT;
Specifying colors
http://www.codeproject.com/KB/cs/HTMLReportEngine.aspxhttp://www.codeproject.com/KB/cs/HTMLReportEngine.aspxhttp://www.codeproject.com/KB/cs/HTMLReportEngine.aspxhttp://www.codeproject.com/KB/cs/HTMLReportEngine.aspxhttp://www.codeproject.com/KB/cs/HTMLReportEngine.aspxhttp://www.codeproject.com/KB/cs/HTMLReportEngine.aspxhttp://www.codeproject.com/KB/cs/HTMLReportEngine.aspxhttp://www.codeproject.com/KB/cs/HTMLReportEngine.aspx -
8/3/2019 Sample HTML Report
8/8
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 theGradientBackground 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 onemay be a variable text field. The field without column width will automatically fit into theremaining space available in the table.
There is a simple way to export data to MS Excel. You can open the generated HTML file inInternet Explorer, right click on the report, and select 'Export to Excel'. Done!
http://www.codeproject.com/KB/cs/HTMLReportEngine.aspxhttp://www.codeproject.com/KB/cs/HTMLReportEngine.aspxhttp://www.codeproject.com/KB/cs/HTMLReportEngine.aspxhttp://www.codeproject.com/KB/cs/HTMLReportEngine.aspx