Section:

Create Signature Fields

Signature fields and widget annotations can be added programmatically. There are several properties and widget flags as highlighted below:

Signature widget flags

Widget flag

Description

Unique to signature?

READ_ONLY

The field value cannot be changed.

No

REQUIRED

The field must have a value when exported.

No

Signature sample code

1WebViewer(...)
2.then(instance => {
3  const { annotationManager, Annotations, documentViewer } = instance.Core;
4  const { WidgetFlags } = Annotations;
5
6  documentViewer.addEventListener('documentLoaded', () => {
7    // Sets flags for the signature widget.
8    const flags = new WidgetFlags();
9    flags.set(WidgetFlags.REQUIRED, true);
10
11    // Creates a signature form field.
12    const field = new Annotations.Forms.Field('SignatureFormField 1', { 
13      type: 'Sig', 
14      flags,
15    });
16
17    // Creates a signature widget annotation.
18    const widgetAnnot = new Annotations.SignatureWidgetAnnotation(field, {
19      appearance: '_DEFAULT',
20      appearances: {
21        _DEFAULT: {
22          Normal: {
23            // Optionally can pass image data to appearance.
24            // data: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAYdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjEuMWMqnEsAAAANSURBVBhXY/j//z8DAAj8Av6IXwbgAAAAAElFTkSuQmCC',
25            offset: {
26              x: 100,
27              y: 100,
28            },
29          },
30        },
31      },
32    });
33
34    widgetAnnot.PageNumber = 1;
35    widgetAnnot.X = 100;
36    widgetAnnot.Y = 100;
37    widgetAnnot.Width = 100;
38    widgetAnnot.Height = 50;
39
40    // Add form field to field manager and widget annotation to annotation manager.
41    annotationManager.getFieldManager().addField(field);
42    annotationManager.addAnnotation(widgetAnnot);
43    annotationManager.drawAnnotationsFromList([widgetAnnot]);
44  });
45});

Related Links

Creating a signature widget to accept initials

Starting in WebViewer 8.9, you can create a Signature Widget that accepts initials. If a signature widget is flagged as requiresInitials, it will apply the initials created by the user in the signature modal. This optional parameter can be passed when instantiating a Signature Widget. Please note that the initials feature must be enabled in order for this to be displayed in the viewer. For a sample on how to do this refer to this guide.

JavaScript

1WebViewer(...)
2.then(instance => {
3  const { annotationManager, Annotations } = instance.Core;
4  const { WidgetFlags } = Annotations;
5
6  // myBtn is your own custom button
7  document.getElementById('myBtn').addEventListener('click', () => {
8
9    // set flags for required
10    const flags = new WidgetFlags();
11    flags.set('Required', true);
12
13    // create a form field
14    const field = new Annotations.Forms.Field("some signature field name", { 
15      type: 'Sig', 
16      flags,
17    });
18
19    // create a widget annotation
20    const widgetAnnot = new Annotations.SignatureWidgetAnnotation(field, {
21      appearance: '_DEFAULT',
22      appearances: {
23        _DEFAULT: {
24          Normal: {
25            offset: {
26              x: 100,
27              y: 100,
28            },
29          },
30        },
31      },
32      // If this option is passed, the widget will apply any 
33      // initials created by the user in the Signature Modal
34      requiresInitials: true,
35    });
36    
37    // to show the 'initials' field indicator on widget import
38    widgetAnnot.setCustomData('trn-signature-type', 'initialsSignature')
39
40    // set position and size
41    widgetAnnot.PageNumber = 1;
42    widgetAnnot.X = 100;
43    widgetAnnot.Y = 100;
44    widgetAnnot.Width = 50;
45    widgetAnnot.Height = 20;
46
47    //add the form field and widget annotation
48    annotationManager.getFieldManager().addField(field);
49    annotationManager.addAnnotation(widgetAnnot);
50    annotationManager.drawAnnotationsFromList([widgetAnnot]);
51  });
52});

Related Links

Learn More

Annotations and fields should be added to the document only after the document has finished loading. See Create New Form Fields Overview for more.

Did you find this helpful?

Trial setup questions?

Ask experts on Discord

Need other help?

Contact Support

Pricing or product questions?

Contact Sales