Programmatically get/set multi-selected notes in notes panel

WebViewer Version: 10.3

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? No
Is your issue related to annotations? Yes

Please give a brief summary of your issue:
Programmatically get/set multi-selected notes in notes panel

Please describe your issue and provide steps to reproduce it:
Good day. I would like to ask if there is a way maybe via the AnnotationsManager or NotesPanel namespace to get the notes/annotations that are currently ticked when in multi-select mode?

We added a “select all” custom button to the left of Multi Select button that, when clicked, will programmatically tick all the notes’ checkboxes found under the <div class=“normal-notes-container”> HTML using javascript. At first, this solution works but when the Notes panel starts to have more than 100+ annotations, the “normal-notes-container” changes to “virtualized-notes-container” and starts adopting a virtual scrolling approach. The problem with this is when our custom button is clicked, it would only be able to tick the notes’ checkboxes that are under the DOM of “virtualized-notes-container” at the time of clicking. Once the user scrolls further, the next notes that get loaded into DOM won’t have their checkboxes ticked
image

Meanwhile, I was looking at the source code of the NotesPanel and understand that the component keeps track of what are selected using state management. Would there be also a way to access these specific properties in the state?

Thank you!

Hi joserafael.arce,

We currently do not have an API exposed for that kind of behaviour. You could try and use

documentViewer.addEventListener('documentLoaded', () => { 
    documentViewer.disableViewportRenderMode()
  }); 

However, this could prove costly performance wise, since it should load ALL annotations in the file, instead loading just the ones in the viewport. Could you please explain the use case scenario behind this? Why do you want to have “Select All” button in the first place? What do you intend to do with the annotations? We might be able to come out with a better suitable solution.

We have this requirement where the end-user wants to multi-select all of the annotations in the list then clicks on another custom button we added which will do an API request using the annotation IDs of the selected annotations as request payload.

At the same time, it also serves as a convenient way for the end-user to set the Status (OOTB button found in the footer when multi-select mode is active) in bulk without having to individually click on every checkbox first

Another peculiar use case to watch out for is for example out of 101 annotations, the end-user clicks on the select all custom button then decides to uncheck the top 4. The end-user will be expecting action to take place on the bottom 97 annotations that are still supposedly selected

Hi joserafael.arce,

Could you try the following API and see if it would solve the issue you are having:

instance.UI.disableFeatures([instance.UI.Feature.NotesPanelVirtualizedList]);

In essentiality this should disable virtualized list. You can read more about the API here:
https://docs.apryse.com/api/web/UI.html#notespanelvirtualizedlist

NOTE: This might impact performance, depending on how many annotations are in the document.

Hi bjovanovic

This command to disable the virtual scrolling restores our custom select all functionality. However, I will still discuss with our Product Owner since a decision has to made regarding functionality vs performance.

Out of curiosity, is it in your product roadmap regarding being able to get/set the multi-selected notes or a similar API functionality?

Thank you!

Hi joserafael.arce,
Currently we don’t have that kind of API on the roadmap, where you can select all annotations at once from the Notes Panel. To select all annotations, we advise using getAnnotationsList() API, you can read about it in this guide here: Apryse Documentation | Documentation
and here: Apryse Documentation | Documentation
Disabling Virtualized List shouldn’t have much of an impact if you don’t have much more than a 100 annotations (even 2 or 3 hundred should be fine). You can check it yourself. Ive used a pdf file with 2000 annotations, and notes panel was a bit laggy. But then, again, finding something manually in the Notes Panel, amongst 2000 annotations, seems very impractical.