Color of comment box based on state of comment from XFDF in database

I am using the Webviewer and getting xfdf data from the database. I have extra data in the database to determine annotation comment state and permissions ect. I am then looping through each database xfdf entry and showing on the PDF with the following:


What i want to do now is trigger style changes to the comment box. ie if the status of the comment is “Accepted” the comment box should be a shade of blue. i have tried the follwing with no luck.

const mystyle = instance.UI.iframeWindow.getElementsByClassName(“Note”);
mystyle.setProperty(‘background-color’, ‘#FF00AA’, “important”;

any tips?

Hello, I’m Ron, an automated tech support bot :robot:

While you wait for one of our customer support representatives to get back to you, please check out some of these documentation pages:



Just correct me if I am wrong but you would like to change the note in the notes panel to reflect a color based on the annotation state. If so, you can loop through the annotations and set the corresponding note to a particular color with this code:

const { annotationManager } = instance.Core;
const { iframeWindow } = instance.UI;
annotationManager.getAnnotationsList().forEach((annot, i) => {
  iframeWindow.document.getElementsByClassName('Note')[i].style.backgroundColor = '#FF0000';

However, this only works if you have annotations that match the notes in the notes panel.

I would recommend instead to customize the open-source UI instead to change the color depending on the state of the annotation it represents as that will be more accurate.

I forgot to mention that we have an API to transform the notes as well but I would use it sparingly: PDFTron WebViewer Namespace: UI.

Thanks Andy, i am still going through all the info you sent. BTW - i am trying to add it my code and i am actually calling the state from a database as wanted control outside the pdf. Here is a snippet.

The importAnnotationCommand API call is asynchronous so you will have to await it. I would recommend using the annotationChanged event on the annotation manager to wait for the annotations to be imported: PDFTron WebViewer Class: AnnotationManager. Then I would update the notes in the UI with the colors you want.

You could also opt to set a custom property on the annotations and use the dangerous API I mentioned to make the notes handle the colors.

I ended up with the suggestion of an event listerer on ‘annotationchanged’ and then AnnotationManager.getAnnotationsList().forEach with the iframeWindow.document and specifying the id using its state of completed ect. i am filtering the comments then assign colors as follows: iframeWindow.document.getElementById(‘note_’+annotik.fM).style.backgroundColor = ‘#e8faec’;

its working well and keeps active for new loading and add and modifying of annotaiotn.

However for some reason the colors disappear on deleting an element only? the forEach code is working but not the color change, and only when deleting, so it fixes itself when i add/modify again after deleting.

I also have an issue that when i filter the comments, all the backgorund colors disappear. Is there a way to hold the colors on annotation loaded?

I suspect that the colors are being lost when the note component is being re-rendered. You could update the colors again on the notes during the annotationFilterChanged event in the UI.

You could also opt to use setInterval but the best solution would be to just customize the open-source UI to read the color off the annotation and render that.