Validating Signature Field on Web

WebViewer Version: latest

Do you have an issue with a specific file(s)? Signature
Can you reproduce using one of our samples or online demos? Yes, https://github.com/PDFTron/pdftron-sign-app/blob/a7ef00ada6bbdb838da6604301c77f28e5513235/src/components/SignDocument/SignDocument.js
Are you using the WebViewer server? No
Does the issue only happen on certain browsers? No
Is your issue related to a front-end framework? Yes
Is your issue related to annotations? Yes

Please give a brief summary of your issue:
I have a component that I have created specifically for signing documents. However, I have not been able to figure out how to verify that a change as actually been made to a signature field by a user.

I am using the field manager to iterate over the list of fields. I have tried pulling contents or a value from both the widget and the field and haven’t had any luck.

Any ideas on how I can use the web api to ensure that a user has signed the field before I go and export it and save?

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:

Hello Mason,

Using the FieldManager API you can validate whether or not the signature field has been filled by setting a required flag and calling FieldManager.areRequiredFieldsFilled(). Here is a code snippet:

const { docViewer, annotManager, UI } = instance;
const signatureWidget = new Annotations.SignatureWidget();
signatureWidget.fieldFlags.set('Required', false);
annotManager.getFieldManager().areRequiredFieldsFilled();

Please let me know if this doesn’t work for you.

Check your ticket status - https://support.pdftron.com/support/tickets/26269

Best Regards,

Ahmad Moaaz

Software Developer

PDFTron Systems, Inc.

www.pdftron.com

Hi Ahmad,

I have made sure that the fields have a required flag set to true. It outlines the field in a red box indicating that the field is required. However, when i click the sign here button and sign annotManager.getFieldManager().areRequiredFieldsFilled(); still returns false.

Here is a snippet of how we generate the signature field:

if (annot.getCustomData('type') === 'Sig') {
    3           const flags = new WidgetFlags({});
    2           flags.set('Required', true);
    1           field = new Annotations.Forms.Field(
  381             annot.getContents(),
    1             {
    2               type: 'Sig',
    3               flags: flags,
    4             },
    5           );
    6           inputAnnot = new Annotations.SignatureWidgetAnnotation(field, {
    7             appearance: '_DEFAULT',
    8             appearances: {
    9               _DEFAULT: {
   10                 Normal: {
   11                   data:
   12                     'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAYdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjEuMWMqnEsAAAANSURBVBhXY/j//z8DAAj8Av6IXwbgAAAAAElFTkSuQmCC',
   13                   offset: {
   14                     x: 100,
   15                     y: 100,
   16                   },
   17                 },
   18               },
   19             },
   20           });
   21         }

When attempting to create the signature widget the way you described above with:

const signatureWidget = new Annotations.SignatureWidget();

I receive the following error:

Annotations.SignatureWidget is not a constructor

For more context in order to prepare a document for signing I implemented the concepts here https://github.com/PDFTron/pdftron-sign-app/blob/a7ef00ada6bbdb838da6604301c77f28e5513235/src/components/PrepareDocument/PrepareDocument.js using angular.

Hi Mason,

The code sample from above was just an example. Here is a fully working code sample.

Webviewer({...}, document.getElementById('viewer'))
  .then(instance => {
    const { docViewer, annotManager, UI } = instance;
    docViewer.addEventListener("documentLoaded", () => {
      const flags = new instance.Core.Annotations.WidgetFlags({});
      flags.set('Required', true);
      let field = new instance.Core.Annotations.Forms.Field(
        "field1Test",
        {
          type: 'Sig',
          flags: flags,
        },);
      let inputAnnot = new instance.Core.Annotations.SignatureWidgetAnnotation(field, {
        appearance: '_DEFAULT',
        appearances: {
          _DEFAULT: {
            Normal: {
              data:
                'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAYdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjEuMWMqnEsAAAANSURBVBhXY/j//z8DAAj8Av6IXwbgAAAAAElFTkSuQmCC',
              offset: {
                x: 100,
                y: 100,
              },
            },
          },
        },
      });

      inputAnnot.PageNumber = 1;
      inputAnnot.X = 100;
      inputAnnot.Y = 100;
      inputAnnot.Width = 50;
      inputAnnot.Height = 20;

      annotManager.addAnnotation(inputAnnot);
      annotManager.drawAnnotationsFromList([inputAnnot]);
      annotManager.getFieldManager().addField(field);
    });

  });

As for the areRequiredFieldsFilled, it will return true if all required fields are filled (not just the signature). If you are still having issues using this method, please send all related Webviewer code so I can debug it on my side.

Check your ticket status - https://support.pdftron.com/support/tickets/26269

Best Regards,
Ahmad Moaaz
Software Developer
PDFTron Systems, Inc.
www.pdftron.com