How to filter annotation based on user and other field in web viewer

Technical Support WebViewer
, ,
1

WebViewer Version: 8.0.1

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

Please give a brief summary of your issue:
(Think of this as an email subject)
Suppose Two user’s are collbrating on one file and they have created some anotations or marked anything on the file. Now I want to filter the annotations of only one user and show it on the file when I click on filter button and select the user’s name . I want to show annotaions of only selected user by filtering out. How can I achieve this?

Please describe your issue and provide steps to reproduce it:
(The more descriptive your answer, the faster we are able to help you)
Step1: I am attaching screenshot where I have two users with userName mukutrai12@gmail.com & ashutosh.rai@slate.ai and both of the user’s have created someannotation on the file

image
image1812×967 354 KB

Step2: Now when I clicking on filter button and want to select comments by any one user and after selecting user and clicking apply button I want to show then anotations on the scrren that belongs to only selected users;

image
image1812×940 221 KB

Step3: After clicking on apply the user’s name is filtering out correctly on right side of panel but on the file the annotaions are not able to filter based on the user…All the annotations on the screen by both the user’s are still visible…I want to show the anotation of only selected user on the screen. How can I achieve this?

image
image1840×1020 411 KB

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

2

Hello,

Thank you for contacting WebViewer support.

To achieve this you can listen to the Annotation filter changed event, get the filter information and filter the annotations you want to show. Then, you will hide all the other annotations that are not included on the list you want to show.

Below is a code snippet filtering the annotations by the selected authors, and you can make it with colors and types as well.

...
const { Annotations, documentViewer, annotationManager} = instance.Core;

  const UIEvents = instance.UI.Events;
  instance.UI.addEventListener(UIEvents.ANNOTATION_FILTER_CHANGED, e => {
     const { types, authors, colors } = e.detail;

        const annotsList = annotationManager.getAnnotationsList();
        // showing all annotations again because after a filter changing some of them might be hidden
        annotationManager.showAnnotations(annotsList);
        if (authors.length) {
            const annotsToHide = annotsList.filter(annotation => !authors.includes(annotation.Author))
            annotationManager.hideAnnotations(annotsToHide);
        }
  });

I’m adding the used APIs documentations for reference.

Hope this helps.

Best,

Dandara Navarro
Web Software Developer
PDFTron Systems, Inc.