Viewer Component - Toolbar Customization

This sample shows how to customize the ActiveReportsJS Viewer component's toolbar. For more details, please visit the Customization page. To view the code, scroll down the page.

The demo is being dynamically compiled to support real-time code editing... For quicker access to features, switch to the "JavaScript" tab for a smoother experience! :)
app.component.ts
app.component.css
app.module.ts
index.html
Copy to CodeMine
loading...
import { Component, ViewChild } from "@angular/core"; declare var $: any; import { ViewerComponent, AR_EXPORTS, PdfExportService, HtmlExportService, TabularDataExportService, } from "@mescius/activereportsjs-angular"; @Component({ selector: "app-root", templateUrl: "src/app.component.html", styleUrls: ["src/app.component.css"], providers: [ { provide: AR_EXPORTS, useClass: PdfExportService, multi: true, }, { provide: AR_EXPORTS, useClass: HtmlExportService, multi: true, }, { provide: AR_EXPORTS, useClass: TabularDataExportService, multi: true, }, ], }) export class AppComponent { @ViewChild(ViewerComponent, { static: false }) reportViewer: ViewerComponent; onViewerInit() { var aboutButton = { key: "$about", iconCssClass: "mdi mdi-help-circle", text: "About", enabled: true, action: function () { $("#dlgAbout").modal("show"); }, }; this.reportViewer.toolbar.addItem(aboutButton); this.reportViewer.toolbar.updateLayout({ default: [ "$zoom", "$split", "$fullscreen", "$split", "$print", "$split", "$about", ], fullscreen: ["$fullscreen", "$split", "$print", "$split", "$about"], mobile: ["$navigation", "$split", "$about"], }); this.reportViewer.open( "/activereportsjs/demos/resource/reports/Frontstore.rdlx-json" ); } }
import { Component, ViewChild } from "@angular/core"; declare var $: any; import { ViewerComponent, AR_EXPORTS, PdfExportService, HtmlExportService, TabularDataExportService, } from "@mescius/activereportsjs-angular"; @Component({ selector: "app-root", templateUrl: "src/app.component.html", styleUrls: ["src/app.component.css"], providers: [ { provide: AR_EXPORTS, useClass: PdfExportService, multi: true, }, { provide: AR_EXPORTS, useClass: HtmlExportService, multi: true, }, { provide: AR_EXPORTS, useClass: TabularDataExportService, multi: true, }, ], }) export class AppComponent { @ViewChild(ViewerComponent, { static: false }) reportViewer: ViewerComponent; onViewerInit() { var aboutButton = { key: "$about", iconCssClass: "mdi mdi-help-circle", text: "About", enabled: true, action: function () { $("#dlgAbout").modal("show"); }, }; this.reportViewer.toolbar.addItem(aboutButton); this.reportViewer.toolbar.updateLayout({ default: [ "$zoom", "$split", "$fullscreen", "$split", "$print", "$split", "$about", ], fullscreen: ["$fullscreen", "$split", "$print", "$split", "$about"], mobile: ["$navigation", "$split", "$about"], }); this.reportViewer.open( "/activereportsjs/demos/resource/reports/Frontstore.rdlx-json" ); } }
#viewer-host { width: 100%; height: 600px; }
import { BrowserModule } from "@angular/platform-browser"; import { NgModule } from "@angular/core"; import { ReactiveFormsModule } from "@angular/forms"; import { AppComponent } from "./app.component"; import { ActiveReportsModule } from "@mescius/activereportsjs-angular"; @NgModule({ declarations: [AppComponent], imports: [BrowserModule, ReactiveFormsModule, ActiveReportsModule], providers: [], bootstrap: [AppComponent], }) export class AppModule {}
(function (global) { SystemJS.config({ transpiler: './plugin-typescript.js', typescriptOptions: { "target": "ES2022", "module": "system", "emitDecoratorMetadata": true, "experimentalDecorators": true, }, baseURL: './node_modules/', meta: { 'typescript': { "exports": "ts" }, '*.css': { loader: 'systemjs-plugin-css' } }, packageConfigPaths: [ '/node_modules/*/package.json', "/node_modules/@angular/*/package.json", "/node_modules/@mescius/*/package.json" ], map: { 'typescript': 'typescript/lib/typescript.js', "rxjs": "rxjs/dist/bundles/rxjs.umd.js", "rxjs/operators": "rxjs/dist/bundles/rxjs.umd.js", "@angular/core/primitives/signals": "@angular/core/fesm2022/primitives/signals.mjs", "@angular/common/http": "@angular/common/fesm2022/http.mjs", "@mescius/activereportsjs/core": "@mescius/activereportsjs/dist/ar-js-core.js", "@mescius/activereportsjs": "./activereports.js", "@mescius/activereportsjs/reportdesigner":"./activereports.js", "@mescius/ar-js-pagereport": "@mescius/activereportsjs/dist/ar-js-core.js", "@mescius/activereportsjs-i18n": "@mescius/activereportsjs-i18n/dist/ar-js-locales.js", }, // packages tells the System loader how to load when no filename and/or no extension packages: { "./src": { defaultExtension: 'ts' }, "node_modules": { defaultExtension: 'js' }, "@angular/core": { defaultExtension: 'mjs', "main": "fesm2022/core.mjs" }, "@angular/platform-browser": { defaultExtension: 'mjs', "main": "fesm2022/platform-browser.mjs" }, "@angular/common": { defaultExtension: 'mjs', "main": "fesm2022/common.mjs" }, "@angular/compiler": { defaultExtension: 'mjs', "main": "fesm2022/compiler.mjs" }, "@angular/forms": { defaultExtension: 'mjs', "main": "fesm2022/forms.mjs" }, "@angular/localize": { defaultExtension: 'mjs', "main": "fesm2022/localize.mjs" }, "@angular/platform-browser-dynamic": { defaultExtension: 'mjs', "main": "fesm2022/platform-browser-dynamic.mjs" }, "@mescius/activereportsjs-angular": { defaultExtension: "mjs", main: "fesm2022/grapecity-activereports-angular.mjs", }, } }); })(this);
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <title>ActiveReportsJS Report Viewer Toolbar Customization Sample</title> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <!-- Polyfills --> <script src="node_modules/zone.js/fesm2015/zone.min.js"></script> <!-- SystemJS --> <script src="node_modules/systemjs/dist/system.src.js"></script> <script src="systemjs.config.js"></script> <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap" rel="stylesheet" /> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous" /> <link rel="stylesheet" href="https://cdn.materialdesignicons.com/2.8.94/css/materialdesignicons.min.css" /> <link rel="stylesheet" type="text/css" href="/activereportsjs/demos/arjs/styles/ar-js-ui.css" /> <link rel="stylesheet" type="text/css" href="/activereportsjs/demos/arjs/styles/ar-js-viewer.css" /> <script> System.import("./src/app.main"); </script> </head> <body> <app-root></app-root> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous" ></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous" ></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous" ></script> </body> </html>