signatures

Question

we are looking for a PDF viewer which supports the following requirements:

-signature pad pops up as clicks on signature field

-checks if all signature fields are signed

-if no, prompt and jumps to the one of blank fields

-if yes, enables "submit"

does your PDF viewer support these? can please provider us some samples (asp.net core MVC or Blazor or JS)?

Thanks,

Dhivyabharathi Mohan · Accepted Answer

Hi Peter, 
 
Thank you for contacting Syncfusion support. 
 
Please find the details, 
 




Query 

Details 
 


-signature pad pops up as clicks on signature field 

In our PDF Viewer, the signature pad popup will open while clicking the signature field. We have shared the sample and screenshot for your reference. 
 
Sample: https://stackblitz.com/edit/wvgsy5?file=index.ts  
 
Demo: https://ej2.syncfusion.com/demos/#/material/pdfviewer/hand-written.html  
 
 
Screenshot:  
 
  
 


 
-checks if all signature fields are signed 
-if no, prompt and jumps to the one of blank fields 
-if yes, enables "submit"  
 

 
In our PDF Viewer, we can enable the enableFormFieldValidation property and we can use the validateFormFields event to identify whether all the signature fields in the form fields are filled while downloading. If the signature field is not-filled, we do not have support to prompt and move to the non-filled signature field. However, we can add the signature programmatically in the non-filled signature field by using the given code snippets. After filling the form field data, we need to click the download button in the toolbar to submit the form. We have shared the sample and code snippet for your reference.  
 
 
Sample: https://stackblitz.com/edit/wvgsy5?file=index.ts  
 
Code snippet: 
 




 
viewer.enableFormFieldsValidation = true; 
 
viewer.validateFormFields = args => { 
 
  var nonFillableFields = args.nonFillableFields; 
 
  var formField = viewer.retrieveFormFields(); 
 
  formField[8].signType = 'Draw'; 
 
  formField[8].value = 
    'M202,114 L202,114 L216,109 L225,106 L234,104 L247,100 L261,94 L280,89 L300,82 L318,78 L336,72 L350,65 L359,61 L365,57 L370,53 L372,51 L372,50 L372,50 L372,48 L372,48 L372,47 L372,45 L369,45 L367,45 L365,45 L362,46 L359,48 L356,54 L356,57 L354,64 L352,72 L352,79 L352,87 L352,94 L352,100 L352,106 L352,112 L352,116 L354,119 L355,122 L356,124 L352,125 L347,125 L339,125 L330,125 L321,122 L311,118 L303,114 L298,110 L292,105 L289,100 L288,96 L288,88 L288,82 L288,75 L288,68 L292,63 L294,58 L295,56 L296,54 L297,54 L298,54 L300,54 L301,58 L302,64 L304,71 L306,79 L307,88 L307,98 L307,107 L307,115 L307,122 L306,129 L304,135 L304,137 L302,140 L302,141 L303,141 L306,140 L312,136 L317,132 L326,125 L336,120 L346,114 L358,108 L369,103 L376,100 L384,98 L390,95 L391,94 L391,94 L392,94 L394,94 '; 
 
  viewer.updateFormFieldsValue(formField[8]); 
}; 
 
 
viewer.enableFormFieldsValidation = true; 
viewer.validateFormFields=(args)=> 
        { 
            var formField = viewer.retrieveFormFields(); 
            formField[8].signType = "Image"; 
formField[8].value = "base 64 string”; 
viewer.updateFormFieldsValue(formField[8]); 
        } 
 
 
 
 
 
 
 
Kindly try this and revert us, if you have any concerns. 
 
Regards, 
Dhivya.

peter stone · Answer

Thanks for your reply.one more quick question:what if multiple users sign a doc on the same time? will the signatures be merged?Thanks,

Dhivyabharathi Mohan · Answer

Hi Peter, 
 
 
In our PDF Viewer, each document will be saved separately in the local environment. So, the signature will not be merged if multiple users sign the document at the same time. Kindly revert us, if you want any further assistance. 
 
 
Regards, 
Dhivya.

peter stone · Answer

is there a way to "submit" the signed pdf back to server?Thanks,

Dhivyabharathi Mohan · Answer

Hi Peter,

Yes, we can submit the signed PDF to server by using the given code snippet. We have shared the sample for your reference.

Code snippet:

document.getElementById('save').addEventListener('click', () => {

viewer.download();

});

public IActionResult Download([FromBody] Dictionary<string, string> jsonObject)

{

PdfRenderer pdfviewer = new PdfRenderer(_cache); string documentBase = pdfviewer.GetDocumentAsBase64(jsonObject);

string base64String = documentBase.Split(new string[] { "data:application/pdf;base64," }, StringSplitOptions.None)[1];

if (base64String != null || base64String != string.Empty)

{

byte[] byteArray = Convert.FromBase64String(base64String);

MemoryStream ms = new MemoryStream(byteArray); var path = _hostingEnvironment.ContentRootPath; System.IO.File.WriteAllBytes(path + "/ouptut.pdf", byteArray);

}

return Content(string.Empty);

}

Web service: https://www.syncfusion.com/downloads/support/directtrac/general/ze/PDFViewerWebService-574604965

After executing the web service, run the below sample.

Sample: https://stackblitz.com/edit/h9pn68?file=index.html

Kindly try this and revert us, if you have any concerns.

Regards,

Dhivya.

peter stone · Answer

Thanks for your reply.in our cases, for example, a contract requires buyer's & co-buyer's signatures. -your demo shows  "move the signature using the mouse and place them in the desired location"what we want: the buyer clicks the buyer's signature box, pops up the signature panel, draws the signature, attaches the signature to the buyer's signature box automatically when clicking the "Create".same for co-buyer.is it doable?-based on your reply, seems no way to merge buyer's & co-buyer's signatures to one PDF, if they are signed on different devices. right?Thanks

Dhivyabharathi Mohan · Answer

Hi Peter, 
  
  
In our PDF Viewer, you can add the signature by opening the signature panel in the signature field. All the samples shared before had the signature field. On clicking the signature field, the signature pad will open. You need to sign and click the create button. We have shared the video for adding the signature in the signature field by clicking the create button.   
  
Video: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Form-Filling_Signature-2008009445  
  
  
Demo: https://ej2.syncfusion.com/demos/#/material/pdfviewer/form-filling.html  
  
As we mentioned in our previous update, you can save each document separately in the local environment. So, the signature will not be merged if multiple users sign the document at the same time. If you want the document to be signed by the buyer and the co-buyer on the same document, you must first ask the buyer to sign the document. Then should ask the co-buyer to sign the same document. 
 
  
Kindly try this and revert us, if you have any concerns. 
  
  
Regards, 
Dhivya.

Billing · Answer

How can this be done in a Flutter application?  We are trying to implement these same requirements using your libraries but are finding limitations with the Flutter PDFViewer.

Deepika Ravi · Answer

Hi Billing,Support for rendering and adding a signature field to the Syncfusion Flutter Pdf Viewer will be added in the upcoming Volume 2 main release. The other requirements of signature will be implemented in future. Kindly use the following link for tack the status of the feature,https://www.syncfusion.com/feedback/25265/support-for-pdf-form