Customize the Toolbar on PAS HTML5 Markup Viewer

PDF Automation Server comes packaged with a ready to go HTML5 PDF Viewer that uses the REST server to view/modify documents directly in the browser with no plug-ins required. The HTML5 viewer can be added to any page with minimal coding by simply creating an iframe element on the page with the path to the document stored on the server. If you wish to customize the HTML5 PDF Viewer Toolbar follow the instructions below.

First follow the below instructions to setup the HTML5 PDF Markup or Viewer on your server:

  • HTML5 PDF Markup – This viewer allows users to add annotations and save the document directly in the browser.
  • HTML5 PDF Viewer – This is the simple HTML page that is for viewing PDFs only.

Once setup edit the HTML viewer files found in “html\viewer” directory:

  • Windows: will be located in the QoppaPAS folder in the ProgramData directory – C:\ProgramData\QoppaPAS\html\viewer
  • Linux/Unix/Mac: will be located in the PAS installation directory – {installation directory}/html/viewer

Using any HTML or Text editor (such as Notepad++) edit the HTML file for the product you wish to use:

  • pdfnotes.html – contains annotation, text markup, & redaction functionality
    • mpdfnotes.html – mobile version of notes viewer
  • pdfviewer.html – PDF viewer only
    • mpdfviewer.html – mobile version of viewer only

All of the buttons are in the first part of the <body> in the <div class=”toolbar”> element. You can follow the instructions below to add or remove buttons.

REMOVE BUTTONS

To remove or hide a button just delete or comment out any of the buttons or groups you don’t want. For example, to remove the redaction button from the toolbar remove the following lines of code:

<span class="buttonGroup">
     <button id="btnRedact" class="viewerbtn dropdown-toggle drawingbtn" title="Mark for Redaction" data-sticky="true"><img src="https://www.qoppa.com/files/pdfautomation/guide/assets/images/icons/redaction.png" /></button>
</span>

ADD NEW BUTTONS

To add new buttons, you can just add new lines to the anywhere in the <div class=”toolbar”> element. For example you can add a new button by inserting the code below next to one of the other buttons on the toolbar. Once you have added the button you will need to attach either JavaScript or a Listener to perform the action you wish the button to do. (see https://www.w3schools.com/jsref/event_onclick.asp for one example of how to do this)

<span class="buttonGroup">
     <button id="myNewButton" class="viewerbtn" title="myToolTip"><img src="imagePathOnServer" /></button>
</span>

TIP: Buttons can also be rearranged or organized differently by just reordering the HTML code.

Once you have completed the changes and save the file to the server they will take affect the next time the HTML5 Markup or Viewer is loaded.