Get signature field coordinates

I’m working with a Vue.js Nuxt 3 environment and what we are trying to do, it’s to get the specific coordinates from where the signatures will be applied, but when I call the getFields() class it just returns an empty array. I need a way to either set and get the coordinates to send a signature so my users can then sign on to my system or a way to detect from a DOCX to PDF template conversion if the template requires a Signature.

right now I’m just creating the template and filling in all the variables, but the last peace it’s getting the signature positions.

here it’s part of the code.

onMounted(() => {
    PDFtron.default({
        path: '../../webviewer',
        disabledElements: [
            'menuButton',
        ],
        preloadWorker: 'office',
        fullAPI: true,
        initialDoc: props.document
    }, viewer.value)
        .then(instance => {
            viewerInstance = instance;
            const { documentViewer } = instance.Core;
            instance.UI.setTheme('dark');
            if (props.document == null) {
                instance.UI.showWarningMessage({
                    confirmBtnText: 'Okay',
                    title: "Oops, something went wrong",
                    message: 'We're sorry, the contract it's not available just yet.',
                    onCancel: null,
                    onConfirm: null,
                })

            }
            documentViewer.addEventListener('documentLoaded', async () => {
                await documentViewer.getDocument().getDocumentCompletePromise();
                documentViewer.updateView();

                const contract = documentViewer.getDocument();
                const keys = await contract.getTemplateKeys();
                contractKeys.value = keys.reduce((o, key) => ({ ...o, [key]:''}), {});

                document.getElementById("key-val-title").innerText = "Contract Variables:";
                isLoading.value = false;
            });
        })
})

const autoFill = async () => {
    const {documentViewer, annotationManager} = viewerInstance.Core
    const doc = await documentViewer.getDocument()

    let fM = new viewerInstance.Core.Annotations.Forms.FieldManager(annotationManager);
    console.log(fM.getFields() );
// here only returns an empty array.

    await doc.applyTemplateValues(JSON.stringify(contractKeys.value));
    await doc.getDocumentCompletePromise();
    documentViewer.updateView();
}

and this is the template that’s being display

<template>
    <aside class="autofill">
        <h2 id="doc-title">Smart Contract</h2>
        <br>
        <h1 id="key-val-title">Preparing Visualization...</h1>
        <p id="current-status"></p>
        <form id="autofill-form" @submit.prevent="autoFill">
            <div v-for="(value, index) in contractKeys">
                <BaseInput inputClass="value-field" v-model="contractKeys[index]" :type="getType(index)"
                    :name="`${index}`" :label="getLabel(index)" required >
                </BaseInput>
            </div>
            <baseButton v-if="!isLoading" type="submit" variant="primary" name="Autofill">Fill Variables.
            </baseButton>
        </form>
    </aside>
    <div id="webviewer" ref="viewer"></div>
</template>

Hi,

Thank you for contacting us regarding Webviewer.

To get the coordinates of the signatures, you can use the annotationChanged event in annotationManager.

 annotationManager.addEventListener('annotationChanged', (annotations, action, info) => {
    // the annotations array should contain the information signature you just created, including coordinates, width and height
  }); 

Furthermore, you could check the guide at PDFTron Systems Inc. | Documentation to convert coordinates between the Viewer and the PDF if you need to.

Please let us know if this resolves your issue, thank you.