Replace Guest/Date time in sticky note annotation reactjs

Technical Support WebViewer
1

Product: Pdftron

Product Version: 8.1.0

Replace Guest/Date time with comment header/title in sticky note annotation

Is it possible to replace/modify the Guest/Date time with a comment header/title(editable i.e can be different for every comment just like the comment section) in the notes panel of sticky note annotation without directly making any changes on pdftron repository? Please share the code snippet for the same in react Js.
attaching the requirement marked by the red arrow.

Note: we are using 8.1.0 pdftron version

stickynotes
stickynotes1336×693 98 KB

2

Hello sgupt171,

We do not have an API to modify this directly, and if you want to avoid modifying the annotation Author and date-time on the actual annotation. You could access the DOM element and then filter by any of the classes:
image
You can then modify the inner value of these. This is a slightly hacky way to approach this.
Something like:

document.querySelector(".author-and-time").querySelector(".author").innerText = "Change this value"
document.querySelector(".author-and-time").querySelector(".date-and-time").innerText = "Change second value"

Another option would be Advanced UI Customization

Best regards,
Tyler Gordon
Platform Support Team Lead
PDFTron

3

I tried the above code, but getting compile time error ‘Object is possibly null’.
as document. querySelector(‘.author-and-time’) is printing null in console.

Will it be possible to replace the whole < div class=‘author’>guest</ div> with some other html element like textArea?

If replacment is not possible can we add one more html element like textArea below this and hide the author & time display?

4

Hello sgupt171,

Since WV is loaded inside an iframe, you’ll need to access the iframe from WV instance.

You can also access the iframe from the root document like so: document.querySelector('#webviewer-1').contentDocument.querySelector('.author-and-time') from the documentation.

Best regards,
Maggie V.
Software Developer
PDFTron

5

@maggiev Thanks for the Reply, I will try this.
could you please reply to the given query as well?

6

Please reply on the same as well

7

@maggiev / @tgordon Thanks for the reply!!
I am still getting Object is possibly ‘null’ error when using document.querySelector(‘#webviewer-1’) also it says property ‘contentDocument’ doesn’t exist on type ‘Element’ when trying to call .contentDocument.querySelector(‘.author-and-time’) from it.
is there any other alternative way or approach to achieve this?

8

Hello sgupt171,

To access the WebViewer iframe from the root document, you’ll need to get the iframe selector first. And then access its window or document through the contentWindow or contentDocument properties.

For me, the WV iframe element has an id of #webviewer-1, you’ll need to find the correct identifier for your case.

Another way to access WV iframe is through WebViewer instance, from our documentation. This is where you load WebViewer:

WebViewer(...)
  .then(instance => {
    const wvIframe = instance.UI.iframeWindow;
    wvIframe.document.querySelector(".author-and-time");
  });

Please make sure WebViewer is fully loaded and the notes panel is open in order to access the DOM elements you need.

I’d also recommend brushing up on this or any other article for the first approach.

Best regards,
Maggie V.
Software Developer
PDFTron