Add a Custom Button

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.

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.

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

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"\>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:

Example

...
    $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")
};

We have used a variable name starting with a $, the global name of jQuery, to indicate that this is a jQuery-wrapped variable. Any time a variable name starts with a $ in this file, it indicates that the object is able to use the entire jQuery API.

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:

Example

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/src/icons/svg folder of each sample. For this example, let’s assume that you have an icon already created, named custom-check.svg.

You will need to add your SVG file to the /viewer-assets/src/icons/svg folder and specify id="pcc-icon-custom-check" and viewBox="0 0 52 52" in the SVG. 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:

Example

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

You will then need to build the Viewer assets by running "npm install" and "gulp build". Copy the output /dist/viewer-assets/js/viewerCustomizations.js file over the /viewer-assets/js/viewerCustomizations.js file in the sample. For more information on building the Viewer assets, see the README file in the viewer-assets folder.

You have completed adding a custom button.