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! :)
index.html
Copy to CodeMine
loading...
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <title>ActiveReportsJS sample</title> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <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" /> <script src="/activereportsjs/demos/arjs/dist/ar-js-core.js"></script> <script src="/activereportsjs/demos/arjs/dist/ar-js-viewer.js"></script> <script src="/activereportsjs/demos/arjs/dist/ar-js-pdf.js"></script> <script src="/activereportsjs/demos/arjs/dist/ar-js-tabular-data.js"></script> <script src="/activereportsjs/demos/arjs/dist/ar-js-html.js"></script> <script src="$DEMOROOT$/lib/purejs/license.js"></script> <link id="ar-js-ui-style" rel="stylesheet" type="text/css" href="/activereportsjs/demos/arjs/styles/ar-js-ui.css" /> <link id="ar-js-viewer-style" rel="stylesheet" type="text/css" href="/activereportsjs/demos/arjs/styles/ar-js-viewer.css" /> <style> #viewer-host { margin: 0 auto; width: 100%; height: 600px; } </style> </head> <body> <div id="viewer-host"></div> </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> <script> MESCIUS.ActiveReportsJS.Core.FontStore.registerFonts( "/activereportsjs/demos/resource/fontsConfig.json" ) const viewer = new MESCIUS.ActiveReportsJS.ReportViewer.Viewer("#viewer-host"); viewer.theme="ActiveReports"; var aboutButton = { key: "$about", iconCssClass: "mdi mdi-help-circle", text: "About", enabled: true, action: function (item) { $('#dlgAbout').modal('show'); }, }; viewer.toolbar.addItem(aboutButton); viewer.toolbar.updateLayout({ default: ["$zoom", "$split", "$fullscreen", "$split", "$print", "$split", "$about"], fullscreen: ["$fullscreen", "$split", "$print", "$split", "$about"], mobile: ["$navigation", "$split", "$about"], }); viewer.open('/activereportsjs/demos/resource/reports/Frontstore.rdlx-json') </script> <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>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <title>ActiveReportsJS sample</title> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <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" /> <script src="/activereportsjs/demos/arjs/dist/ar-js-core.js"></script> <script src="/activereportsjs/demos/arjs/dist/ar-js-viewer.js"></script> <script src="/activereportsjs/demos/arjs/dist/ar-js-pdf.js"></script> <script src="/activereportsjs/demos/arjs/dist/ar-js-tabular-data.js"></script> <script src="/activereportsjs/demos/arjs/dist/ar-js-html.js"></script> <script src="$DEMOROOT$/lib/purejs/license.js"></script> <link id="ar-js-ui-style" rel="stylesheet" type="text/css" href="/activereportsjs/demos/arjs/styles/ar-js-ui.css" /> <link id="ar-js-viewer-style" rel="stylesheet" type="text/css" href="/activereportsjs/demos/arjs/styles/ar-js-viewer.css" /> <style> #viewer-host { margin: 0 auto; width: 100%; height: 600px; } </style> </head> <body> <div id="viewer-host"></div> </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> <script> MESCIUS.ActiveReportsJS.Core.FontStore.registerFonts( "/activereportsjs/demos/resource/fontsConfig.json" ) const viewer = new MESCIUS.ActiveReportsJS.ReportViewer.Viewer("#viewer-host"); viewer.theme="ActiveReports"; var aboutButton = { key: "$about", iconCssClass: "mdi mdi-help-circle", text: "About", enabled: true, action: function (item) { $('#dlgAbout').modal('show'); }, }; viewer.toolbar.addItem(aboutButton); viewer.toolbar.updateLayout({ default: ["$zoom", "$split", "$fullscreen", "$split", "$print", "$split", "$about"], fullscreen: ["$fullscreen", "$split", "$print", "$split", "$about"], mobile: ["$navigation", "$split", "$about"], }); viewer.open('/activereportsjs/demos/resource/reports/Frontstore.rdlx-json') </script> <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>