Form Field values not getting committed/ saved in certain cases

Technical Support WebViewer
, , ,
1

WebViewer Version:

Do you have an issue with a specific file(s)? Yes
Can you reproduce using one of our samples or online demos? No, it is happening after saving
Are you using the WebViewer server? yes
Does the issue only happen on certain browsers? No, all browser
Is your issue related to a front-end framework?
Is your issue related to annotations? yes

Please give a brief summary of your issue:
Form Field values not getting committed/ saved if user adds signs quickly.

Please describe your issue and provide steps to reproduce it:
I am using Web Viewer SDK to add Form Field (Text, signature, checkboxes) annotations to pdf on my NextJS website. I have been facing a issue resulting in corrupt sign xfdf / text field values, whenever user quickly signs and hit the save button then form fieldā€™s data is lost, although if user spends some time over the pdf clicking on ā€˜Panā€™ button or view button then values filled by user is correctly saved, it is appearing that the changes are not being committed properly, is there any method to commit pending changes in apryse for javascript? I have tried deselecting annotations and changing to view mode through code in my handleSave() function but no consistent result. Any help would be greatly appreciated.

Please provide a link to a minimal sample where the issue is reproducible: NA (Production grade code in complex project, unable to replicate at small scale).

1 Like
2

Hello, Iā€™m AiRon, an automated tech support bot :robot: While you wait for one of our customer support representatives, I can help you with your question.


It seems like the issue youā€™re experiencing is related to the timing of when form field changes are committed to the PDF document. This can sometimes happen if the changes are not finalized before the user saves the document.

Some things you can try:

  • Ensure that any pending changes are committed by deselecting the active annotation before saving. This can be done by programmatically selecting a different tool or annotation.

  • Use the documentViewer.refreshAll() method to ensure that all changes are reflected in the viewer before saving.

  • Consider using the documentViewer.getAnnotationManager().getFieldManager().commitFormValues() method to explicitly commit form field changes.

  • Introduce a slight delay before saving to allow any asynchronous operations to complete.



Here are some resources that might help you:


Hopefully, this helps you solve your problem while you wait for a human to get back to you.

4

Hello @pranish.mac321 ,

Thank you for posting on our forum.

How are you currently listening for changes and saving the XFDF? Typically, when listening to changes you can listen to the fieldChanged event which is triggered whenever the value of a form field changes. You can find more information behind that listener here: https://docs.apryse.com/web/guides/forms/fill-fields#listening-for-widget-events

Alternatively, you can also listen to event changes within the widget attached to the form field. See this section of the guide here: https://docs.apryse.com/web/guides/forms/fill-fields#listening-for-widget-events

If the above solutions do not work, please provide the code snippets related to your saving/exporting logic and we can investigate further.

Best Regards,
Jacob Romano Carlsen
Web Development Support Engineer
Apryse Software Inc.

5

Weā€™re using multiple event listeners in combination to ensure comprehensive change detection:

1. annotationChanged Event (for form field widgets)

Core.annotationManager.addEventListener('annotationChanged', (annotations, action) => {
    if (action === 'render') return; // Ignore visual updates
    
    const hasFormFieldWidgets = annotations.some(annot => 
        annot instanceof Core.Annotations.WidgetAnnotation
    );
    
    scheduleAutoSave(); // Debounced save
});

2. fieldChanged Event (as suggested in your documentation)

Core.annotationManager.addEventListener('fieldChanged', (field, value) => {
    console.log(`Field VALUE changed: ${field?.name} = ${value}`);
    scheduleAutoSave();
});

3. Auto-Save with Debouncing

const scheduleAutoSave = () => {
    if (autoSaveTimeoutRef.current) {
        clearTimeout(autoSaveTimeoutRef.current);
    }
    
    autoSaveTimeoutRef.current = setTimeout(async () => {
        const { blob, xfdfString } = await exportAnnotations();
        onSave(blob, xfdfString);
    }, 2000); // 2-second debounce
};

4. Critical Pre-Export Commit Process

// 1-3: Switch tools to finalize edits
UI.setToolMode('AnnotationEdit');
annotationManager.deselectAllAnnotations();
UI.setToolMode('Pan');

// 4: Commit all field values
fieldManager.getFields().forEach(field => {
    if (field.commit) field.commit(field.getValue(), field.widgets[0]);
});

// 5-6: Refresh and redraw
documentViewer.refreshAll();
annotationManager.drawAnnotationsFromList(annotationManager.getAnnotationsList());

// 7-8: Wait and trigger updates
await new Promise(resolve => setTimeout(resolve, 300));
annotationManager.trigger('annotationChanged', [[], 'render', {}]);

// THEN export XFDF
const xfdfString = await annotationManager.exportAnnotations({
    widgets: true,
    fields: true,
    generateInlineAppearances: true
});

**
After doing above, we are facing issue where if user tries to make modification and save the sign formField / text formField, values are not saved, although this issue is not consistent, this happens sometime, so wanted to commit all values from code before exporting for consistent experience.**

6

Hello @pranish.mac321,

Thank you for the information.

Does this issue only occur specifically with Signature Form Fields? If so, you can also add a listener directly to the SignatureCreateTool. Specifically, you can try the signatureReady event, which will trigger once an annotation has been added to the document. You can find the API doc for the event here: https://sdk.apryse.com/api/web/Core.Tools.SignatureCreateTool.html#event:signatureReady__anchor

Additionally, if you have not already, please consider using our exportAnnotationCommand APIs to track changes. We typically recommend this API when looking for a more ā€œauto-saveā€ or ā€œsave after every actionā€ workflow. This may also help simplify a lot of the listeners that you have set up. See our recommend guide and usage here: https://docs.apryse.com/web/guides/annotation/import-export?tab-0eb9c5a0-b760-4208-932c-4f9661f80fe4=database#export-annotation-command-xfdf

Let us know if these work for you!

Best Regards,
Jacob Romano Carlsen
Web Development Support Engineer
Apryse Software Inc.