Signature Fields

Technical Support
1

Hello!

About PDF.js Express Signature Field | Documentation

Can we have 2 types of signatures fields on the same document?

One for signatures and one for initials for example.

Thanks!

Which product are you using?

PDF.js Express Version

Detailed description of issue
{Description here}

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}

2

Hello, I’m Ron, an automated tech support bot :robot:

While you wait for one of our customer support representatives to get back to you, please check out some of these documentation pages:

Guides:APIs:Forums:

4

Hey there!

Right now we only support standard signature fields (this is part of the PDF spec). If you wanted the user to do an initial instead of a signature you would have to enforce that on your end.

I think you might find this guide useful (this is a WebViewer guide but it applies to PDF.js Express as well). What you could do is change the style of your initial fields to say “Add initials here” or something.

Thanks,
Logan

5

@Logan,

I first put StampAnnotations (with different styles for initials and signature) so the user can choose the locations in the document.

Then I change these StampAnnotations to SignatureWidgetAnnotation, but I can’t create different styles for the signature widgets. When I change to what would be the initials, it also changes to what would be the signature.

That is, I cannot make a SignatureWidgetAnnotation with “Sign here” and another with “Initial here” in the same document.

How could I do this?

6

Hey!

When you create the SignatureWidgetAnnotation, you could insert some custom data on the annotation which you can use to identify which styling the element should have:

    const annot = new Annotations.SignatureWidgetAnnotation(field, {});
    annot.setCustomData("type", "initial"); // set the type of signature here

    const createSignHereElement = Annotations.SignatureWidgetAnnotation.prototype.createSignHereElement;

    Annotations.SignatureWidgetAnnotation.prototype.createSignHereElement = function () {
      // signHereElement is the default one with dark blue background
      const signHereElement = createSignHereElement.apply(this, arguments);

      const type = this.getCustomData("type");

      if (type === "initial") {
        // set initial theme here
      } else {
        // set signature theme here
      }

      return signHereElement;
    };

Thanks,
Logan

1 Like
7

Hi, @Logan!

I’ve tried something like this and it didn’t work.

But it was because I put the SignatureWidgetAnnotation prototype while creating the document and then exporting the xfdf. When I imported the xfdf into another WebViewer, the prototype reverted to the default (white text and blue background).

So I just put the custom SignatureWidgetAnnotation prototype when I want to use the widgets to sign.

Thanks for your help!

1 Like
8

And I didn’t use customData either. :sweat_smile:

9

Glad you figured it out!

Let me know if there’s anything else you need help with