How to modifiy the event of delete button on annotation popup ? and How can I Add the new button on the annotation popup?

Technical Support
1

Which product are you using?
PDF.js Express Plus

PDF.js Express Version
8.7.4

Detailed description of issue
How to modify the event on click on the delete button of the annotation popup and how to add another button on annotation popup ?

image
Want to open conformation modal on clicking on the delete button do not want delete the annotation and want to add the another button on annotation popup ?

2

Hello Shahid,

You can add a button to the annotation popup like so:

const customBtn = {
  type: 'actionButton',
  label: 'some-label',
  dataElement: 'someElement',
  onClick: () => console.log('clicked'),
};
instance.UI.annotationPopup.add(customBtn);

I think to have a confirmation modal appear, you can create a new delete button that will open a custom modal. You can use the addCustomModal API here: PDFJS Express WebViewer Namespace: UI

You can delete the selected annotation with deleteAnnotation here: PDFJS Express WebViewer Class: AnnotationManager

Best Regards,
Darian

3

I am assuming by label : ‘some-label’ will add text. How I can add a custom icon instead of label ?

4

Hello Neeraj,

You can use the img property to add a custom icon.
Please see this guide here: PDF.js Express Viewer Customize Toolbar | Documentation

Best Regards,
Darian