Detecting unsaved changes in annotations/comments?

Technical Support WebViewer
, ,
1

WebViewer Version: 10.6.0

Do you have an issue with a specific file(s)? No
Can you reproduce using one of our samples or online demos? Yes
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? No
Is your issue related to annotations? Yes

Please give a brief summary of your issue:
Detecting unsaved changes in annotations/comments

Please describe your issue and provide steps to reproduce it:

Hello. I would like to ask if there is an API in the WebViewer to know if there are unsaved changes in the comments panel. For example, when a user forgets to click Save and clicks away from the comment box, it would show that exclamation mark:

image
image1130×506 99.5 KB

But we need to find out programmatically so our application can also prompt the user from navigating away from the page if there are unsaved changes in the comments

Thank you!

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

2

Hi there,

Thank you for contacting WebViewer forums,

When you have unsaved changes in the text area, the icon that pops has a data-element of ‘unpostedCommentIndicator’.

If you add an eventListener to the text input field, you should be able to grab the icon using the following:

      const iframeDoc = instance.UI.iframeWindow.document;
      const unsavedIcon = iframeDoc.querySelectorAll('[data-element="unpostedCommentIndicator"]')

And if this icon exists, you could add your custom behaviour.

You may need to follow our advanced UI customization guide for this behaviour:

Best regards,
Kevin Kim

1 Like
3

Hi Kevin.

We’ve ran into an interesting use case using the Comparison mode. For example when you put in an unsaved comment in Canvas 1 then click on Canvas 2, supposedly to show the comments of Canvas 2, the detection for the unpostedCommentIndicator will no longer work. I assume because it got hidden due to clicking on Canvas 2 for its comments. See example on showcase page below:

chrome_ssJWz8zrZG

Any recommendations for this use case?

Thank you very much!

4

Hi there,

As both documentViewers are referencing the same notes panel, when you call the above code, it will re-try to find the unpostedCommentIndicator, meaning it will no longer be found.

What you could try is to create a click eventListener for each documentViewer via the following and then differentiate each unpostedCommentIndicator for each viewer.


instance.Core.getDocumentViewers()[0].addEventListener('click', () => {
    console.log('documentViewer1 clicked')
})
instance.Core.getDocumentViewers()[1].addEventListener('click', () => {
    console.log('documentViewer2 clicked')
})

Best regards,
Kevin Kim

5

Hi. I was thinking something more like a function to call on demand to check for unposted comments. In the case of compare mode active, will something like this work?

instance.Core.getDocumentViewers()[0].click(); //Ensure Viewer1 is active
const unsavedIconsViewer1 = instance.Core.getDocumentViewers()[0].querySelectorAll('[data-element="unpostedCommentIndicator"]')

instance.Core.getDocumentViewers()[1].click(); //Ensure Viewer2 is active
const unsavedIconsViewer2 = instance.Core.getDocumentViewers()[1].querySelectorAll('[data-element="unpostedCommentIndicator"]')
6

Hi there,

You will need to access the HTML element of the Viewer and then click it.
i.e

const doc1 = instance.Core.getDocumentViewers()[0]
doc1.getViewerElement().click()

Best regards,
Kevin Kim