How to use a PenInput Image in an HTML text?

[Anonymous]

Hi everybody,

I have to build a few apps in order to digitalize paperwork basically. In order to do so, I need to be able to convert the informations that the user puts in the app to a PDF file that will be sent afterwards. And I also need to get the signature of the user to put it inside said PDF.

I found a way to use Flow to convert into PDF and another one (quiet weird but it works) to save my PenInput inside a SharePoint folder as a png image (the file keeps the same name and is modified everytime a signature is submitted).

My problem is that I cannot find a way to get my signature image back in the Html Text of Power Apps. Besides, the link to the image in SP is modified everytime the image changes (new signature).

I just want to know if there is a way around this. If not, it would be wonderful if PowerApps made it possible somehow because i think a lot of people would benefit of a feature that allows to put a signature done "in app" inside a PDF.

Thanks in advance.

[Anonymous]

CodeHtml

My HTML is really rought but it's just meant to be functional for the moment.

[Anonymous]

Anybody has any idea if this is possible?

[Anonymous]

Hi @Anonymous - can you review the linked post below and let me know if it helps? There is also a link to a Laura Rogers video in the post that may be useful. 

https://powerusers.microsoft.com/t5/General-Discussion/Pen-Input-in-HTML-Document/td-p/206137 

@Anonymous 

[todurant · Accepted solution]

You can do this but it takes some work. First create a flow to turn the image into a base64 file which should go into a SharePoint list item that is a plain text column. Then in your htmltext control you can use some code like this to reference column. 

<object data="&Gallery_AssignedItems.Selected.'HiringManagerSign-post'&" type='image/png' style='width:120px'>
<img style='width:120px' src="&Gallery_AssignedItems.Selected.'HiringManagerSign-post'&"/>
</object>

The 'HiringManagerSign-post' is my SharePoint column with the signature.

Now it will not show up in your htmltext control because that control will strip out the base64 reference but it will still show up in the outputted html and pdf. Hope this helps.

[Anonymous]

Thanks for your answer!

I tried your method but I am stuck. I'm not used to work with HTML and all.

Could you show me how you saved your peninput in base64 in a column? Because I can create a file from my PenInput that will appear in SharePoint but I cannot manage to put the base64 code of the image in a plain text list.

Also, in your HTML, what does this correspond to :

Gallery_AssignedItems.Selected

[todurant]

I created a youtube video on how to create the flow necessary to get the base54 data found here: https://www.youtube.com/watch?v=PFLft7kzvTE

The 'Gallery_AssignedItems.Selected' is just what I used for mine because I created a dashboard so the person could pick out which form the needed to workon because they could be assigned several. You can just straight reference your column with img src="&YOURCOLUMNNAMEHERE&". Once issue you will find is that the image will not show up in the htmltext controller you will have to run your create pdf flow then check the out put. I don't know why but the base64 information gets stripped out of the htmltext control but comes through when you actually output the pdf.

[Luke_Timmins]

@todurant  great video, and I like how you have used the JSON function. 

Have you tried to use the JSON image directly in the HTML rather than using flow to get the based64 value?

Set( ImageJSON, JSON( SampleImage, JSONFormat.IncludeBinaryData ) )

something like above then use the ImageJSON variable in the HTML like this? Im curious if it works. 

"<img src="& ImageJSON & " />"

Thanks, 

Luke

[todurant]

Luke, I have not tried that but I'm interested. This was just what I found worked best for me. Now in my case scenario I have several people signing and approving a form then that gets sent to the next person, the worker is the one who then creates the pdf once they are finished with the process and all they have to do. So I needed a way to store the information but if you have a more efficient way of doing it I would love to see a video 🙂

[Anonymous]

Thanks a lot! I have been struggling with this for weeks, it drove me crazy. Your solution works perfectly. I managed to get my PenInput signatures in my PDF.

I hope this spreads, I think a lot of people could need this.

Thanks again!