You can iterate over all fields using the forEachField function of FieldManager
.
WebViewer(...)
.then(instance => {
const { documentViewer, annotationManager } = instance.Core;
documentViewer.addEventListener('documentLoaded', () => {
documentViewer.getAnnotationsLoadedPromise().then(() => {
// iterate over fields
const fieldManager = annotationManager.getFieldManager();
fieldManager.forEachField(field => {
console.log(field.getValue());
field.setValue('new value');
});
});
});
});
Access fields by id
You can access any field by its field id:
WebViewer(...)
.then(instance => {
const { documentViewer, annotationManager } = instance.Core;
documentViewer.addEventListener('documentLoaded', () => {
documentViewer.getAnnotationsLoadedPromise().then(() => {
const fieldManager = annotationManager.getFieldManager();
const field = fieldManager.getField(fieldId);
field.setValue('new value');
});
});
});
Listen for field changes
The fieldChanged event is fired any time the value of a form field changes.
WebViewer(...)
.then(instance => {
const { annotationManager } = instance.Core;
annotationManager.addEventListener('fieldChanged', (field, value) => {
console.log('Field changed: ' + field.name + ', ' + value);
});
});
Modify fields to readonly
The following code sets all fields to readonly when the document is loaded. The annotationChanged event is triggered when the annotations are added to the document and checking the action and e.imported
ensures that they changed because of an import into the document and not because of a user modification.
WebViewer(...)
.then(instance => {
const { documentViewer, annotationManager, Annotations } = instance.Core;
annotationManager.addEventListener('annotationChanged', (annotations, action, e) => {
// if the annotation change occurs because of an import then
// these are fields from inside the document
if (action === 'add' && info.imported) {
annotations.forEach((annot) => {
if (annot instanceof Annotations.WidgetAnnotation) {
annot.fieldFlags.set('ReadOnly',
});
}
});
});