Section:

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

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    // set position and size
38    widgetAnnot.PageNumber = 1;
39    widgetAnnot.X = 100;
40    widgetAnnot.Y = 100;
41    widgetAnnot.Width = 50;
42    widgetAnnot.Height = 20;
43
44    //add the form field and widget annotation
45    annotationManager.getFieldManager().addField(field);
46    annotationManager.addAnnotation(widgetAnnot);
47    annotationManager.drawAnnotationsFromList([widgetAnnot]);
48  });
49});
50
51[Create fillable PDF forms](/web/samples/forms/#form-builder-demo)<br>
52Full sample code demonstrating how to add form fields to a PDF. Fields are first added as annotations and then converted to interactive form fields. Add signatures, text fields, checkboxes.
53
54@CHUNK web/widget-flags

Related Links

Did you find this helpful?

Trial setup questions?

Ask experts on Discord

Need other help?

Contact Support

Pricing or product questions?

Contact Sales