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? Not sure
Does the issue only happen on certain browsers? No
Is your issue related to a front-end framework? Yes
Is your issue related to annotations? Yes
Please give a brief summary of your issue:
Cannot locate custom annotation in DOM
Please describe your issue and provide steps to reproduce it:
Prefix: We have a webviewer developed by our dev team and have custom annotations, like textfields, checkbox…
STR:
Open the page with webviewer
Wait for document loaded
Add a custom annotation (textbox) to the document
Inspect the page (code) and try to locate the textbox custom annotation in the source of DOM
Expected location: virtualListBody → pageSection1 → pageContainer1
Please provide a link to a minimal sample where the issue is reproducible:
Open showcase page and insert a stamp onto the page, try to locate in the DOM source
Note: we would like to build an automated test and it requires to click on the custom annotation (textbox) somehow, but this is not possible, because the element is not available in the DOM
Thank you
Hello, I’m AiRon, an automated tech support bot While you wait for one of our customer support representatives, I can help you with your question.
It seems like you’re trying to locate and interact with custom annotations in the DOM when using Apryse’s WebViewer. In WebViewer, annotations are not directly part of the standard DOM as they are rendered on a canvas. This is why you’re unable to find them using standard DOM inspection tools.
Some things you can try:
Use the WebViewer API to interact with annotations. Instead of accessing the DOM directly, use APIs like annotationManager to get the annotations and their properties.
Identify annotations by their IDs or other properties using annotationManager.getAnnotationsList() and then perform operations on them.
If you need to simulate clicks or other interactions, use the APIs provided by WebViewer to programmatically trigger these actions.
Here are some resources that might help you:
Annotations Guide - Learn how to manage and interact with annotations using the WebViewer API.
This is currently expected behavior. When viewing pages in WebViewer, each page of the document contains two visible canvases in the DOM, one for drawing the page content (Text, graphics, etc.), and one for drawing annotations (such as any custom annotations created). You can see this when inspecting the viewer:
If you are running tests to see if you click on an annotation, we recommend tracking the click event and then checking if there is any annotations under the mouse when this occurs using getAnnotationsByMouseEvent(). TheIt would look something like this:
instance.Core.documentViewer.addEventListener('click', (e) => {
console.log('click', e);
const annots = instance.Core.annotationManager.getAnnotationsByMouseEvent(e);
console.log('annots from click', annots);
// can add check to see if any of the annots are an instanceof the custom annotation class
});
@jromanocarlsen
So you mean, I need to click on the whole canvas for finding out if there is an annotation or not?
Please share some details how can I use Python to click on an existing element on the canvas
I’m not particularly familiar with what you are using to generate automated tests, nor how you are currently using Python in testing, so it is difficult to provide a particular recommendation.
WebViewer contains listeners that you can use to track mouse events in the viewer, as well as APIs to detect if an annotation is under the cursor at the time of the mouse event. However, the actual triggering of the mouse event would need to be triggered through your tests, so we do not have any particular recommendations.
If you have any particular questions regarding the APIs mentioned, or any other WebViewer API, feel free to reach out and we can investigate further. Let us know if you need further clarification.
Best Regards,
Jacob Romano Carlsen
Web Development Support Engineer Apryse Software Inc.
Hello @jromanocarlsen
one example: we have a text field annotation and on the webviewer, we are adding a “predefined text” to have a default text of the field. Please help me, how can I call the API of WebViewer with python and validate that the predefined text are assigned to this field?
Thank you
Thank you for the example. If you are using WebComponent, you can run WebViewer APIs through the shadow DOM where WebViewer is contained ( I stored the highlighted DOM element as a global variable) :
I’m not familiar with your testing suite, but if you are able to access this element, then you can use WebViewer APIs such as getAnnotationsList() to retrieve the list of annotations and verify the value of the custom annotation.
If you have any questions regarding any particular API we have or its usage, feel free to let us know which API you would like more information on.
Best Regards,
Jacob Romano Carlsen
Web Development Support Engineer
Apryse Software Inc.
Thank you @jromanocarlsen my testing suite is not important in this case. I just need an example how can I use WebViewer API with Python.
A python code to get attribute of an annotation
As WebViewer is a JavaScript library, all APIs of our Web SDK are ran using JavaScript. The previous suggestions assumes that your testing environment had access to the viewer’s DOM Element and call WebViewer APIs from the instance of the viewer.
Let us know if you need further clarification.
Best Regards,
Jacob Romano Carlsen
Web Development Support Engineer Apryse Software Inc.
Hi @jromanocarlsen
then please share a javascript snippet what I can use (and will be called via Python) to retrieve all parameter keys and values of an annotation of a pdf document in webviewer.
Thank you
