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:

• Modifying viewer.js
• Creating a Custom Tab

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.

Adding the Button HTML

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

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:

<div class="pcc-pull-right">
    <button class="myCustomApprovedButton">Approve</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.

Adding the Custom JavaScript

Associating logic to the buttons is handled in the viewer.js file.

First, find the button in the DOM. Toward the top of the file, there is a property on the Viewer, this.viewerNodes, which holds all of the Viewer DOM elements. Add the button to the end of the list:

...
    $searchBeginsWith: viewer.$dom.find("[data-pcc-search=beginsWith]"),
    $searchEndsWith: viewer.$dom.find("[data-pcc-search=endsWith]"),
    $searchWildcard: viewer.$dom.find("[data-pcc-search=wildcard]"),
    $customApproved: viewer.$dom.find(".myCustomApprovedButton")
};

Second, add logic to the button’s click event. A few lines down from this section is the function bindMarkup, where logic is added to the DOM nodes. To keep with convention, go all the way to the bottom of this function, and add the click handler there:

viewer.viewerNodes.$customApproved.on("click", function (ev) {
    // get the first page attributes
    viewer.viewerControl.requestPageAttributes(1).then(
        function success(attributes) {
            // let's add a stamp now
            var mark = viewer.viewerControl.addMark(1, "StampRedaction");
            // set the stamp text
            mark.setLabel("Approved");
            // set the stamp location
            mark.setRectangle({
                width: 180,
                height: 50,
                x: attributes.width - 200,
                y: 20
            });
        },
        function failed(error) {
            // :( tell the user there was an error
            alert(error);
        });
});

Styling the Button

The default Viewer SVG icons are in the /viewer-assets/icons/svg folder of each sample. The viewer uses the svg-icons.svg file (in the /viewer-assets/icons folder), which contains the SVG for all of these icons. For this example, let’s assume that you have an icon already created, named custom-check.svg.

You will need to add an SVG symbol to the SVG in the svg-icons.svg file (similar to the other SVG symbols in this file) and specify id="pcc-icon-custom-check" and viewBox="0 0 52 52". Note that the id must begin with "pcc-icon-". Copy your SVG path content to the SVG symbol element you added.

Then simply update your viewer HTML template to use this new icon by adding the pcc-icon and pcc-icon-custom-check class to your button:

<button class="myCustomApprovedButton pcc-icon pcc-icon-custom-check"></button>

You have completed adding a custom button.