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.

app.jsx
index.html
Copy to CodeMine
import React, { Fragment } from "react"; import ReactDOM from "react-dom"; import { Viewer } from "@mescius/activereportsjs-react"; import "@mescius/activereportsjs/pdfexport"; import "@mescius/activereportsjs/htmlexport"; import "@mescius/activereportsjs/tabulardataexport"; import { FontStore } from "@mescius/activereportsjs/core"; function App() { const viewerRef = React.useRef(null); React.useEffect(() => { if (!viewerRef.current) return; var aboutButton = { key: "$about", iconCssClass: "mdi mdi-help-circle", text: "About", enabled: true, action: function (item) { $("#dlgAbout").modal("show"); }, }; viewerRef.current.Viewer.toolbar.addItem(aboutButton); viewerRef.current.Viewer.toolbar.updateLayout({ default: [ "$zoom", "$split", "$fullscreen", "$split", "$print", "$split", "$about", ], fullscreen: ["$fullscreen", "$split", "$print", "$split", "$about"], mobile: ["$navigation", "$split", "$about"], }); }, []); return ( <Fragment> <div id="viewer-host"> <Viewer theme="ActiveReports" ref={viewerRef} report={{ Uri: "/activereportsjs/demos/resource/reports/Frontstore.rdlx-json", }} /> </div> <div class="modal fade" id="dlgAbout" tabindex="-1" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel"> ActiveReportsJS Sample </h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close" > <span aria-hidden="true">&times;</span> </button> </div> <div class="modal-body"> This sample shows how to customize the ActiveReportsJS Viewer component's toolbar. </div> <div class="modal-footer"> <button type="button" class="btn btn-outline-secondary" data-dismiss="modal" > Close </button> </div> </div> </div> </div> </Fragment> ); } FontStore.registerFonts("/activereportsjs/demos/resource/fontsConfig.json"); ReactDOM.render(<App />, document.getElementById("root"));
import React, { Fragment } from "react"; import ReactDOM from "react-dom"; import { Viewer } from "@mescius/activereportsjs-react"; import "@mescius/activereportsjs/pdfexport"; import "@mescius/activereportsjs/htmlexport"; import "@mescius/activereportsjs/tabulardataexport"; import { FontStore } from "@mescius/activereportsjs/core"; function App() { const viewerRef = React.useRef(null); React.useEffect(() => { if (!viewerRef.current) return; var aboutButton = { key: "$about", iconCssClass: "mdi mdi-help-circle", text: "About", enabled: true, action: function (item) { $("#dlgAbout").modal("show"); }, }; viewerRef.current.Viewer.toolbar.addItem(aboutButton); viewerRef.current.Viewer.toolbar.updateLayout({ default: [ "$zoom", "$split", "$fullscreen", "$split", "$print", "$split", "$about", ], fullscreen: ["$fullscreen", "$split", "$print", "$split", "$about"], mobile: ["$navigation", "$split", "$about"], }); }, []); return ( <Fragment> <div id="viewer-host"> <Viewer theme="ActiveReports" ref={viewerRef} report={{ Uri: "/activereportsjs/demos/resource/reports/Frontstore.rdlx-json", }} /> </div> <div class="modal fade" id="dlgAbout" tabindex="-1" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel"> ActiveReportsJS Sample </h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close" > <span aria-hidden="true">&times;</span> </button> </div> <div class="modal-body"> This sample shows how to customize the ActiveReportsJS Viewer component's toolbar. </div> <div class="modal-footer"> <button type="button" class="btn btn-outline-secondary" data-dismiss="modal" > Close </button> </div> </div> </div> </div> </Fragment> ); } FontStore.registerFonts("/activereportsjs/demos/resource/fontsConfig.json"); ReactDOM.render(<App />, document.getElementById("root"));
<!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" /> <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" href="index.css" /> <!-- SystemJS --> <script src="./vendor/system.src.js"></script> <script src="systemjs.config.js"></script> <script> System.import("./src/app"); </script> </head> <body> <div id="root"></div> <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>
(function (global) { System.config({ transpiler: "plugin-babel", babelOptions: { es2015: true, react: true, }, meta: { "*.css": { loader: "css" }, }, paths: { // paths serve as alias "npm:": "node_modules/", }, // map tells the System loader where to look for things map: { css: "npm:systemjs-plugin-css/css.js", react: "npm:react/umd/react.production.min.js", "react-dom": "npm:react-dom/umd/react-dom.production.min.js", "@mescius/activereportsjs/pdfexport": "npm:@mescius/activereportsjs/dist/ar-js-pdf.js", "@mescius/activereportsjs/tabulardataexport": "npm:@mescius/activereportsjs/dist/ar-js-tabular-data.js", "@mescius/activereportsjs/htmlexport": "npm:@mescius/activereportsjs/dist/ar-js-html.js", "@mescius/activereportsjs/xlsxexport": "npm:@mescius/activereportsjs/dist/ar-js-xlsx.js", "@mescius/activereportsjs-react": "npm:@mescius/activereportsjs-react/lib/index.js", "@mescius/activereportsjs/reportviewer": "npm:@mescius/activereportsjs/dist/ar-js-viewer.js", "@mescius/activereportsjs/viewer": "npm:@mescius/activereportsjs/dist/ar-js-viewer.js", "@mescius/activereportsjs/reportdesigner": "npm:@mescius/activereportsjs/dist/ar-js-designer.js", "@mescius/activereportsjs/core": "npm:@mescius/activereportsjs/dist/ar-js-core.js", "@mescius/activereportsjs/styles": "npm:@mescius/activereportsjs/styles", "@mescius/activereportsjs-i18n": "npm:@mescius/activereportsjs-i18n/dist/ar-js-locales.js", "@mescius/ar-js-pagereport": "npm:@mescius/activereportsjs/dist/ar-js-core.js", "plugin-babel": "npm:systemjs-plugin-babel/plugin-babel.js", "systemjs-babel-build": "npm:systemjs-plugin-babel/systemjs-babel-browser.js", }, // packages tells the System loader how to load when no filename and/or no extension packages: { src: { defaultExtension: "jsx", }, node_modules: { defaultExtension: "js", }, }, }); })(this);