Customization

ActiveReportsJS API lets developers completely overwrite the toolbar's default user interface and the Viewer component's sidebar. This page describes several recipes that you can use to fulfill the specific application requirements.

Setting the toolbar layout

ActiveReportJS Viewer has three built-in layouts for the toolbar:

• regular - the default layout
• full-screen - displayed when the full-screen mode of the Viewer is on
• mobile - displayed on narrow screens

By default, each of these layouts contains the following items.

You can use updateLayout method of the Viewer's Toolbar property to display only specified items in the toolbar for each layout mode. Here is the example of using this approach in a React application for showing "Zoom" "Toggle Full Screen" and "Print" items for the regular layout, "Toggle Full Screen" and "Print" items for the full-screen layout, and displaying "Navigation" item only for the mobile layout.

import { Viewer } from "@grapecity/activereports-react";

const ViewerApp: React.FC = () => {
  const viewerRef = React.useRef < Viewer > null;

  React.useEffect(() => {
    const viewerInstance = viewerRef.current?.Viewer;
    viewerInstance?.toolbar.updateLayout({
      default: ["$zoom", "$split", "$fullscreen", "$split", "$print"],
      fullscreen: ["$fullscreen", "$split", "$print"],
      mobile: ["$navigation"],
    });
  }, []);
  return (
    <div id="viewer-host">
      <Viewer
        ref={viewerRef}
        report={{ Uri: "/reports/Customers.rdlx-json" }}
      />
    </div>
  );
};

You can find the complete example of this approach for React, Angular, Vue, and pure JavaScript applications in this online demo

Updating the default behavior of the toolbar item

updateItem method of the toolbar property of the Viewer component - it is accessible from React, Angular, and Vue wrappers as well - can be used to override the default behavior of a toolbar item. For example, if you would like to add analytics in the application and send the event to an analytics server when a user prints a report, you can use the following code. This example is for a React application, but you can use the same technique for Angular, Vue, and pure JavaScript applications.

import { Viewer } from "@grapecity/activereports-react";

const ViewerApp: React.FC = () => {
  const viewerRef = React.useRef < Viewer > null;

  React.useEffect(() => {
    const viewerInstance = viewerRef.current?.Viewer;
    viewerInstance?.toolbar.updateItem("$print", {
      action: function () {
        ga("send", {
          hitType: "event",
          eventCategory: "action",
          eventAction: "print",
          eventLabel: "report",
        });
        viewerInstance.print();
      },
    });
  }, []);
  return (
    <div id="viewer-host">
      <Viewer
        ref={viewerRef}
        report={{ Uri: "/reports/Customers.rdlx-json" }}
      />
    </div>
  );
};

Adding and removing a toolbar item

addItem and removeItem methods of the toolbar property of the Viewer component - it is accessible from React, Angular, and Vue wrappers as well - can be used to add and remove custom elements in the toolbar. You can find the example that inserts the "About" button in the toolbar for React, Angular, Vue, and pure JavaScript applications in this online demo

Replacing toolbar and sidebar

Finally, toolbarVisible and sidebarVisible properties of Viewer component - these properties are available for React, Angular, and Vue wrappers as well - can be used to hide the default toolbar and sidebar components of the report viewer. This approach can help if you decide to use the custom UI to invoke viewer functions by using the public API.

Related topics

• Live demo
• User interface
• Angular component
• React component
• Vue component
• Pure JavaScript integration