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

JavaScript (SDK v8.0+)

WebViewer(...)
.then(instance => {
  const { annotationManager, Annotations, documentViewer } = instance.Core;
  const { WidgetFlags } = Annotations;

  documentViewer.addEventListener('documentLoaded', () => {
    // Sets flags for the signature widget.
    const flags = new WidgetFlags();
    flags.set(WidgetFlags.REQUIRED, true);

    // Creates a signature form field.
    const field = new Annotations.Forms.Field('SignatureFormField 1', { 
      type: 'Sig', 
      flags,
    });

    // Creates a signature widget annotation.
    const widgetAnnot = new Annotations.SignatureWidgetAnnotation(field, {
      appearance: '_DEFAULT',
      appearances: {
        _DEFAULT: {
          Normal: {
            // Optionally can pass image data to appearance.
            // data: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAYdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjEuMWMqnEsAAAANSURBVBhXY/j//z8DAAj8Av6IXwbgAAAAAElFTkSuQmCC',
            offset: {
              x: 100,
              y: 100,
            },
          },
        },
      },
    });

    widgetAnnot.PageNumber = 1;
    widgetAnnot.X = 100;
    widgetAnnot.Y = 100;
    widgetAnnot.Width = 100;
    widgetAnnot.Height = 50;

    // Add form field to field manager and widget annotation to annotation manager.
    annotationManager.getFieldManager().addField(field);
    annotationManager.addAnnotation(widgetAnnot);
    annotationManager.drawAnnotationsFromList([widgetAnnot]);
  });
});

Annotations.WidgetFlags Annotations.Forms.Field Annotations.SignatureWidgetAnnotation Annotations.WidgetAnnotation AnnotationManager.addAnnotation AnnotationManager.drawAnnotationsFromList AnnotationManager.getFieldManager FieldManager.addField

JavaScript (SDK v6.0+)

WebViewer(...)
  .then(instance => {
    const { docViewer, annotManager, Annotations } = instance;

    docViewer.on('documentLoaded', () => {
      // create field and widget annotations here
    });
  });

DocumentViewer#documentLoaded

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

WebViewer(...)
.then(instance => {
  const { annotationManager, Annotations } = instance.Core;
  const { WidgetFlags } = Annotations;

  // myBtn is your own custom button
  document.getElementById('myBtn').addEventListener('click', () => {

    // set flags for required
    const flags = new WidgetFlags();
    flags.set('Required', true);

    // create a form field
    const field = new Annotations.Forms.Field("some signature field name", { 
      type: 'Sig', 
      flags,
    });

    // create a widget annotation
    const widgetAnnot = new Annotations.SignatureWidgetAnnotation(field, {
      appearance: '_DEFAULT',
      appearances: {
        _DEFAULT: {
          Normal: {
            offset: {
              x: 100,
              y: 100,
            },
          },
        },
      },
      // If this option is passed, the widget will apply any 
      // initials created by the user in the Signature Modal
      requiresInitials: true,
    });
    
    // to show the 'initials' field indicator on widget import
    widgetAnnot.setCustomData('trn-signature-type', 'initialsSignature')

    // set position and size
    widgetAnnot.PageNumber = 1;
    widgetAnnot.X = 100;
    widgetAnnot.Y = 100;
    widgetAnnot.Width = 50;
    widgetAnnot.Height = 20;

    //add the form field and widget annotation
    annotationManager.getFieldManager().addField(field);
    annotationManager.addAnnotation(widgetAnnot);
    annotationManager.drawAnnotationsFromList([widgetAnnot]);
  });
});

Annotations.WidgetFlags Annotations.Forms.Field Annotations.SignatureWidgetAnnotation Annotations.WidgetAnnotation AnnotationManager.addAnnotation AnnotationManager.drawAnnotationsFromList AnnotationManager.getFieldManager FieldManager.addField

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.