HTML5 Viewer – A Giant Leap for Web Developers

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.

Technologies and requirements have changed. So has our Web Report Viewer. All about the new Web Report Viewer with WebComponents usable in popular JavaScript frameworks such as React, Angular or Vue.

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.

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" >

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.

Related Posts

Leave a Comment