News combit Dev Blog

HTML5 Viewer - A Giant Leap for Web Developers

Posted: Wednesday, September 24, 2014 | 0 comment(s)
 
In the last version we introduced a number of interactive features like report parameters, expandable regions, and dynamic sortings. Until version 20, using these in a web application was not possible as they result in a partial rerendering of the report or – for drilldown reports – trigger a brand new report. As the existing viewers didn't have a communication channel to a server control, this rerendering was impossible. 
Enter the new HTML5 viewer. This viewer is designed to work in almost any web browser. It is optimized for mobile devices and supports interactivity. It requires ASP.NET on the server side but can use any operating system on the client.

The main new features this viewer enables for web applications are 

  • Interactive drilldown
  • Usage of report parameters
  • Interactive sorting
  • Expandable regions
  • Incremental rendering (i.e. the first page is displayed while the rest of the report is still being created)
  • Page navigation
  • Zoom
  • Printing on the client
  • Exporting to popular formats like PDF, Word, Excel ...
The viewer is fully touch optimized using jQuery mobile controls, it is themeable via ThemeRoller and it can be used in all kinds of ASP.NET applications (both WebForms and MVC). On the client side, it supports all common desktop browsers as well as mobile devices like tablets and smartphones. The screenshot below shows the report parameter UI for one of our standard reports. Editing parameters is convenient via custom controls like date pickers, multi value combo boxes etc.

HTML5-Viewer-Report-Parameter-Panel-1.png
 
On the application's side, the usage is very simple – you just need to handle an event in which a new List & Label instance is requested (in order to ensure the usage of data sources and Windows resources on the creating thread). The handler could look like this:
 
      void Services_OnListLabelRequest(object sender, 
      ListLabelRequestEventArgs e)       {           ListLabel ll = new ListLabel();           ll.DataSource = DataAccess.CreateProviderCollection();           ll.AutoProjectFile = _reportsPath + e.ReportName;           e.ExportPath = Path.GetTempPath();           e.NewInstance = ll;       }
 
 In your ASP.NET page you can use the viewer like this:
 
<combit:Html5ViewerControl ID="Html5ViewerControl1" runat="server" >
</combit:Html5ViewerControl>
 
In ASP.NET/MVC, this would be:
 
@using combit.ListLabel20.Web
@Html.Html5Viewer("ReportWithReportParameters", null);
 
As you see, using the viewer is very straight forward. Given the number of features this brings, it's easily the most important feature for web developers since the initial support for web reporting back a number of versions.

 




Author: Jochen Bartlau
Head of Development List & Label

Jochen Bartlau leads the development at combit as Managing Director. He's a Microsoft .NET enthusiast driving innovation & agile project management. The mobile devices geek who used to be a physicist in his first life loves to spend his spare time with his family.


  

+1 800 256 3608 (toll-free North America only)