Apryse Web Viewer- move the page number to a different part of the viewer

Technical Support WebViewer
,
1

WebViewer Version: 10.7.0

Do you have an issue with a specific file(s)? Yes
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? No

Please give a brief summary of your issue:
Move Page Number to a different area of the viewer

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

The Page number <X/X> appears centered near the bottom of the viewer. Is there a way to move this page number to a different part of the viewer programatically. Such as somewhere near the top of the viewer ?

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

You can see the page number in the Apryse showcase, but our users want us to move it near the top so that they don’t have to scroll down to see it.

2

You should be able to do this (within the iframe):
elem = document.querySelector(“div[data-element=‘pageNavOverlay’]”);
elem.style.position = ‘absolute’;
elem.style.top = “-500px”;
elem.style.right = “200px”;
elem.style.left = ‘unset’;
elem.style.transform = ‘unset’;
elem.style.background = ‘purple’;

Then you can style it/move it however you want.

image
image1325×891 7.28 KB

I moved it to the side in a very brute-force way. There are obviously better ways to do this but I was just throwing it together.

3

Hello @david.baldwin,

Thank you for contacting WebViewer support.

@rasdan is correct, the most straightforward approach would be getting the element via its data-element and modifying the style as necessary. Thanks for the assist!

If you run into any issues implementing this, feel free to reach out.

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

4

Hello rasdan and Jacob.

Thanks for the code snippet. one question…

Where in the iframe should I call this code from ? I tried adding it to the documentLoaded eventlistener, but the data-element for pageNavOverlay does not exist in that scope. document.querySelector returns null.

Thanks,

David Baldwin

5

Hello @david.baldwin,

You can access the data element by calling it from the the iframeWindow. The API doc can be found here: Apryse WebViewer Namespace: UI

Can you try the following code snippet:

  instance.Core.documentViewer.addEventListener('documentLoaded', async () => {
    const elem = instance.UI.iframeWindow.document.querySelector("div[data-element='pageNavOverlay']");
    console.log(elem);
    elem.style.position = 'absolute';
    elem.style.top = '-500px';
    elem.style.right = '200px';
    elem.style.left = 'unset';
    elem.style.transform = 'unset';
    elem.style.background = 'purple';
  });

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

6

Hello Jacob.

For some reason, the iframeWindow is undefined and I’m not able to get a reference to the element. .document cannot be referenced. I definitely have a reference to instance.UI as i can see that populated in dev tools.

Here’s a screenshot attachment of the error and my full code page.

Thanks,

David Baldwin

image
image1607×860 86.2 KB

reference_to_iframe.pdf (96.4 KB)
ShowRecordLinearized.aspx (13.1 KB)

7

Hello Jacob,

I found the root cause for the iframeWindow component not being populated. Turns out we were not instantiating the WebVewer object properly according to the Apryse documentation.

Once, we corrected that, this is now working as expected. My apologies for this since it was caused by our code.

Many thanks to you for your support and assistance,

David Baldwin, Highmark, Inc.

2 Likes