Customization

General

The ActiveReportsJS API allows you to fully customize the default user interface of the Report Viewer’s toolbar and sidebar. This page describes several approaches for tailoring these components to fit your specific application requirements.

Customizing Toolbar

The ActiveReportsJS Report Viewer provides three built-in toolbar layouts, which automatically switch based on the Viewer state or device type:

Built-in Toolbar Items

The toolbar consists of primary items and groups. You can use the getDefaultToolbarItems method to retrieve the collection of items.

Granular Customization (Sub-items)

To provide more control, you can access and manipulate individual items within the $navigation, $history, and $zoom groups. These sub-items can be used in the updateLayout, updateItem, and removeItem methods just like primary items. The getDefaultToolbarItems method returns the list of sub-items when a group name (e.g., $navigation) is passed as a parameter.

• $navigation sub-items: $navigation-firstPage, $navigation-prevPage, $navigation-pageNumber, $navigation-nextPage, $navigation-lastPage

• $history sub-items: $history-backToParent, $history-goBack, $history-goForward

• $zoom sub-items: $zoom-zoomOut, $zoom-zoomLevel, $zoom-zoomIn

You can use the updateLayout method method to redefine which items are displayed in each layout mode. The following React sample demonstrates how to redefine the toolbar for all three layout modes, including the use of specific navigation sub-items to create a streamlined experience for mobile users:

import { Viewer } from "@mescius/activereportsjs-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-prevPage", "$navigation-pageNumber", "$navigation-nextPage"],
    });
  }, []);
  return (
    <div id="viewer-host">
      <Viewer
        ref={viewerRef}
        report={{ Uri: "/reports/Customers.rdlx-json" }}
      />
    </div>
  );
};

You can explore complete examples for React, Angular, Vue, and pure JavaScript applications in the online demo

Adding, removing, and updating toolbar items

You can use addItem method to add new buttons or drop-downs to the toolbar items collection.

You can remove items using the removeItem method. This method accepts any internal ID, including sub-items (e.g., $navigation-lastPage) and standard items like $refresh or $mousemode.

To modify the behavior or appearance of an existing item, use updateItem. This works for custom items and all built-in items/sub-items.

The example below updates the tooltip for a specific navigation button and the behavior of the Print button:

import { Viewer } from "@mescius/activereportsjs-react";

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

  React.useEffect(() => {
    const viewerInstance = viewerRef.current?.Viewer;
    viewerInstance?.toolbar.updateItem("$navigation-firstPage", { 
      title: "Open Page 1️⃣" 
    });
    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>
  );
};

Configuring the Panels Layout

The PanelsLayout property — available in the React, Angular, and Vue wrappers, as well as in the options object passed to the Report Viewer constructor, controls the position of the Search, Export, Document Map, and Parameters panels.

By default, these panels and their corresponding toolbar buttons appear on the left side of the Viewer interface.To move them to the right side, set the PanelsLayout property to "sidebar".This configuration moves both the panels and their open buttons to the right:

Configuring the Parameters Panel Location

You can control the position of the Parameters Panel using the ParameterPanelLocation property.This property is available in the React, Angular, and Vue wrappers.In a pure JavaScript application, you can set it via the options object passed to the Viewer constructor.

The ParameterPanelLocation property accepts the following values:

• auto – If the report uses a Custom Parameters View, the Parameters Panel appears at the top of the Viewer. Otherwise, it appears on the left side.

• default – The Parameters Panel is displayed on either the left or right side of the Viewer, depending on the PanelsLayout setting described above.

• top – The Parameters Panel is fixed at the top of the Viewer.

• bottom – The Parameters Panel is fixed at the bottom of the Viewer.

Replacing the Toolbar and Sidebar

You can use the toolbarVisible and sidebarVisible properties of the Viewer component to hide the default toolbar and sidebar.These properties are available in the React, Angular, and Vue wrappers.

This approach is useful when you want to replace the built-in Viewer interface with a custom UI that calls Viewer functions through its public API.

Related topics

• Live demo

• User interface

• Angular component

• React component

• Vue component

• Pure JavaScript integration