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.
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">×</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"));
Submit and view feedback for