How to Replace the HTML5 Viewer with the JS Viewer in ActiveReports
The HTML5 Viewer is an important web component with ActiveReports. Over the years, the viewer has become quite popular because of its versatility — it's light-weight and highly customizable. Additionally, it has a separate mobile layout and provides a modern responsive design.
The HTML5 Viewer supported many features; however, it's time to upgrade to the next version (primarily because of its dependency on JS frameworks, knockout and bootstrap). Recently we've announced that the HTML5 Viewer will soon become obsolete. We are bidding adieu to the HTML5 Viewer to welcome a more powerful and modern viewer: the JS Viewer.
The new JS Viewer is flexible, has modern UI, and is framework independent. Here, we'll explore its features and show you how to replace the existing HTML5 Viewer with the new JS Viewer.
This article will guide you through:
JS Viewer Features and Enhancements
This section describes the new features that are introduced in the JS Viewer. We’ll also discuss the enhancements made to the HTML5 Viewer's features, along with the upgrade to the new viewer.
Support for Modern Javascript Frameworks
One of the key factors of the new JS Viewer is that it's based purely on Javascript. It can be easily integrated with any of the modern Javascript frameworks (React, Angular, and Vue).
No dependencies on external styling frameworks
The JS Viewer has its own styling defined making it easy to modify the style file and customize it to blend with your styling needs. This will avoid any conflicts with other styling that you are using in your apps.
MVC-based reporting backend for both ASP.NET and ASP.NET Core
Rendering backend for the JS Viewer is now compiled into an MVC based assembly that enables you to render print and export the reports in your ASP.NET and/or ASP.NET Core application. It allows developers to have report rendering on server-side, while viewing the report on the client-side.
Cross-platform deployment
With support for ASP.NET Core, you can create a JS Viewer application that can be deployed on environments other than Windows (like Linux and macOS)
Easy customization of Toolbar and Sidebar panels
JS Viewer provides a user-friendly API to customize the Viewer components: Toolbar and Sidebar. These viewer components give the application designer full control to add/remove the existing functions and add custom buttons to meet any business need.
The below image shows how the button (to switch the theme above) is added to the JS Viewer.
User interface for export settings
The JS Viewer provides a straightforward interface to apply export settings (like file name, PDF security settings, password-protected Excel, and page settings) to the exported report. This reduces the need to write custom export calls for these settings.
Full-screen mode
In addition to desktop and mobile modes, the JS Viewer provides a full-screen mode, giving you a full view of the report on the display screen.
Multiple display modes
You can view reports in any desired view mode: Galley, Continuous, or Single Page. While Galley gives a single, scrollable pageview of the complete report, a Continuous view provides a scrollable view of the paginated report. The Single page is the paginated view of the report.
Enhanced print features
The JS Viewer uses PDF-based printing to generate a WYSIWYG print document. It uses the browser's preview dialog that provides various print settings like orientation, paper settings, and margins.
In addition to printing from the viewer, the JS Viewer has been enhanced with one-touch printing capability. With this, you can print the document without loading the report in the viewer using the below code:
Refresh report to load real-time data
The JS viewer allows you to load the most updated version of the report with its refresh option. You can also cancel the report rendering at any time.
Zooming in and out of the report
The JS Viewer provides zoom in and out options to adjust the report display. The various zoom options include Zoom percentages, Fit to Width, and Fit to Page.
Migrating the HTML5 Viewer to the JS Viewer
You may be wondering what you'll need to replace the HTML5 Viewer in your application with the new JS Viewer. Here, we'll look at some of the basic modifications you'll need in your application in order to use the new viewer.
Referencing the resource files
To integrate the JS Viewer in your existing application, you'll need jsViewer.min.js to load the viewer component layout and jsViewer.min.css for styling the viewer. These are available as a npm package using the below command:
npm install @grapecity/ar-viewer
You need to replace the js/css references for the HTML5 viewer - GrapeCity.ActiveReports.Viewer.Html.js & GrapeCity.ActiveReports.Viewer.Html.css with the aforementioned JS Viewer resource files in the view page.
Creating a viewer container
To load the viewer into the DOM, you need a container similar to the HTML5 viewer. So, you need to keep the div container as is:
<div id="viewerContainer"></div>
Initializing the viewer component
Replace the HTML5 viewer initialization code:
<script>
var viewer = Grapecity.ActiveReports.Viewer({
element:"#viewerContainer"
})
</script>
with the JS Viewer instance as follows:
<script>
var viewer = Grapecity.ActiveReports.JSViewer.create({
element:"#viewerContainer"
})
</script>
Opening a report in the viewer
For loading a report, replace the HTML5 Viewer's "report" object:
<script>
var viewer = Grapecity.ActiveReports.JSViewer.create({
element:"#viewerContainer",
report: {
id:"PageReport.rdlx"
}
})
</script>
with the "reportID" property of the JS Viewer as follows:
<script>
var viewer = Grapecity.ActiveReports.JSViewer.create({
element:"#viewerContainer",
reportID: "PageReport.rdlx"
})
</script>
Rendering backend
To add rendering, printing, and export capability to the JS Viewer, replace the WebService: ActiveReports.ReportService.asmx, with the assembly GrapeCity.ActiveReports.Aspnet.Viewer.
In addition to the above changes, you are required to add an OWIN Startup class and configure the middleware to fetch the reports stored within some repository/directory.
For the purpose of this post, we have modified the HTML5 Viewer sample shipped with ActiveReports 13. The sample can be downloaded below:
Download the sample
You can run the sample and see how seamlessly the JS Viewer is integrated into the application by replacing the HTML5 viewer as shown below:
If you have any questions, please leave them in the comment thread below.
Happy coding!
Paarisha Rana