PrizmDoc v12.4 - Updated
Add a Custom Button
Developer Guide > PrizmDoc Viewer > Customization Examples > 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.

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
Copy Code
<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>

You've added the button in bold to the rest of the list, to 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
Copy Code
...
    $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 bindMarkp, 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
Copy Code
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

First, add a new custom icon to the CSS vocabulary. To support all browsers and screen types, you will need two icons: a 26x26 pixel icon, and a 40x40 pixel icon. For this example, let’s assume that you have icons already created, named check.png and check@2x.png, respectively and the icons are available in the images folder.

The Viewer uses an icon sprite in order to optimize icon image loading. In this example, you will not be using the sprite, and instead include standalone images.

Toward the top of the viewer.css file, there are the icon definitions, in the form of .pccv .pcc-icon-.... You will add the new icon at the end of this section:

Example
Copy Code
.pccv .custom-icon-check { background-image: url(../img/check.png); }

Note that to support IPS screens, you will need to add a second icon inside the @media (min-width:0) media query. This media query targets all modern browsers capable of scaling icons, to ensure that any high density screen attached to a browser (that can scale icons) will get high resolution images. Here, you will add out 2x icon image:

Example
Copy Code
.pccv .custom-icon-check {
    background-image: url(../img/check@2x.png);
    background-size: 26px;
    background-position: center;
}

Finally, update your HTML markup to use this new icon instead of text:

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

You have completed adding a custom button.