Some test text!

Loading...
Guides

Create signature field and signature widget annotation using JavaScript

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

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

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

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 .

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

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

Create fillable PDF forms
Full 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.

Available widget flags are:

  • ReadOnly
  • Required
  • NoExport
  • Multiline
  • Password
  • NoToggleToOff
  • Radio
  • PushButton
  • Combo
  • Edit
  • DoNotScroll
  • RadiosInUnison

Get the answers you need: Support

Upcoming Webinar: Customer Experience and Retaining Control: Boosting Document Automation and Efficiency in Financial Services | Sept 15, 2022 at 11 am PT

PDFTron SDK

The Platform

NEW

© 2022 PDFTron Systems Inc. All rights reserved.

Privacy

Terms of Use