Can i toggle added annotation visibie with filtering in comment panel

Technical Support WebViewer
,
1

WebViewer Version:10.9.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?

I dont know. I Confirmed it on Chrome.

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:
(Think of this as an email subject)

Can i toggle added annotation visibie with filtering in comment panel?

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

After adding some annotations, if I filter the annotations with the filter in the comment panel, only the relevant annotations are displayed in the comment panel, but all annotations on the document are displayed.

I would like the filter in the comment panelto filter annotations on the document as well.

  1. Is there a way to filter annotations on the document when filtering with the filter in the comment panel?

  2. I would like to see this implemented as a feature in the future. Are there plans for this?

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

Below is an image of the demo site.
I added red and blue freehand annotations and checked red in the filter.
Only the red annotations are displayed in the comment panel, but the blue annotations are also displayed on the document.

2024-09-25_16h37_22
2024-09-25_16h37_221920Ă—919 130 KB

2

Hello @harada.ryosuke,

Thank you for posting on our forum.

If I understand correctly, you would like it so that the only annotations on the document that are visible are ones which pass the filter in the comments/notes panel? Feel free to correct me if I’ve misunderstood.

If my assertion is correct, than this feature actually exists out-of-the-box in WebViewer! Under “Filter Settings” in the modal in your screenshot, simply tick the checkbox that says “Filter document and comments panel” and click “Apply”.

For example, when loading our “demo-annotated file” with this setting enabled, this is what it looks like with only the red color allowed:

image
image1920Ă—1183 121 KB

Meanwhile if I allow only “Highlight” annotations instead, it displays this:

image
image1920Ă—1199 158 KB

Let us know if this fits your desired workflow!

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

3

Dear Jacob

Thank you for your reply.

Your understanding is correct and it works as expected :slight_smile:

I want to do the same thing in my program, but I don’t want the user to see the checkbox, and I want it to always work with a filter that is in the comments/notes panel.

Is it possible for you to show me an API, guide or sample code for this?

4

Hello @harada.ryosuke,

Thank you for confirming your desired workflow.

If I understand correctly, you would like to always have the comment filter affect which annotations are visible, and not rely on the checkbox in the modal? If that is the case, there is no particular API which will enable this behavior, but you can implement it with some events/APIs available.

We have an annotationFilterChanged event which will be triggered whenever the comment panel filter is updated. You can find the API doc here: https://docs.apryse.com/api/web/UI.html#event:annotationFilterChanged.

This event callback has the filters applied pass back as arrays. You can iterate through each annotation and see if the type, author, color, or status of the annotation matches the filters returned. If it fails, you can set the NoView property of the annotation to true. This will match the behavior as the checkbox, you can find the API doc for the property here: https://docs.apryse.com/api/web/Core.Annotations.Annotation.html#NoView

As for a code example, you can see how we’ve implemented this by taking a look at our public UI repo, which you can find here: https://github.com/ApryseSDK/webviewer-ui/blob/10.12/src/components/FilterAnnotModal/FilterAnnotModal.js#L74.
I’ve linked the exact function which handles checking to see if the annotations match the filters applied.

Let me know if you need any further clarification regarding the APIs or implementation.

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

5

Dear Jacob

Thank you for your reply.

I understand that there is no specific API.
I will try using the API and functions you provided as a reference.

Best regards,
Ryosuke Harada

1 Like