Scrolling Redaction Panel based on some event/input

I want to implement scrolling of redaction panel if I have the page number of document.
Eg. I have page number 6 as input then I want the scroll bar to take me to Page 6’s marked for redaction

How can I Implement it in react.

Thanks

1 Like

Hi @surya.bansal,

You could query the DOM for an element that contains the “Page 1” text. Looking at the HTML it’s contained in the following div container.

<div class="redaction-page-group-number">
   ...
</div>

Once you’ve found the element you can scroll to it via the Element.scrollTo API.

Let me know how this works for you!

Adam

1 Like

Hey @asinclair thanks for reaching out.
This will work in case Page 1 and Page 2 are visible on screen. If Page 1 has greater than 10 annotations then “Page 2” title won’t be visible on the redaction list. What can be done in those cases.

1 Like

Hi @surya.bansal,

If that is the case you may need to scroll to the page you’d like to inspect the redactions. Before querying the redaction-page-group-number HTML element, try calling the DocumentViewer.setCurrentPage() API to the desired page.

Adam

1 Like

Got it, it means I will have to scroll the list only.
DocumentViewer.setCurrentPage() only helps in document page changing I guess that is not my requirement. Thank you :slight_smile:

1 Like

@surya.bansal,

My apologies - you are correct. The redaction list is virtualized which limits the amount of elements rendered to the DOM. This requires you to scroll through the list to render the next batch of redactions.

Let me know if you have any more questions!

Adam

1 Like