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.
index.html
Copy to CodeMine
<!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">×</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>Feedback
Submit and view feedback for