Confirmation dialog when deleting annotation

Technical Support WebViewer
1

WebViewer Version: 10.8.0

Do you have an issue with a specific file(s)? No
Can you reproduce using one of our samples or online demos? No
Are you using the WebViewer server? No
Does the issue only happen on certain browsers? No
Is your issue related to a front-end framework? Yes
Is your issue related to annotations? Yes

Please give a brief summary of your issue:
I want to have confirmation dialog when user presses delete button in the annotation popup. I want to give user an option to change mind and cancel delete action.

Please describe your issue and provide steps to reproduce it:
(The more descriptive your answer, the faster we are able to help you)

Please provide a link to a minimal sample where the issue is reproducible:

2

Thank you for posting your question to our forum. We will provide you with an update as soon as possible.

3

Hello @nenad.vlajic,

Thank you for contacting WebViewer support.

This can be done by overriding the onClick function of the delete button. Here is an example code snippet:

  instance.UI.updateElement('annotationDeleteButton', {
    onClick: () => {
      instance.UI.showWarningMessage({
        title: 'WARNING! About to delete annotation',
        message: 'Would you like to proceed?',
        confirmBtnText: 'Okay!',
        onConfirm: () => {
          console.log('The user clicked the confirm button');
          instance.Core.annotationManager.deleteAnnotations(instance.Core.annotationManager.getSelectedAnnotations());
          return Promise.resolve();
        },
        onCancel: () => {
          console.log('The user clicked the cancel button');
          return Promise.resolve();
        },
      });
    },
  });

This would show the following modal once the user tries to click on the delete button in the annotation popup:

image
image802Ɨ502 52.5 KB

Here are the relevant APIs used:

Hope this helps!

Best Regards,
Jacob Romano Carlsen
Web Development Support Engineer
Apryse Software Inc.

4

Hi @jromanocarlsen,

I tried to use your example on notePopupDelete element, but for some reason id does not work. The code is same, I have just replaced ā€˜annotationDeleteButtonā€™ with ā€˜notePopupDeleteā€™, but warning message is not shown.

Thank you,

5

Hi @jromanocarlsen,

Yes, this is what I needed.
I did not find example for updateElement function inside the guides, but now I see it is there in the section about popups (https://docs.apryse.com/documentation/web/guides/customizing-popup/).

We have our own UI for showing messages, so I will not use showWarningMessage function.

Thank you very much!

1 Like