ActiveReports 11
Customizing the HTML Viewer UI
ActiveReports 11 > ActiveReports User Guide > Samples and Walkthroughs > Walkthroughs > Common Walkthroughs > Professional > Customizing the HTML Viewer UI
Show All
Hide All

You can customize the HTMLViewer interface using JQuery methods. WebViewer control adds JQuery library in page scripts. Use the code in this walkthrough to remove a button from the HTMLViewer toolbar and add a client side PDF export implementation.

This walkthrough is split into the following activities:

When you complete this walkthrough you get an HTMLViewer that looks similar to the following at run time.

To load an ActiveReport in the Web application

  1. Create a new Visual Studio ASP.NET Web application.
  2. In the Default.aspx that gets created, go to the Visual Studio toolbox ActiveReports 11 Page Report tab and drag a WebViewer control onto the Design view.
  3. Load the report generated at the end of the Single Layout Reports walkthrough.
    Note: You may load any report, section or page in the HTMLViewer. See Getting Started with the Web Viewer for information on loading a report.

To add the jQuery library to the Web application project

Follow the steps below to add the jQuery library to your Web application project.

  1. In the Source view of the Default.aspx file, add the following code.
    Add this code after the <head> tag
    Copy Code 
    <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
  2. In the Source view of the Default.aspx file, add the following code.
    Add this code before the </script> tag
    Copy Code 
    var clientID = ...;
$(document).ready(function () 
{
$('#' + clientID).on('loaded', viewer_loaded);
});
     

To access the WebViewer view model

The HTML Web Viewer is created using the MVVM pattern that provides a view model which does not depend on the UI. The code can access the Viewer's view model and bind the custom UI to it by using well-documented properties and methods. For MVVM support, the code can use knockout.js which is the standard MVVM library for JavaScript. Knockout.js provides declarative bindings, observable objects and collections in HTML markup. See Using Javascript with the HTML Viewerfor more information.

Follow the steps below to access the ViewModel.

  1. In the Source view of the Default.aspx file, add a <script> tag.
    Add a script tag like the following before the body tag
    Copy Code

    <script language="javascript" type="text/javascript">

    </script>
  2. Add the following Javascript code for document's Onload event handler and WebViewer's Loaded event handler that gets fired when the UI is rendered on the Html Page:
    Paste the code into .aspx source
    Copy Code 
    <script language="javascript" type="text/javascript"> 
    function viewer_loaded()                
    {
    };
    function document_onload() 
    {
    };
    </script>
    ...
    <body onload="return document_onload()">
  3. Add the following Javascript code inside the viewer_loaded event handler to access WebViewer's view model:
    Paste the code into .aspx source
    Copy Code 
    var viewModel = GetViewModel('WebViewer1');
  4. Add the following Javascript code inside the document_onload event handler to bind WebViewer's Loaded event to client side viewer_loaded event:
    Paste the code into .aspx source
    Copy Code 
    $('#WebViewer1').bind('loaded', viewer_loaded);

To remove a button from the WebViewer toolbar

In the Source view of the Default.aspx file, add the following Javascript code inside the viewer_loaded event handler to access the WebViewer toolbar and remove the Next Page button from the toolbar:

Paste the code into .aspx source
Copy Code 
var toolbar = $('#WebViewer1').find('.arvToolBar');
toolbar.find('.btnNext').remove();

Note: In order to access the child elements of the WebViewer toolbar you need their css class names. Following is a list for reference:

Toolbar Child Elements

Toggle Sidebar button: btnToggleSidebar
Find button: btnFind
First page button: btnFirst
Previous page button: btnPrev
Page label: toolbarLabel
Page number input box: toolbarInput
Next page button: btnNext
Last page button: btnLast
Back to parent report button: btnBack

To add a function for exporting to PDF

The steps below illustrate how to build a custom UI.

  1. In the Source view of the Default.aspx file, add following Javascript code inside <script> tag to create a function. This function accesses the view model and exports the report in PDF format :
    Paste the code into .aspx source
    Copy Code 
    function exportPDF() 
    {

        var viewModel = GetViewModel('WebViewer1');

        if (viewModel.PageLoaded()) 
        {
            viewModel.Export(ExportType.Pdf, function (uri) 
            {
                window.location = uri;
            }, true);
        }
    }
  2. In the Source view of the Default.aspx file, add the following Javascript code inside <form> tag to add a button on a custom toolbar. This button is enabled once the report is loaded and calls the exportPDF() function at run time:
    Paste the code into .aspx source
    Copy Code

    <div id="customToolbar" style = "display:inline">
    <button data-bind='enable: PageLoaded, click: exportPDF' style=" width: 105px;
    font-size: medium; height: 22px;">Export</button>
    </div>
  3. In the Source view of the Default.aspx file, add the following Javascript code inside the viewer_loaded event handler to attach the custom toolbar with the built-in toolbar:
    Paste the code into .aspx source
    Copy Code

    $('#customToolbar').appendTo(toolbar);

To bind the custom UI to the WebViewer view model and run the application

  1. Add the following Javascript code inside the viewer_loaded event handler to bind the custom UI to WebViewer view model:
    Paste the code into .aspx source
    Copy Code 
    ko.applyBindings(viewModel, document.getElementById("customToolbar"));
  2. Press F5 to run the application.
Note: Replace 'WebViewer1' in the code snippets above, with the actual ID of the WebViewer control in your application.
See Also
Walkthroughs

Getting Started

Using the HTML Viewer
Using Javascript with the HTML Viewer