Viewer Component - Toolbar Customization

loading...
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"));