How to Append Pen Input Signature to PDF or HTML Page

[aebara]

Hi all, 

I am creating an app where users can view a handful of forms that need to be signed. I would like to use a single pen input to fill all of these documents in the proper position. Currently the forms are DOCX files. I'm not sure how to proceed. Would it make logical sense to convert these documents to HTML files? I tried doing that, but kept getting errors when I would put my HTML code in the OnSelect() property of a button.

As far as I can tell, my options are to convert the documents to HTML, or create a new document encompassing all the old ones, or possibly I can create a template out of the word documents and fill the input areas with Flow. Any advice on accomplishing this would be appreciated. I attached a screenshot of my current Flows which are very close to what I need. The short flow works fine, but I want it to work more like the longer one.

Summary: I have the app, and flow setup to extract signatures to a file in SharePoint, or OneDrive. I now need to find a way to append these signatures to the proper location on a DOCX, or HTML file.

Thank you!

[WarrenBelz]

Hi @aebara ,

I see you are using the Word Merge, so the premium connector is not an issue. This process is not difficult and can be approached several ways. One is to

• Convert the (I assume) pen image to Base64 with JSON and send this in the Flow
• Create a temporary file in OneDrive (base64ToBinary conversion)
• Get the content of that file and use in the Image merge field in the Word document.

If you look at this part of my blog on Images, you can use that same code output for the above.

Please click Accept as solution if my post helped you solve your issue. This will help others find it more readily. It also closes the item. If the content was useful in other ways, please consider giving it Thumbs Up.

Visit my blog Practical Power Apps

[aebara]

Hey @WarrenBelz,

That's pretty close, thank you!

I am successfully saving signatures from pen input to a .jpg using flow.

Now the last part I need to learn is that 3rd bullet point... Taking the content from pen input, and stamping it into a specific location on the Word document, or PDF. Unfortunately, I didn't find anything in your blog related to this. Do you have any ideas on how to accomplish this?

I tried adding a couple plain text context controls which seems to give me mapped fields I can use in Flow. However, whenever I try this method, my flow fails. I'm almost certain there's something I'm not doing correctly in Flow.

Any ideas on how to accomplish this?

Thanks again. 

[WarrenBelz · Accepted solution]

Hi @aebara ,

Yours is actually fairly easy if you have already saved it as a JPG - I store mine in multiline text fields using JSON to Base64 and then send that to the flow as described in my first post. All you have to do is get the file content of the JPG

and put this in an image merge field. Below is a Production form of mine with a signature in it

Please click Accept as solution if my post helped you solve your issue. This will help others find it more readily. It also closes the item. If the content was useful in other ways, please consider giving it Thumbs Up.

Visit my blog Practical Power Apps

[WarrenBelz]

Hi @aebara ,

Just checking if you got the result you were looking for on this thread. Happy to help further if not.

Please click Accept as solution if my post helped you solve your issue. This will help others find it more readily. It also closes the item. If the content was useful in other ways, please consider giving it Thumbs Up.

Visit my blog Practical Power Apps

[aebara]

Hey @WarrenBelz,

Yes, thanks to your help, I was able to accomplish my goals with this portion of my project.

Thank you!