Customizing the webviewer UI

[André Rieussec]

Hi,

I'm trying to change some features of the WebViewer.

First, I'd like to update the menu that shows up when selecting an annotation:

• Hide the Style and Node options
• Add a new custom option

I also would like to completely disable the side panel that shows notes and annotations.

Is there a way to do that?

Thanks

[Matt Parizeau]

This post shows how to hide buttons: https://groups.google.com/d/msg/pdfnet-webviewer/Kb3q04MxyAQ/v-Dm25_rFQAJ

This post shows how to add a custom button: https://groups.google.com/d/msg/pdfnet-webviewer/gIRB708lZ4M/HCO2oVHMCgAJ

For example:

var hiddenFunction = function() { return true; };

$(document).on('viewerLoaded', function() {
  var styleButton = window.AnnotationEdit.buttons[2];
  var noteButton = window.AnnotationEdit.buttons[3];
  styleButton.isHidden = hiddenFunction;
  noteButton.isHidden = hiddenFunction;

  var customButton = $('<button type="button" class="roundedCornerButton">Test Button</button>');
  customButton.on('click', function() {
    console.log('Clicked custom button');
  });

  window.AnnotationEdit.buttons.push({
    element: customButton,
    isHidden: function() {
      return false;
    }
  });
});

To hide the annotation panel you can pass the hideAnnotationPanel: true option to the WebViewer constructor. Here is a list of all the options https://www.pdftron.com/api/web/PDFTron.WebViewer.html#Options__anchor

Matt Parizeau

Software Developer

PDFTron Systems Inc.