Add PDF SignHere Field

Technical Support
1

Which product are you using?
PDF.js Express Plus

PDF.js Express Version
8.7.4

Detailed description of issue
How to add signature fields to PDF document ? Is there a widget in the insert section to select and add the field ?

Expected behaviour
{Provide a screenshot or description of the expected behaviour}

Does your issue happen with every document, or just one?
{Answer here}

Link to document
{Provide a link to the document in question if possible}

Code snippet
{Provide a relevant code snippet}

3

Hi there,

You can add signature fields programatically via the following:

const instance = window.WebViewer.getInstance()
const { UI, Core } = instance;
const { documentViewer, Annotations, annotationManager,  } = Core
const WidgetFlags = Annotations.WidgetFlags

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

Best regards,
Kevin Kim

5

Thanks Kevin
This adds it a random position on the page. How do I create the field where I intend to place it?

6

You could use the mouseLeftUp event from the documentViewer as an example and then apply the above code using the mouse coordinates from getPDFCoordinatesFromMouseEvent to place the signature field there:
https://pdfjs.express/api/Core.DocumentViewer.html#event:mouseLeftUp
https://pdfjs.express/api/Core.DocumentViewer.html#getPDFCoordinatesFromMouseEvent