Signature Field Saving and Re-Loading

Greetings!


Having some trouble figuring out how to get the Signature fields, namely the ones that look like Below, to Save or Re Load onto the pdf. 



So far, the only kind of signature that I've been able to get to stay on the PDF is a Handwritten signature after Downloading it. I've noticed that base64 json won't display the Signature Field - neither Handwritten or above acrofields. Would that mean that the information about signatures would be coming from the ExportAnnotations action result? I haven't been able to figure out how to call that Action. 

Controller actions for reference, 



Some other questions I have:

  1. Is it possible to remove/hide the options for a Type and Upload Signature?
  2. Export Form Fields is having an issue where the base 64 string doesn't contain the filled in values for the respective form fields. Is by design currently? I get around this by having my own export function that loops through the values of formFieldCollections, applies those values to a clean version of the pdf, and post a new pdf base64 string of the pdf onto the onload.
  3. After applying a draw signature onto the SignatureField, an inline SVG tag is generated on the DOM. I've been able to cross reference this to the value of SignatureFields in formFieldCollection, but in formFieldCollections​, that value is a parsed version of the d attribute of the path tag. Is that what's supposed to be read in the Export / Import Annotations Action? 




Any help would be greatly appreciated,

Shannon


3 Replies

VS Vasugi Sivajothi Syncfusion Team October 25, 2021 12:29 PM UTC

Hi Shannon, 
 
Thank you for contacting Syncfusion support. 
 
Please find the details. 
 
Query 
Details 
 
Having some trouble figuring out how to get the Signature fields, namely the ones that look like Below, to Save or Re Load onto the pdf.  
 
So far, the only kind of signature that I've been able to get to stay on the PDF is a Handwritten signature after Downloading it. I've noticed that base64 json won't display the Signature Field - neither Handwritten or above acrofields. Would that mean that the information about signatures would be coming from the ExportAnnotations action result? I haven't been able to figure out how to call that Action.  
 
 
You can only export the annotations using the ExportAnnotation method. You can’t be able to export the signatures in the PDF Viewer. This is the default behavior of the PDF Viewer. However, you can get the signature using the retrieveFormFields() method. Please refer to the below code snippet. 
 
Code Snippet: 
 
var formField = pdfViewer.retrieveFormFields(); 
 
console.log(formField[8].value); 
 
 
 
 
 
Is it possible to remove/hide the options for a Type and Upload Signature? 
 
 
Yes. You can customize the signature panel using the signatureFieldSettings property. However, currently, we have facing an issue with the signatureFieldSettings property. The fix for the reported issue will be included in our weekly release on November 3rd, 2021. You can track the status using the below feedback link.   
   
 
 
  1. Export Form Fields is having an issue where the base 64 string doesn't contain the filled in values for the respective form fields. Is by design currently? I get around this by having my own export function that loops through the values of formFieldCollections, applies those values to a clean version of the pdf, and post a new pdf base64 string of the pdf onto the onload.
 
 
 
We suspect that the reported issue is due to exporting the signature in the PDF Viewer. As we mentioned in the first update, you can’t be able to export the signature. However, you can get the signature using the retrieveFormFields method. 
After applying a draw signature onto the SignatureField, an inline SVG tag is generated on the DOM. I've been able to cross reference this to the value of SignatureFields in formFieldCollection, but in formFieldCollections​, that value is a parsed version of the d attribute of the path tag. Is that what's supposed to be read in the Export / Import Annotations Action?  
 
We will draw the signature in the canvas using the mouse position and get the X and Y coordinates of the mouse down position then we will create the signature based on that coordinate. So, the path of the signature is represented as the X and Y coordinates. You can add the signature programmatically in the signature field using the updateFormFieldsValue() method.  Please refer to the below code snippet and sample. 
 
To Update the signatures from code behind:  
 
Draw: 

var formField = viewer.retrieveFormFields(); 
formField[8]. signatureType = “Draw”; 
formField[8].value = ""; // Provide the path value. 
viewer.updateFormFieldsValue(formField[8]); 
 
Type: 
 
var formField = viewer.retrieveFormFields(); 
formField[8].signatureType = “Type”;             
formField[8].value = "name"; // Provide the name 
formField[8].fontName = "Symbol"; 
viewer.updateFormFieldsValue(formField[8]); 
 
Image: 
 
var formField = viewer.retrieveFormFields(); 
formField[8].signatureType= “Image”;            
formField[8].value = ""; // Provide the base64 string 
viewer.updateFormFieldsValue(formField[8]); 



 
 
 
 
 
 
Please let us know if you have any concerns about this. 
 
Regards, 
Vasugi. 



SM Shannon McCune October 25, 2021 01:11 PM UTC

Thank you, Vasugi! This is really helpful!

Is the only way to set the Signature Field value by Javascript? Is there no way to set the path value in C# for a byte[] / base64 string conversion?



VS Vasugi Sivajothi Syncfusion Team October 27, 2021 03:02 AM UTC

Hi Shannon, 
 
Thank you for the update. Currently, there is no direct support to set the Signature Field value at the server-side. However, we have internally handled to save the path value to the signature field as an ink annotation. If you add the signature field value at the client-side, then we have saved that value in the signature field as an ink annotation in download action while downloading the document. So, if you want to add the signature field value in C#, then you can achieve this as a workaround in the following ways. 
 
  1. Download the form field document
  2. In server-side controller, you need to add the path value and save it as an ink annotation in the signature field with the document
 
Could you please confirm whether you want the above steps to achieve your requirement? If not, please share the exact requirement with more details. This will be helpful to investigate further and provide the solution at the earliest. 
 
Regards, 
Vasugi. 


Loader.
Up arrow icon