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

Configuring the Panels Layout

The PanelsLayout property of the React, Angular, and Vue wrappers and the options object that is passed into the Viewer constructor determines the location of the Search, Export, Document Map and Parameters panels. By default these panels alongside their open buttons locate on the left side of the viewer interface. You can set the PanelsLayout property to sidebar to change the location of the panels to the right side and the open buttons on the toolbar:

Configuring the Parameters Panel Location

The location of the Parameters Panel can be adjusted using the ParameterPanelLocation property available in the React, Angular, and Vue wrappers. In a pure JavaScript application, you can set this property via the options object that is passed into the Viewer constructor. This property can be set to one of the following values:

• auto - If the report utilizes the Custom Parameters View, the Parameters Panel is positioned at the top of the viewer component. If not, it's placed on the left side of the viewer.

• default - The Parameters Panel is located on the left or on the right side of the viewer, depending on the PanelsLocation value described above.

• top - The Parameters Panel is located at the top of the viewer.

• bottom - The Parameters Panel is positioned at the bottom of the viewer.

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