Some test text!

Customizing tools

In this document
chevron_rightDisabling/enabling tools
chevron_rightUpdating tool button property
chevron_rightChanging button icon
chevron_rightChanging button group
chevron_rightList of tool names

Customizing tools is little different from customizing header items. In WebViewer UI, they are setup in a special way to be mapped to DocumentViewer's tool modes and grouped into tool group buttons. Thus, WebViewer UI provides specific APIs for customizing tools.

linkDisabling/enabling tools

By default, WebViewer UI provides shortcuts for most of the tools. If you want users not to use certain tools, you should disable both the DOM element and the shortcut. You can do that with a single API, using one of the following:

And you can check if a tool is disabled using this API:

For example,

viewerElement.addEventListener('ready', function() {
  const viewerInstance = viewer.getInstance();
  viewerInstance.disableTools(['AnnotationCreateSticky', 'AnnotationCreateFreeText']); // hides DOM element + disables shortcut
  console.log(viewerInstance.isToolDisabled('AnnotationCreateSticky'));
  viewerInstance.enableTool('AnnotationCreateSticky');
});

linkUpdating tool button property

You can also update tool button properties:

  • buttonImage
  • buttonName
  • buttonGroup
  • tooltip

See updateTool for details.

linkChanging button icon

viewerElement.addEventListener('ready', function() {
  const viewerInstance = viewer.getInstance();
  viewerInstance.updateTool('AnnotationCreateSticky', { buttonImage: 'https://pdftron.com/static/logo.8ee1b446.svg' });
});

linkChanging button group

viewerElement.addEventListener('ready', function() {
  const viewerInstance = viewer.getInstance();
  viewerInstance.updateTool('AnnotationCreateRectangle', { buttonGroup: 'miscTools' });
});

linkList of tool names

  • AnnotationEdit
  • TextSelect
  • Pan
  • AnnotationCreateSticky
  • AnnotationCreateFreeHand
  • AnnotationCreateTextHighlight
  • AnnotationCreateTextUnderline
  • AnnotationCreateTextSquiggly
  • AnnotationCreateTextStrikeout
  • AnnotationCreateFreeText
  • AnnotationCreateCallout
  • AnnotationCreateSignature
  • AnnotationCreateLine
  • AnnotationCreateArrow
  • AnnotationCreatePolyline
  • AnnotationCreateStamp
  • AnnotationCreateRectangle
  • AnnotationCreateEllipse
  • AnnotationCreatePolygon
  • AnnotationCreatePolygonCloud