Create signature field and signature widget annotation using JavaScript

To create a new signature field with required flag and a signature widget annotation.

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    });
33
34    // set position and size
35    widgetAnnot.PageNumber = 1;
36    widgetAnnot.X = 100;
37    widgetAnnot.Y = 100;
38    widgetAnnot.Width = 50;
39    widgetAnnot.Height = 20;
40
41    //add the form field and widget annotation
42    annotationManager.getFieldManager().addField(field);
43    annotationManager.addAnnotation(widgetAnnot);
44    annotationManager.drawAnnotationsFromList([widgetAnnot]);
45  });
46});

1WebViewer(...)
2.then(instance => {
3  const { annotManager, Annotations } = instance;
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            data:
26              'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAYdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjEuMWMqnEsAAAANSURBVBhXY/j//z8DAAj8Av6IXwbgAAAAAElFTkSuQmCC',
27            offset: {
28              x: 100,
29              y: 100,
30            },
31          },
32        },
33      },
34    });
35
36    // set position and size
37    widgetAnnot.PageNumber = 1;
38    widgetAnnot.X = 100;
39    widgetAnnot.Y = 100;
40    widgetAnnot.Width = 50;
41    widgetAnnot.Height = 20;
42
43    //add the form field and widget annotation
44    annotManager.getFieldManager().addField(field);
45    annotManager.addAnnotation(widgetAnnot);
46    annotManager.drawAnnotationsFromList([widgetAnnot]);
47  });
48});

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});

Did you find this helpful?

Trial setup questions?

Ask experts on Discord

Need other help?

Contact Support

Pricing or product questions?

Contact Sales

Product:

Product:

Create signature field and signature widget annotation using JavaScript

Related Links

Related Links

Creating a signature widget to accept initials

JavaScript

Related Links

On this page