You are viewing limited content. For full access, please sign in.

Question

Question

show signature image inside html

Laserfiche Version 11 Forms Forms Layout Designer
Updated April 1
asked on March 28 • Show version history

I am designing the final form in HTML that will be sent to the client and a copy will be saved on the server once all the processes and instances through which all the information must pass are finished.
So far I have managed to place all the elements through the Tokens without any problem, except the Signatures.
Is there a way to insert signatures into the HTML code as appropriate for each person who signs the final document? and that they are obviously shown as images.

I am working with Laserfiche Professional Version 11.0.2311.50553
I am designing the form with the modern design.

I have tried to use a code that has already been published here at this link https://answers.laserfiche.com/questions/126477/Display-SIgnature-within-Custom-HTML#126618  ,but for my purpose it does not work or at least I have not been able to accommodate it.

Any suggestions please?

0 0

Answer

SELECTED ANSWER
replied on March 29

In this scenario, we typically recommend creating a form specifically for the save to repository step (or in your case the final form) where it is styled with CSS to look exactly like you want it to. Because you have done all this work already, the below code should allow you to inject the signature image into the html modify it for any additional signatures you have.
 

Change line 1 to be the field Id of your custom html field. In the html of the custom html field, add a class to where you want the new image element to go. If you dont use the class name on line 2 update it in the script.

const pdfHtmlId = { fieldId: 13 };
const signatureHtmlContainerClass = 'signature-field-1';

const existingHtml = LFForm.findFieldsByFieldId(pdfHtmlId.fieldId)[0].settings
  .default;
const dummyDom = document.createElement('div');
dummyDom.innerHTML = existingHtml;
const signatureField = dummyDom.getElementsByClassName(
  signatureHtmlContainerClass
);
if (signatureField.length === 0) {
  console.error('No signature field found');
  return;
}
const signatureImage = LFForm.getFieldValues({ fieldId: 2 });
const imageDom = document.createElement('img');
imageDom.src = signatureImage;
signatureField[0].appendChild(imageDom);
LFForm.changeFieldSettings({ fieldId: 13 }, { content: dummyDom.innerHTML });

 

2 0

Replies

replied on March 29

That other post you linked has Javascript for the classic designer, it won’t work in the new designer.

Can you explain a little more what you are trying to do?  Why you are trying to display the signature inside a Custom HTML element instead of just displaying a read-only version of the signature field?

Just kind of confused why you would need to put the signature into a custom HTML field.  It might not be possible, or could be rather difficult, and I just want to make sure we’re understanding the “why” before we attempt to figure out the “how”.

2 0
View 3 previous replies
replied on March 29

Hi Matthew, thank you for your answer. 

The main reason for putting the signature within the HTML is because the client wants the final form to resemble in format the same one they have already designed on paper, so that the end client will not find it strange to see when they receive their digital copy. .
So in order for me to be able to design the form with the same visuality or similar to the form they have on paper, the only way I know is to do it through CSS and HTML code to give it a visuality very similar to the one in which the paper form exists.
For this reason, I am designing a form with the sole objective of filling in the information of the Tokens that would already be stored in the database from the beginning or during the different stages that the form would go through to in the end give the end user all the information. information you need to receive in the format closest to the paper form.

I'll give you an example image of what I'm trying to do. Where I circle you in red is where I am supposed to put the signature so that when the client receives that PDF form the image of the signature is displayed in that place, so I don't know how to do that part. Any suggestions you can give me would be very helpful.

 

csignature.png
csignature.png (331.22 KB)
Download
1 0
SELECTED ANSWER
replied on March 29

In this scenario, we typically recommend creating a form specifically for the save to repository step (or in your case the final form) where it is styled with CSS to look exactly like you want it to. Because you have done all this work already, the below code should allow you to inject the signature image into the html modify it for any additional signatures you have.
 

Change line 1 to be the field Id of your custom html field. In the html of the custom html field, add a class to where you want the new image element to go. If you dont use the class name on line 2 update it in the script.

const pdfHtmlId = { fieldId: 13 };
const signatureHtmlContainerClass = 'signature-field-1';

const existingHtml = LFForm.findFieldsByFieldId(pdfHtmlId.fieldId)[0].settings
  .default;
const dummyDom = document.createElement('div');
dummyDom.innerHTML = existingHtml;
const signatureField = dummyDom.getElementsByClassName(
  signatureHtmlContainerClass
);
if (signatureField.length === 0) {
  console.error('No signature field found');
  return;
}
const signatureImage = LFForm.getFieldValues({ fieldId: 2 });
const imageDom = document.createElement('img');
imageDom.src = signatureImage;
signatureField[0].appendChild(imageDom);
LFForm.changeFieldSettings({ fieldId: 13 }, { content: dummyDom.innerHTML });

 

2 0
replied on March 29

Well, after several hours racking my brain looking for a solution at the code level, and variables and etc. I have found a possible solution to my problem, which may not be the right one or the most indicated, but by applying a little logic and some CSS it could work for anyone.

My interest was to export the data related to the final form to PDF in a format similar to how the form is designed in its paper version and send it via email, in addition to saving it in the repository, in order to achieve this I needed to obtain the signature in image that I could adjust and fit where I needed it according to the design of the paper form.

I realized that in this case, I could solve it by using two HTML tools instead of one where everything was joined together, and between these two HTML blocks place the Signature tool in Read Only and show the variable of the date that was signed next to it, taking advantage of the benefits of the new modern form design interface. That way using the Signature tool as read-only I could display the signature image as I needed.

The next thing was to readjust via CSS the positions and distances of the HTML blocks and the styles so that all the information was seen as needed.

Here I leave you a cut of the form in editing mode and then the result.

Thank you very much for having answered my concern, likewise, any solution that could be better applied is welcome.

csignature2.png
csignature3.png
csignature2.png (211.75 KB)
Download
csignature3.png (121.05 KB)
Download
1 0
replied on March 29 • Show version history

That works! Looks great. You can also add some css to keep your gray borders consistent.

1 0
replied on April 1

I’m so glad you found a solution that works for you!

1 0
replied on April 1

Hi, thank you Zachary St. Louis and Matthew Tingey Thank you very much for taking the time to respond to me.
Zachary, I have marked the code you posted above as an answer and solution, I have tried it and it has been wonderful. It has worked perfectly.

Thank you very much again for the help you both have given me.

1 0
You are not allowed to follow up in this post.

Sign in to reply to this post.

Details
Attachments
Related Posts
Loading ...