Toolbars

In the Review Interface, the toolbar contains the buttons and icons that users click to perform actions in the document viewer. For example, the Review Interface contains a toolbar with page navigation, redaction, and zoom buttons.

The viewer configuration determines whether the Review Interface has multiple or no toolbars displayed. You can customize this configuration using the Review API or extension scripts.

This page contains the following information:

• Create toolbar controls using the Review API
• Create toolbar controls in extension scripts

Create toolbar controls using the Review API

You can use the Review API (IReviewInterfaceApi) to create toolbar controls with the IToolbarService. You can access this service via IReviewInterfaceApi.toolbar.

To create a toolbar control, use the IToolbarService.createToolbarControl function. It takes an argument of type IToolbarControlConfig.

The following code sample illustrates how to perform these tasks:

• Retrieve the viewer toolbar object by calling IToolbarService.getToolbarById.

• Create a toolbar control by calling IToolbarService.createToolbarControl.

• Add the control to the viewer toolbar by calling IToolbar.addControl and pass the new button control object.

reviewapi.on("apiready", function () {
  // Get all the loaded toolbars in the Review Interface.
  var allToolbars = reviewapi.toolbar.allToolbars;

  // Get the required toolbar by its ID.
  var viewerToolbar = reviewapi.toolbar.getToolbarById("ri-viewer-toolbar");

  // Create a toolbar control.
  var buttonControl = reviewapi.toolbar.createToolbarControl({
    type: "button",
    id: "testButton1",
    title: "Test Button",
    class: "testClass",
    onClick: function () {
      alert("Toolbar Button Clicked!");
    },
    imageUrl: "https://wwww.gstatic.com/webp/gallery3/2.png",
  });

  // Add a button control to the view toolbar.
  viewerToolbar.addControl(buttonControl, "left");
});

Create toolbar controls in extension scripts

You can also create toolbar controls as part of a Review Extensions script file. Use the IExtensionConfig.viewerToolbarControls function to add toolbar controls to all viewer types (ViewerType) or to a specific type.

The viewerToolbarControls (IExtensionConfig.viewerToolbarControls) function has access to the following:

• reviewapi (IReviewInterfaceApi) object
• viewerType (ViewerType) object
• viewerToolbar (IToolbar) object

The following code sample illustrates how to create and add toolbar controls to all viewer types and to a specific type in an extension script file.

(function(params) {
    var config = {
        id: "examplecompany.testextension",
        name: "Example Company Test Extension",
        viewerToolbarControls: function (api, viewerType, viewerToolbar) {

            // Toolbar button for all viewers
            var buttonControlConfig = {
                type: "button",
                id: "all-viewer-custom-button",
                title: "All Viewer Custom Button",
                class: "",
                imageUrl: parameters.getResourceFileUrl("review.farm.png"),
                onClick: function () {
                    alert("You clicked the all viewer custom button!");
                },
                permissionCheck: {
                    permissionName: "HasPermission",
                    artifactTypeId: 1000007
                },
            };
            viewerToolbar.createToolbarControl(buttonControlConfig, "center", 10);

            // Viewer specific toolbar buttons
            if (viewerType === "native") {
                var nativeButtonConfig = {
                    type: "button",
                    id: "native-custom-button",
                    title: "Native Custom Button",
                    class: "",
                    imageUrl: parameters.getResourceFileUrl("review.goose.png"),
                    onClick: function () {
                        alert("You clicked the native viewer custom button!");
                    },
                };
                viewerToolbar.createToolbarControl(nativeButtonConfig, "center", 11);
            } else if (viewerType === "image") {
                var imageElement = document.createElement("img");
                imageElement.src = parameters.getResourceFileUrl("review.my-image.png");
                imageElement.id = "image-1";
                imageElement.onClick: function () {
                    alert("You clicked the image viewer custom image");
                };

                var imageButtonConfig = {
                    type: "custom",
                    id: "image-custom-button",
                    title: "Image Custom Button",
                    class: "",
                    innerHTML: imageElement
                };
                viewerToolbar.createToolbarControl(imageButtonConfig, "center", 11);
            }
    };

    return config;
}(params))