documentXFDFRetriever doesn't display annotations

WebViewer Version: 8.1.0

Do you have an issue with a specific file(s)? No
Can you reproduce using one of our samples or online demos? No
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? Yes

Please give a brief summary of your issue: Annotations are loaded but not displayed

Please describe your issue and provide steps to reproduce it:
I’m passing a callbak as per the WebViewer github example to load my annotations upon loading a document, but while the annotations are correctly fetched and returned as an array of xfdf strings, it doesn’t display them on the webviewer

    const _loadAnnotations = async (documentId) => {
        if (!documentId)
            return ([]);
        const annotations = await getAllDocumentAnnotationsByDocumentId(
            documentId,
            {noAuth: !userContext}
        );

        if (!annotations.error) {
            return (annotations.map(({annotation}) => annotation.toString()));
        } else {
            return ([]);
        }
    }

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

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:

Guides:APIs:Forums:

Hello,

What sample were you looking at and do you get any error messages? Was it one about real time collaboration or loading annotation from a database? What is the format of the XFDF strings you are getting back from getAllDocumentAnnotationsByDocumentId? I’m assuming that _loadAnnotations is the callback function you are passing to documentXFDFRetriever. Looking at the code you posted, I think

return (annotations.map(({annotation}) => annotation.toString()));

might need to be something like

return (annotations.map(({annotation}) => `<?xml version="1.0" encoding="UTF-8"?>
<xfdf xmlns="http://ns.adobe.com/xfdf/" xml:space="preserve">
<fields/>
<add> 
${annotation.toString()}
</add>
<modify/>
<delete/>
</xfdf> ` ));

The “documentXFDFRetriever” function is expecting an array of XFDF "command "strings it can call ‘annotationManager.importAnnotations’ over.

You can find out more in the link below

Please let me know if the above was helpful or if you have any other questions

Best Regards,

Andrew Yip
Software Developer
PDFTron Systems, Inc.
www.pdftron.com

Ah yes thank you it was simply that. I didn’t think that XFDF command meant this, I just assumed that since it said “an XFDF string, or an array of XFDF commands” it was just a way to say an array of XFDF strings

I have a new issue which is sometimes annotations don’t appear in the comment section, preventing people from commenting them. It’s too random for me to understand the cause of them appearing or not…

Hello,

Just to clarify, was this after importing the annotations through XFDF? What were the steps you took to reproduce?

Andy Huang
Software Developer
PDFTron Systems, Inc.
www.pdftron.com

I’m loading my annotations with the function aforementioned which is now working great, they even appear before the document does.
I’m loading the document using

instance.UI.loadDocument(
                            document.url ?? document,
                            {
                                documentId: document.id?.toString(),
                                extension: getFileNameAndFormat(document.name)[1],
                                filename: getFileNameAndFormat(document.name)[0]
                            }
                        );

which loads without issue. And past that point I’m not doing anything yet my annotations don’t appear in the comment section.

Hm, that seems rather odd.

Are you importing the XFDF right after the document has loaded completely?
Are you seeing any further issues in the browser console?
Do you get an annotation list when you call annotManager.getAnnotationsList()?
Were there any customizations to the notes panel?
Did you have a sample where this is reproducible?

Andy Huang
Software Developer
PDFTron Systems, Inc.
www.pdftron.com

I’m importing my annotations through the XFDFRetriever callback that I’m providing to my instance, so I assume they’re loaded once the document is loaded.
There’s no error in the console either. I only get a warning that my file is not linearized and my server is not configured to deserve some file type like .gz.
I do get my annotation list through annotationManager.getAnnotationslist()
No customization to the note panel has been done.
And I do not possess a sample where this is reproducible

Oh, sorry about that! I forgot you had mentioned it.

I tried it out and it seems to work fine on my end. I have used the documentXFDFRetriever in my constructor and it returns the XFDF string. I tested both the regular XFDF and the XFDF command. The results were it would import the annotation, render it, and it would be visible in the notes panel too.

documentXFDFRetriever: () => {
    const xfdf = `<?xml version="1.0" encoding="UTF-8" ?><xfdf xmlns="http://ns.adobe.com/xfdf/" xml:space="preserve"><pdf-info xmlns="http://www.pdftron.com/pdfinfo" version="2" import-version="4" /><fields /><annots><square page="0" rect="108.250,273.290,313.470,429.190" color="#4E7DE9" flags="print" name="174b72fc-34e5-5d01-f74f-4696dc66aaf6" title="Guest" subject="Rectangle" date="D:20211222144245-08'00'" creationdate="D:20211222144245-08'00'"/></annots><pages><defmtx matrix="1,0,0,-1,0,504" /></pages></xfdf>`;
    const cmd = `<?xml version="1.0" encoding="UTF-8" ?>
    <xfdf xmlns="http://ns.adobe.com/xfdf/" xml:space="preserve">
    <fields />
    <add><square page="0" rect="108.250,273.290,313.470,429.190" color="#4E7DE9" flags="print" name="174b72fc-34e5-5d01-f74f-4696dc66aaf6" title="Guest" subject="Rectangle" date="D:20211222144245-08'00'" creationdate="D:20211222144245-08'00'"/></add>
    <modify />
    <delete />
    </xfdf>`;

    return Promise.resolve(cmd);
  }

Would you mind sharing the XFDF that you are returning as well as the document you were testing with?

My document is stored at https://roomiesdesignstorage.blob.core.windows.net/document/39/13122021_HELLOW_46NDV_PLAN PROJET.pdf

And its annotations

[
    "<xfdf xmlns=\"http://ns.adobe.com/xfdf/\" xml:space=\"preserve\">\n                        <fields/>\n                        <add>\n                            <polyline page=\"0\" rect=\"448.800,668.550,458.130,679.960\" color=\"#E44234\" flags=\"print\" name=\"0bcd8ece-cc43-a7a9-435a-eb103f4f97ec\" title=\"Manon Berlioz\" subject=\"Polyline\" date=\"D:20211214094355+01'00'\" creationdate=\"D:20211214094350+01'00'\" head=\"None\" tail=\"None\"><vertices>449.8,678.9600399999999;457.13,676.42004;452.62,669.55004;450.27,678.77004</vertices></polyline>\n                        </add>\n                        <modify/>\n                        <delete/>\n                    </xfdf>",
    "<xfdf xmlns=\"http://ns.adobe.com/xfdf/\" xml:space=\"preserve\">\n                        <fields/>\n                        <add>\n                            <polyline page=\"0\" rect=\"544.620,329.760,552.060,340.730\" color=\"#E44234\" flags=\"print\" name=\"f0e4e4a2-7f30-5a2c-3c13-60d4fbf55765\" title=\"Manon Berlioz\" subject=\"Polyline\" date=\"D:20211214094443+01'00'\" creationdate=\"D:20211214094439+01'00'\" head=\"None\" tail=\"None\"><vertices>547.83,339.73004;545.62,333.11003999999997;551.06,330.76003999999995;547.98,339.58004</vertices></polyline>\n                        </add>\n                        <modify/>\n                        <delete/>\n                    </xfdf>",
    "<xfdf xmlns=\"http://ns.adobe.com/xfdf/\" xml:space=\"preserve\">\n                        <fields/>\n                        <add>\n                            <polyline page=\"0\" rect=\"600.770,361.510,608.650,369.240\" color=\"#E44234\" flags=\"print\" name=\"e679c5f3-21f0-455f-b79c-c237ce418962\" title=\"Manon Berlioz\" subject=\"Polyline\" date=\"D:20211214094453+01'00'\" creationdate=\"D:20211214094448+01'00'\" head=\"None\" tail=\"None\"><vertices>601.77,366.77004;607.65,368.24003999999996;606.03,362.51003999999995;602.06,366.77004</vertices></polyline>\n                        </add>\n                        <modify/>\n                        <delete/>\n                    </xfdf>",
    "<xfdf xmlns=\"http://ns.adobe.com/xfdf/\" xml:space=\"preserve\">\n                        <fields/>\n                        <add>\n                            <polyline page=\"0\" rect=\"509.060,269.210,516.790,276.650\" color=\"#E44234\" flags=\"print\" name=\"f77a73f6-5fac-5298-7497-ccaf9ea7bfb7\" title=\"Manon Berlioz\" subject=\"Polyline\" date=\"D:20211214094506+01'00'\" creationdate=\"D:20211214094500+01'00'\" head=\"None\" tail=\"None\"><vertices>510.06,270.21003999999994;512.41,275.65004;515.79,270.36004;510.5,270.21003999999994</vertices></polyline>\n                        </add>\n                        <modify/>\n                        <delete/>\n                    </xfdf>",
    "<xfdf xmlns=\"http://ns.adobe.com/xfdf/\" xml:space=\"preserve\">\n                        <fields/>\n                        <add>\n                            <polygon page=\"0\" rect=\"497.760,208.360,531.620,240.580\" color=\"#E44234\" flags=\"print\" name=\"7080a643-640a-ee0e-d98e-921b6425bd75\" title=\"Manon Berlioz\" subject=\"Polygon\" date=\"D:20211214094840+01'00'\" interior-color=\"#EFEF5A\" opacity=\"0.7092739475289811\" creationdate=\"D:20211214094815+01'00'\"><vertices>498.76,230.53003999999999;522.86,209.36004000000003;530.62,217.71003999999994;505.81,239.58003999999994;498.76,230.53003999999999</vertices></polygon>\n                        </add>\n                        <modify/>\n                        <delete/>\n                    </xfdf>",
    "<xfdf xmlns=\"http://ns.adobe.com/xfdf/\" xml:space=\"preserve\">\n                        <fields/>\n                        <add>\n                            <polygon page=\"0\" rect=\"538.230,627.370,579.030,665.380\" color=\"#E44234\" flags=\"print\" name=\"23cc6b9f-83be-ce01-82fb-240fa7b59462\" title=\"Manon Berlioz\" subject=\"Polygon\" date=\"D:20211214094915+01'00'\" interior-color=\"#EFEF5A\" opacity=\"0.7092739475289811\" creationdate=\"D:20211214094903+01'00'\"><vertices>539.23,662.18004;550.99,664.38004;551.87,655.42004;557.31,647.3300399999999;564.95,641.60004;578.03,639.54004;546.43,628.37004;539.23,662.18004</vertices></polygon>\n                        </add>\n                        <modify/>\n                        <delete/>\n                    </xfdf>",
    "<xfdf xmlns=\"http://ns.adobe.com/xfdf/\" xml:space=\"preserve\">\n                        <fields/>\n                        <add>\n                            <polyline page=\"0\" rect=\"539.280,664.960,547.240,675.390\" color=\"#E44234\" flags=\"print\" name=\"939e9a9b-a05d-07a7-ad18-3714c8e65f13\" title=\"Manon Berlioz\" subject=\"Polyline\" date=\"D:20211214094412+01'00'\" creationdate=\"D:20211214094406+01'00'\" head=\"None\" tail=\"None\"><vertices>544.02,674.0900399999999;540.28,669.2100399999999;546.24,665.9600399999999;544.32,674.39004</vertices></polyline>\n                        </add>\n                        <modify/>\n                        <delete/>\n                    </xfdf>",
    "<xfdf xmlns=\"http://ns.adobe.com/xfdf/\" xml:space=\"preserve\">\n                        <fields/>\n                        <add>\n                            <polyline page=\"0\" rect=\"742.370,439.050,751.190,448.570\" color=\"#E44234\" flags=\"print\" name=\"ad714f3c-4dc5-d38a-0c38-33fab6496249\" title=\"Manon Berlioz\" subject=\"Polyline\" date=\"D:20211214094424+01'00'\" creationdate=\"D:20211214094420+01'00'\" head=\"None\" tail=\"None\"><vertices>744.43,440.05003999999997;743.37,447.57003999999995;750.19,445.81003999999996;744.43,440.16004</vertices></polyline>\n                        </add>\n                        <modify/>\n                        <delete/>\n                    </xfdf>"
]

Odd, it does appear to be working for me.

This was the code I was using in the documentXFDFRetriever:

const cmds = [
      "<xfdf xmlns=\"http://ns.adobe.com/xfdf/\" xml:space=\"preserve\">\n                        <fields/>\n                        <add>\n                            <polyline page=\"0\" rect=\"448.800,668.550,458.130,679.960\" color=\"#E44234\" flags=\"print\" name=\"0bcd8ece-cc43-a7a9-435a-eb103f4f97ec\" title=\"Manon Berlioz\" subject=\"Polyline\" date=\"D:20211214094355+01'00'\" creationdate=\"D:20211214094350+01'00'\" head=\"None\" tail=\"None\"><vertices>449.8,678.9600399999999;457.13,676.42004;452.62,669.55004;450.27,678.77004</vertices></polyline>\n                        </add>\n                        <modify/>\n                        <delete/>\n                    </xfdf>",
      "<xfdf xmlns=\"http://ns.adobe.com/xfdf/\" xml:space=\"preserve\">\n                        <fields/>\n                        <add>\n                            <polyline page=\"0\" rect=\"544.620,329.760,552.060,340.730\" color=\"#E44234\" flags=\"print\" name=\"f0e4e4a2-7f30-5a2c-3c13-60d4fbf55765\" title=\"Manon Berlioz\" subject=\"Polyline\" date=\"D:20211214094443+01'00'\" creationdate=\"D:20211214094439+01'00'\" head=\"None\" tail=\"None\"><vertices>547.83,339.73004;545.62,333.11003999999997;551.06,330.76003999999995;547.98,339.58004</vertices></polyline>\n                        </add>\n                        <modify/>\n                        <delete/>\n                    </xfdf>",
      "<xfdf xmlns=\"http://ns.adobe.com/xfdf/\" xml:space=\"preserve\">\n                        <fields/>\n                        <add>\n                            <polyline page=\"0\" rect=\"600.770,361.510,608.650,369.240\" color=\"#E44234\" flags=\"print\" name=\"e679c5f3-21f0-455f-b79c-c237ce418962\" title=\"Manon Berlioz\" subject=\"Polyline\" date=\"D:20211214094453+01'00'\" creationdate=\"D:20211214094448+01'00'\" head=\"None\" tail=\"None\"><vertices>601.77,366.77004;607.65,368.24003999999996;606.03,362.51003999999995;602.06,366.77004</vertices></polyline>\n                        </add>\n                        <modify/>\n                        <delete/>\n                    </xfdf>",
      "<xfdf xmlns=\"http://ns.adobe.com/xfdf/\" xml:space=\"preserve\">\n                        <fields/>\n                        <add>\n                            <polyline page=\"0\" rect=\"509.060,269.210,516.790,276.650\" color=\"#E44234\" flags=\"print\" name=\"f77a73f6-5fac-5298-7497-ccaf9ea7bfb7\" title=\"Manon Berlioz\" subject=\"Polyline\" date=\"D:20211214094506+01'00'\" creationdate=\"D:20211214094500+01'00'\" head=\"None\" tail=\"None\"><vertices>510.06,270.21003999999994;512.41,275.65004;515.79,270.36004;510.5,270.21003999999994</vertices></polyline>\n                        </add>\n                        <modify/>\n                        <delete/>\n                    </xfdf>",
      "<xfdf xmlns=\"http://ns.adobe.com/xfdf/\" xml:space=\"preserve\">\n                        <fields/>\n                        <add>\n                            <polygon page=\"0\" rect=\"497.760,208.360,531.620,240.580\" color=\"#E44234\" flags=\"print\" name=\"7080a643-640a-ee0e-d98e-921b6425bd75\" title=\"Manon Berlioz\" subject=\"Polygon\" date=\"D:20211214094840+01'00'\" interior-color=\"#EFEF5A\" opacity=\"0.7092739475289811\" creationdate=\"D:20211214094815+01'00'\"><vertices>498.76,230.53003999999999;522.86,209.36004000000003;530.62,217.71003999999994;505.81,239.58003999999994;498.76,230.53003999999999</vertices></polygon>\n                        </add>\n                        <modify/>\n                        <delete/>\n                    </xfdf>",
      "<xfdf xmlns=\"http://ns.adobe.com/xfdf/\" xml:space=\"preserve\">\n                        <fields/>\n                        <add>\n                            <polygon page=\"0\" rect=\"538.230,627.370,579.030,665.380\" color=\"#E44234\" flags=\"print\" name=\"23cc6b9f-83be-ce01-82fb-240fa7b59462\" title=\"Manon Berlioz\" subject=\"Polygon\" date=\"D:20211214094915+01'00'\" interior-color=\"#EFEF5A\" opacity=\"0.7092739475289811\" creationdate=\"D:20211214094903+01'00'\"><vertices>539.23,662.18004;550.99,664.38004;551.87,655.42004;557.31,647.3300399999999;564.95,641.60004;578.03,639.54004;546.43,628.37004;539.23,662.18004</vertices></polygon>\n                        </add>\n                        <modify/>\n                        <delete/>\n                    </xfdf>",
      "<xfdf xmlns=\"http://ns.adobe.com/xfdf/\" xml:space=\"preserve\">\n                        <fields/>\n                        <add>\n                            <polyline page=\"0\" rect=\"539.280,664.960,547.240,675.390\" color=\"#E44234\" flags=\"print\" name=\"939e9a9b-a05d-07a7-ad18-3714c8e65f13\" title=\"Manon Berlioz\" subject=\"Polyline\" date=\"D:20211214094412+01'00'\" creationdate=\"D:20211214094406+01'00'\" head=\"None\" tail=\"None\"><vertices>544.02,674.0900399999999;540.28,669.2100399999999;546.24,665.9600399999999;544.32,674.39004</vertices></polyline>\n                        </add>\n                        <modify/>\n                        <delete/>\n                    </xfdf>",
      "<xfdf xmlns=\"http://ns.adobe.com/xfdf/\" xml:space=\"preserve\">\n                        <fields/>\n                        <add>\n                            <polyline page=\"0\" rect=\"742.370,439.050,751.190,448.570\" color=\"#E44234\" flags=\"print\" name=\"ad714f3c-4dc5-d38a-0c38-33fab6496249\" title=\"Manon Berlioz\" subject=\"Polyline\" date=\"D:20211214094424+01'00'\" creationdate=\"D:20211214094420+01'00'\" head=\"None\" tail=\"None\"><vertices>744.43,440.05003999999997;743.37,447.57003999999995;750.19,445.81003999999996;744.43,440.16004</vertices></polyline>\n                        </add>\n                        <modify/>\n                        <delete/>\n                    </xfdf>"
];

return Promise.resolve(cmds);

Could you try a similar approach or try to reduce the amount of code that could affect it?

Hello, sorry for the response delay, with the end of the year and everything.
I tried with your code but I have the same result, annotations displayed but not appearing in the note section

Hi,

I took a quick look at this and don’t seem to be able to reproduce the issue you are seeing. Seems like this could be due a configuration your using or an unexpected race condition.

What are the constructor options are you using when initializing WebViewer? Does removing all the options besides path, initialDoc (I tried removing this and using the “loadDocument” API as well) , or documentXFDFRetriever make a differences?

Also what browser are you using and does it make a difference if you include “useDownloader: false” in your constructor options? Lastly how are you are opening the note panel, are you programmatically opening it or manually pressing the button in the UI? If you are programmatically opening it, when do you call “openElement”? Thank you

Best Regards,

Andrew Yip
Software Developer
PDFTron Systems, Inc.
www.pdftron.com

On the constructor, I’m using the following options: path, fullAPI, enableMeasurement.
I am not using initial doc as the viewer is hidden as long as a doc is not selected.
Removing all options does not make a change.
I’m on Google Chrome, and I’m opening the note panel through the UI.

Maybe we could organise a conference with shared screen? We did one some months ago for another issue

Hi,

Thank you for the information. Unfortunately I don’t seem to be able to reproduce the issue when the using a custom document XFDF retriever. One thing that could be causing this issue is due to how you are hiding the WebViewer? If you set an iframe to have “display: none”, it could cause issues. If you are hiding it like that, try setting the visibility to hidden or height/width to 0 instead. You can find out more in the link below
Preloading WebViwer guide

Besides that you can create a support ticket using the link below and to set up a meeting to discuss the issue
Support form

Best Regards,

Andrew Yip
Software Developer
PDFTron Systems, Inc.
www.pdftron.com