ActiveReports 18 .NET Edition
Developers / Create Applications / Js Viewer Application / Customize UI
In This Topic
    Customize UI
    In This Topic

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

    Setting the toolbar layout

    Js Viewer 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';
import { createViewer} from '@mescius/activereportsnet-viewer';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent implements AfterViewInit {
  title = "app";
 
  ngAfterViewInit() {
    this.viewer = createViewer({
      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 ASP.NET MVC applications.

    app.component.ts
    Copy Code 
    import { Component, AfterViewInit } from '@angular/core';
 import { createViewer} from '@mescius/activereportsnet-viewer';
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html'
  })
  export class AppComponent implements AfterViewInit {
    title = "app";
  ngAfterViewInit() {
      this.viewer = createViewer({
        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 Js Viewer 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 Js Viewer toolbar and sidebar in an Angular application.

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