Tracking pdf form feilds while editing them

Technical Support WebViewer
1

Hi @PDFtron ,
can anyone let me know if there is any way i can track form feilds in fillable pdfs while filling them using pdftron Sdk/s or webviewer.

2

Hello indranath,

What type of tracking do you have in mind? The AnnotationManager fires an event named fieldChanged which you can attach a listener to. AnnotationManager fieldChanged

You can also iterate through the fields if you wish to gather info on each. For this you would use the FieldManager.

Best Regards,

Armando Bollain
Software Developer
PDFTron Systems, Inc.
www.pdftron.com

3

Hey, I would like to open that question again.
I would like to track ongoing changes of form fields. The fieldChanged event does trigger only when loosing the focus, but not while entering new characters. Would that be possible with some other event?
Especially for me it is important that I can export that current change via the exportAnnotationCommand function.

Regards,
Denis

4

Hi there,

To listen to every character typed, you should create an inner element on the Text Field and on it, you will listen to the DOM “input” event. Here is a guide with more explanation about this topic, the last example of it shows how to create the inner element. Below is a code snippet you can use to listen when keys are pressed on your Text input fields.

WebViewer({
...
}), document.getElementById('viewer')).then(instance => {
const { Annotations } = instance.Core;
const createInnerElement = Annotations.TextWidgetAnnotation.prototype.createInnerElement;
Annotations.TextWidgetAnnotation.prototype.createInnerElement = function() {
const textField = this;
const el = createInnerElement.apply(this, arguments);
el.addEventListener('input', () => {
console.log('check textField clicked', textField.fieldName);
});
return el;
};
})

Best regards,
Kevin Kim

5

Hey, thank you for the fast response.
Would that also help if I want to export the change then via exportAnnotationCommand? As I need to sync this to another instance of the webviewer for another user.

Regards,
Denis

6

Hi there,

You would need to trigger a modify action for the annotation, so doing something like the following can work:

const createInnerElement = Annotations.TextWidgetAnnotation.prototype.createInnerElement;
Annotations.TextWidgetAnnotation.prototype.createInnerElement = function () {
    const textField = this;
    const el = createInnerElement.apply(this, arguments);
    el.addEventListener('input', async (e) => {
        const textFieldAnnot = textField.getField();
        textFieldAnnot.value = textField.value;
        console.log(await annotationManager.exportAnnotationCommand())
    });
    return el;
};

image
image2448×1378 474 KB

Best regards,
Kevin Kim

7

great, thank you a lot!