[et_pb_section fb_built=”1″ fullwidth=”on” _builder_version=”4.4.1″][et_pb_fullwidth_post_title meta=”off” featured_placement=”background” _builder_version=”4.7.7″ title_font=”||||||||” title_text_color=”#ff6317″ title_font_size=”3.5em” meta_font=”|300|||||||” meta_text_color=”#ffffff” meta_font_size=”1em” background_enable_color=”off” use_background_color_gradient=”on” background_color_gradient_start=”rgba(248,248,248,0.85)” background_color_gradient_end=”rgba(248,248,248,0.75)” background_color_gradient_overlays_image=”on” min_height=”20vh” height=”400px” custom_padding=”6vh||6vh||false|false” global_module=”403″ locked=”off”][\/et_pb_fullwidth_post_title][\/et_pb_section][et_pb_section fb_built=”1″ admin_label=”intro” _builder_version=”4.4.6″ custom_padding=”|||0px||” locked=”off”][et_pb_row use_custom_gutter=”on” _builder_version=”4.4.6″ custom_margin=”||||false|false” custom_padding=”6vh||||false|false” border_color_left=”rgba(0,0,0,0)”][et_pb_column type=”4_4″ _builder_version=”4.4.1″][et_pb_text _builder_version=”4.7.7″ text_font=”||||||||” text_font_size=”1.1em” text_line_height=”1.6em” quote_font=”|700|||||||” quote_text_align=”left” quote_font_size=”16px” header_2_text_color=”#ff6317″ header_2_font_size=”1.5em” header_2_line_height=”0.9em” header_3_font_size=”23px” header_4_font=”||||||||” header_4_font_size=”16px” header_4_line_height=”1.5em” header_5_font_size=”14px” custom_margin=”||||false|false” custom_padding=”||35px||false|false” hover_enabled=”0″ border_color_left=”#ff6317″ sticky_enabled=”0″]<\/p>\n
One of the projects we worked on for the retail industry<\/a> was a custom reporting tool from HTML to PDF.<\/p>\n In the business world, reporting is a necessary evil: it is accepted\/must be done in order to achieve a better outcome (e.g., organizational oversight, standardization, discipline). Then, as if not enough pressure, regulatory bodies will keep piling up.<\/p>\n Take for example EU\u2019s Payment Services Directive 2015\/2366 (check the official page<\/a>, its Wikipedia page<\/a>, and EU\u2019s official rolling plan<\/a>): due to the technological changes in payments, \u201cit aims at better protecting consumers when they pay online, promoting the development and use of innovative online and mobile payments, and making cross-border European payment services safer<\/em>\u201d. In plain English, this ends up in developing and implementing a \u201csingle, open and secure European technical standard for QR-codes [that] would support the uptake and interoperability of instant payments<\/em>\u201d. The final deadline to comply: 14th September 2019 (unofficially extended \u201cbecause of pandemics\u201d).<\/p>\n For virtually all B2C companies, this means they have to include standardized security marks (i.e., QR codes) on all the bills. Furthermore, this means the payment software needs to be updated, in order to accommodate the regulatory requests and to create leaner reporting that supports internal needs. But then, some (very) old software can\u2019t easily be upgraded, and it\u2019s easy to start afresh.<\/p>\n Working with a retail client, we have developed a custom reporting tool<\/strong> that is:<\/p>\n [\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row use_custom_gutter=”on” _builder_version=”4.7.7″ custom_margin=”||||false|false” custom_padding=”6vh||||false|false” border_color_left=”rgba(0,0,0,0)”][et_pb_column type=”4_4″ _builder_version=”4.4.1″][et_pb_text _builder_version=”4.7.7″ text_font=”||||||||” text_font_size=”1.1em” text_line_height=”1.6em” quote_font=”|700|||||||” quote_text_align=”left” quote_font_size=”16px” header_2_text_color=”#ff6317″ header_2_font_size=”2em” header_2_line_height=”0.9em” header_3_font_size=”23px” header_4_font=”||||||||” header_4_font_size=”16px” header_4_line_height=”1.5em” header_5_font_size=”14px” custom_margin=”||||false|false” custom_padding=”||10px||false|false” border_color_left=”#ff6317″]<\/p>\n [\/et_pb_text][et_pb_text _builder_version=”4.7.7″ text_font=”||||||||” text_font_size=”1.1em” text_line_height=”1.6em” quote_font=”|700|||||||” quote_text_align=”left” quote_font_size=”16px” header_2_text_color=”#ff6317″ header_2_font_size=”1.5em” header_2_line_height=”0.9em” header_3_font_size=”23px” header_4_font=”||||||||” header_4_font_size=”16px” header_4_line_height=”1.5em” header_5_font_size=”14px” custom_margin=”||||false|false” custom_padding=”||35px||false|false” border_color_left=”#ff6317″]<\/p>\n First of all, it takes time to learn how to use a report generator and -most important- how to communicate with its APIs. This results in high installation effort (and possibly tedious maintenance along the way).<\/p>\n Then, the costs of a really good, high-performing report generator are not far away from the cost of a custom reporting tool.<\/p>\n By building your own, you can focus on your specific requirements without the overhead of a \u201csatisfy all\u201d ready-made solution. This results in higher flexibility (of design, data sources, etc.) and unmatched performance.<\/p>\n [\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row use_custom_gutter=”on” _builder_version=”4.7.7″ custom_margin=”||||false|false” custom_padding=”6vh||||false|false” border_color_left=”rgba(0,0,0,0)”][et_pb_column type=”4_4″ _builder_version=”4.4.1″][et_pb_text _builder_version=”4.7.7″ text_font=”||||||||” text_font_size=”1.1em” text_line_height=”1.6em” quote_font=”|700|||||||” quote_text_align=”left” quote_font_size=”16px” header_2_text_color=”#ff6317″ header_2_font_size=”2em” header_2_line_height=”0.9em” header_3_font_size=”23px” header_4_font=”||||||||” header_4_font_size=”16px” header_4_line_height=”1.5em” header_5_font_size=”14px” custom_margin=”||||false|false” custom_padding=”||10px||false|false” border_color_left=”#ff6317″]<\/p>\n [\/et_pb_text][et_pb_text _builder_version=”4.7.7″ text_font=”||||||||” text_font_size=”1.1em” text_line_height=”1.6em” quote_font=”|700|||||||” quote_text_align=”left” quote_font_size=”16px” header_2_text_color=”#ff6317″ header_2_font_size=”1.5em” header_2_line_height=”0.9em” header_3_font_size=”23px” header_4_font=”||||||||” header_4_font_size=”16px” header_4_line_height=”1.5em” header_5_font_size=”14px” custom_margin=”||||false|false” custom_padding=”||35px||false|false” border_color_left=”#ff6317″]<\/p>\n For this specific customer, we had already built a cashbox module as the first part of a bigger ERP system. The reporting capabilities were a natural extension, in the form of an additional microservice that could be used by other modules along the way.<\/p>\n For each needed report, we created a three-step process:<\/p>\n [\/et_pb_text][et_pb_gallery gallery_ids=”8061″ fullwidth=”on” hover_icon=”%%186%%” _builder_version=”4.7.7″ _module_preset=”default” max_width=”45%” module_alignment=”left” max_height=”45%” custom_padding=”||35px||false|false”][\/et_pb_gallery][et_pb_text _builder_version=”4.7.7″ text_font=”||||||||” text_font_size=”1.1em” text_line_height=”1.6em” quote_font=”|700|||||||” quote_text_align=”left” quote_font_size=”16px” header_2_text_color=”#ff6317″ header_2_font_size=”1.5em” header_2_line_height=”0.9em” header_3_font_size=”23px” header_4_font=”||||||||” header_4_font_size=”16px” header_4_line_height=”1.5em” header_5_font_size=”14px” custom_margin=”||||false|false” custom_padding=”||35px||false|false” border_color_left=”#ff6317″]<\/p>\n We started by defining the layouts with HTML, as it is the most popular language that describes layouts. For each type of report, we needed three HTML files: a body, a header, and a footer. (This is because the client\u2019s different reports all needed different headers\/body\/footers). We could easily create and modify report mock-ups in HTML alone to get useful feedback from the client in the earlier stage.<\/p>\n Once we had the layout defined, the next step was to inject the dynamic data. We used a heterogeneous data source (SQL tables, JSON files, and in-memory data). When the data was available, we used Razor as a template engine to inject the data into HTML.<\/p>\n To integrate Razor into our software, we used the NuGet package and we installed RazorEngine 3.10.0. You can see an example below, of how Razor is used inside HTML. In this example, the code creates a table of articles with three columns, the position of the article, the article\u2019s code and its price.<\/p>\n [\/et_pb_text][et_pb_text _builder_version=”4.7.7″ text_font=”|300|||||||” text_font_size=”1em” text_line_height=”1.3em” quote_font=”|700|||||||” quote_text_align=”left” quote_font_size=”1em” header_2_text_color=”#ff6317″ header_2_font_size=”1.5em” header_2_line_height=”0.9em” header_3_font_size=”23px” header_4_font=”||||||||” header_4_font_size=”16px” header_4_line_height=”1.5em” header_5_font_size=”14px” background_color=”#f8f8f8″ custom_margin=”||35px|20px|false|false” custom_padding=”||||false|false” border_color_left=”rgba(0,0,0,0)” border_style_left=”none” locked=”off”]<\/p>\n [\/et_pb_text][et_pb_text _builder_version=”4.7.7″ text_font=”||||||||” text_font_size=”1.1em” text_line_height=”1.6em” quote_font=”|700|||||||” quote_text_align=”left” quote_font_size=”16px” header_2_text_color=”#ff6317″ header_2_font_size=”1.5em” header_2_line_height=”0.9em” header_3_font_size=”23px” header_4_font=”||||||||” header_4_font_size=”16px” header_4_line_height=”1.5em” header_5_font_size=”14px” custom_margin=”||||false|false” custom_padding=”||35px||false|false” border_color_left=”#ff6317″]<\/p>\n @Model represents the root of the model, where Razor expects to find the data. In the code, we tell Razor to use the customized ReportModel, C# object as the @Model.<\/p>\n We call the Razor method RunCompile with the following parameters:<\/p>\n This method returns the HTML string with injected data as the final HTML result.<\/p>\n [\/et_pb_text][et_pb_text _builder_version=”4.7.7″ text_font=”|300|||||||” text_font_size=”1em” text_line_height=”1.3em” quote_font=”|700|||||||” quote_text_align=”left” quote_font_size=”1em” header_2_text_color=”#ff6317″ header_2_font_size=”1.5em” header_2_line_height=”0.9em” header_3_font_size=”23px” header_4_font=”||||||||” header_4_font_size=”16px” header_4_line_height=”1.5em” header_5_font_size=”14px” background_color=”#f8f8f8″ custom_margin=”||35px|20px|false|false” custom_padding=”||||false|false” border_color_left=”rgba(0,0,0,0)” border_style_left=”none” locked=”off”]<\/p>\n [\/et_pb_text][et_pb_text _builder_version=”4.7.7″ text_font=”||||||||” text_font_size=”1.1em” text_line_height=”1.6em” quote_font=”|700|||||||” quote_text_align=”left” quote_font_size=”16px” header_2_text_color=”#ff6317″ header_2_font_size=”1.5em” header_2_line_height=”0.9em” header_3_font_size=”23px” header_4_font=”||||||||” header_4_font_size=”16px” header_4_line_height=”1.5em” header_5_font_size=”14px” custom_margin=”||||false|false” custom_padding=”||35px||false|false” border_color_left=”#ff6317″]ReportModel class looks like below:[\/et_pb_text][et_pb_text _builder_version=”4.7.7″ text_font=”|300|||||||” text_font_size=”1em” text_line_height=”1.3em” quote_font=”|700|||||||” quote_text_align=”left” quote_font_size=”1em” header_2_text_color=”#ff6317″ header_2_font_size=”1.5em” header_2_line_height=”0.9em” header_3_font_size=”23px” header_4_font=”||||||||” header_4_font_size=”16px” header_4_line_height=”1.5em” header_5_font_size=”14px” background_color=”#f8f8f8″ custom_margin=”||35px|20px|false|false” custom_padding=”||||false|false” border_color_left=”rgba(0,0,0,0)” border_style_left=”none” locked=”off”]<\/p>\n [\/et_pb_text][et_pb_text _builder_version=”4.7.7″ text_font=”||||||||” text_font_size=”1.1em” text_line_height=”1.6em” quote_font=”|700|||||||” quote_text_align=”left” quote_font_size=”16px” header_2_text_color=”#ff6317″ header_2_font_size=”1.5em” header_2_line_height=”0.9em” header_3_font_size=”23px” header_4_font=”||||||||” header_4_font_size=”16px” header_4_line_height=”1.5em” header_5_font_size=”14px” custom_margin=”||||false|false” custom_padding=”||35px||false|false” border_color_left=”#ff6317″]<\/p>\n After these steps, we end up with a complete HTML and the final step takes care of the conversion of the HTML into a pdf report.<\/p>\n Converting HTML to pdf could look like a basic operation and there are a lot of free tools on the internet to do just that. But a report is not just a pdf file, is more than that. It comes with features like adding header, footer, pagination, and printing support.<\/p>\n\n
Why build your own reports instead of using ready-made reports generators<\/h2>\n
Our reporting solution<\/h2>\n
\n
<table>\n @foreach(var article in @Model.Items){\n <tr>\n <td>\n <span> @article.Position<\/span>\n <span> @article.Code<\/span>\n <\/td>\n <td>\n <span> @article.Price \u20ac<\/span>\n <\/td>\n <\/tr>\n }\n<\/table><\/pre>\n\n
var result = Engine.Razor.RunCompile(File.ReadAllText(htmlPath), templateIdentifier,typeof(ReportModel), reportModel);<\/pre>\n
public class ReportModel\n{\n \n public List<Item> Items {get; set;}\n}\n \npublic class Item\n{\n public int Position {get; set;}\n public double Price {get; set;}\n public string Code {get; set;}\n}<\/pre>\n