ActiveReports 15 .NET Edition
ActiveReports 15 User Guide / Preview Reports / JavaScript / UI Customization
In This Topic
    UI Customization
    In This Topic

    The JSViewer API lets developers completely overwrite the toolbar's default user interface and the viewer component's sidebar.

    Setting the toolbar layout

    JSViewer has three built-in layouts for the toolbar:

    By default, each of these layouts contains the following items.

    Internal ID Description
    $navigation Go to the 1st page, go to the previous page, page number/page total, go to the next page, go to the last page buttons
    $split Separator
    $refresh Refresh report button
    $history Go to the parent report, go back in history, go forward in history buttons
    $zoom Zoom mode drop-down
    $fullscreen Toggle full-screen mode button
    $print Print button
    $singlepagemode Switch to the single page mode button
    $continuouspagemode Switch to the continuous page mode button
    $galleymode Switch to the galley page mode button

    You can use the layout method to display only specified items in the toolbar for each layout mode. Here is the example of using this approach in an Angular application for showing 'Zoom', 'Toggle Full Screen', and 'Print' items for the regular layout - 'Toggle Full Screen' and 'Print' items for the full-screen layout, and displaying 'Navigation' item only for the mobile layout.

    app.component.ts
    Copy Code
    import { Component, AfterViewInit } from "@angular/core";
    declare var GrapeCity: any;
    @Component({
      selector: "app-root",
      templateUrl: "./app.component.html",
    })
    export class AppComponent implements AfterViewInit {
      title = "app";
      viewer: any;
      ngAfterViewInit() {
        this.viewer = new GrapeCity.ActiveReports.JSViewer.create({
          element: '#viewer-host'
        });
        this.viewer.toolbar.desktop.layout(["$zoom", "$split", "$fullscreen", "$print"]);
        this.viewer.toolbar.fullscreen.layout(["$fullscreen", "$print"]);
        this.viewer.toolbar.mobile.layout(["$navigation"]);
        this.viewer.openReport("DemoReport.rdlx");
      }
    }
    

    Similarly, you can customize the layout of the viewer for React, Vue, and Pure JavaScript applications.

    Adding and removing a toolbar item

    The addItem and removeItem methods of all three layout modes of the viewer.toolbar property can be used to add and remove custom elements in the toolbar. Below is an example that inserts the 'About' button in the toolbar for Angular application. You can use the same approach in React, Vue, and pure JavaScript applications.

    app.component.ts
    Copy Code
    import { Component, AfterViewInit } from "@angular/core";
    declare var GrapeCity: any;
    @Component({
      selector: "app-root",
      templateUrl: "./app.component.html",
    })
    export class AppComponent implements AfterViewInit {
      title = "app";
      viewer: any;
      ngAfterViewInit() {
        this.viewer = new GrapeCity.ActiveReports.JSViewer.create({
          element: '#viewer-host'
        });
        var self = this;   
        var options = { filename: "DemoReport" };
        var pdfExportButton = {
          key: '$pdfExportButtonKey',
          iconCssClass: 'mdi mdi-file-pdf',
          text: "Pdf",
          enabled: true,
          action: function (item) {
            console.log('Export to PDF function works here');
            self.viewer.export('Pdf', null, true, options);
          },
          onUpdate: function (arg, item) {
            console.log('Something in viewer was updated, check/update button state here');
          }
        };
        this.viewer.toolbar.desktop.addItem(pdfExportButton);
        this.viewer.openReport("DemoReport.rdlx");
      }
    }
    

    Replacing toolbar and sidebar

    Finally, the default toolbar and sidebar components of the JSViewer can be hidden using the toolbar.toggle and sidebar.toggle methods. This approach can help if you decide to use custom UI to invoke viewer functions by using the public API. Here is an example of customizing JSViewer toolbar and sidebar in an Angular application.

    app.component.ts
    Copy Code
    import { Component, AfterViewInit } from "@angular/core";
    declare var GrapeCity: any;
    @Component({
      selector: "app-root",
      templateUrl: "./app.component.html",
    })
    export class AppComponent implements AfterViewInit {
      title = "app";
      viewer: any;
      ngAfterViewInit() {
        this.viewer = new GrapeCity.ActiveReports.JSViewer.create({
          element: '#viewer-host'
        });
        this.viewer.toolbar.toggle(false);
        this.viewer.sidebar.toggle(false);
        this.viewer.openReport("DemoReport.rdlx");
      }
    }