Introduction

Adding a custom button is as simple as adding some markup and a little bit of JavaScript anywhere on the web page. In this example below, we will look at adding a button to the Viewer in a way that matches the design language and code style of the existing Viewer.

If you are not yet familiar with the code structure, refer to these topics:

In this topic, we will add a button to the default View tab which will add an Approved stamp annotation to the top right of the first page in the document.

1 - Clone the Viewer

Before you get started, you'll need to get the PrizmDoc Viewer Client Assets Build, which contains the source code and build script for the PrizmDoc Viewer HTML, CSS, and JavaScript client assets.

Navigate to src/templates and locate viewerTemplate.html.

2 - Add the Button HTML

The bulk of the Viewer markup is inside the file viewerTemplate.html; this includes all the toolbars and vertical slide-outs.

NOTE: If you would like to add buttons to the context menu, the annotations saving dialog, or the print dialog, these are found in the templates folder.

The View tab appears at the top of the document and is identified by the data attribute data-pcc-nav-tab="view". Inside the .pcc-tab-pane, the actual menu bar, there are two lists of buttons. One is the normal list starting from the left, .pcc-left, and the second is the buttons floating on the right side, .pcc-pull-right.

To add the button on the right side:

Example

<div class="pcc-pull-right">
    <button class="myCustomApprovedButton pcc-icon pcc-icon-custom-check"></button>
    <button class="pcc-icon pcc-icon-print" data-pcc-print="launch"></button>
    <button data-pcc-download class="pcc-icon pcc-icon-download"></button>
</div>

Note that the actual list of other buttons in the .pcc-pull-right section may be different from the example. However, adding the example code for the button with the class "myCustomApprovedButton" to the top of the list will make it appear first in the right-hand side buttons.

3 - Style the Button

You will need to add your SVG file to the src/icons/svg folder. In your SVG file you will need to specify an id that begins with "pcc-icon-" and a viewBox of "0 0 52 52" as shown below.

Example

<svg id="pcc-icon-custom-check" viewBox="0 0 52 52" xmlns="http://www.w3.org/2000/svg">
    <path d="M 25.448 8.264 C 15.173 8.264 6.766 16.133 6.766 25.749 C 6.766 35.366 15.173 43.234 25.448 43.234 C 35.724 43.234 44.131 35.366 44.131 25.749 C 44.131 16.133 35.724 8.264 25.448 8.264 M 25.448 39.737 C 17.209 39.737 10.503 33.459 10.503 25.749 C 10.503 18.038 17.209 11.761 25.448 11.761 C 33.687 11.761 40.395 18.038 40.395 25.749 C 40.395 33.459 33.687 39.737 25.448 39.737 M 34.023 18.021 L 21.713 29.543 L 16.873 25.032 L 14.239 27.497 L 21.713 34.491 L 36.658 20.504 L 34.023 18.021 Z">
    </path>
</svg>

4 - Build the Viewer Assets

You will then need to build the Viewer assets by following the instructions in the Viewer README.

5 - Add the Custom JavaScript

Now associate the Viewer Control actions to the button that has been added. In this example, the variable "viewer" is assigned when the Viewer is instantiated:

var viewer = $('#viewerContainer').pccViewer(options);

This variable will provide access to Viewer Control. We'll also be assigning a variable to our button element and making a function declaration for the action to be performed when the button is clicked.

Once this is complete, assign an event listener to the button after the ViewerReady event fires:

var viewerControl = viewer.viewerControl;
var customButtonEl = document.getElementsByClassName('pcc-icon-custom-check')[0];
function applyApprovedStamp() {
    viewerControl.requestPageAttributes(1).then(
        function success(attributes) {
            var mark = viewerControl.addMark(1, 'StampRedaction');
            mark.setLabel('Approved');
            mark.setRectangle({
                width: 180,
                height: 50,
                x: attributes.width - 200,
                y: 20
            });
        },
        function failed(error) {
            alert(error);
        }
    );
}

viewerControl.on(PCCViewer.EventType.ViewerReady, function (ev) {
    customButtonEl.addEventListener('click', applyApprovedStamp);
});