The Js Viewer API lets developers completely overwrite the toolbar's default user interface and the viewer component's sidebar.
Js Viewer has three built-in layouts for the toolbar:
desktop - the default layout
full-screen - displayed when the full-screen mode of the Viewer is on
mobile - displayed on narrow screens
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 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.
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");
}
}
|
|
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");
}
|
|
