cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
Highlighted
Devildez
Level: Powered On

How to use a PenInput Image in an HTML text?

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.

2 ACCEPTED SOLUTIONS

Accepted Solutions
todurant
Level: Powered On

Re: How to use a PenInput Image in an HTML text?

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.

View solution in original post

todurant
Level: Powered On

Re: How to use a PenInput Image in an HTML text?

You wont believe this but there is an even easier way to do this without Flow.

https://youtu.be/5VtCHgLCQn4

 

View solution in original post

15 REPLIES 15
Devildez
Level: Powered On

Re: How to use a PenInput Image in an HTML text?

CaptureHTML.PNGCodeHtml

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

Devildez
Level: Powered On

Re: How to use a PenInput Image in an HTML text?

Anybody has any idea if this is possible?

TopShelf-MSFT
Level 10

Re: How to use a PenInput Image in an HTML text?

Hi @Devildez - 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 

 

@TopShelf-MSFT 

todurant
Level: Powered On

Re: How to use a PenInput Image in an HTML text?

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.

View solution in original post

Devildez
Level: Powered On

Re: How to use a PenInput Image in an HTML text?

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
Level: Powered On

Re: How to use a PenInput Image in an HTML text?

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
Level 8

Re: How to use a PenInput Image in an HTML text?

@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
Level: Powered On

Re: How to use a PenInput Image in an HTML text?

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 🙂

Devildez
Level: Powered On

Re: How to use a PenInput Image in an HTML text?

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!

Helpful resources

Announcements
thirdimage

Power Automate Community User Group Member Badge

Fill out a quick form to claim your user group badge now!

sixthImage

Power Platform World Tour

Find out where you can attend!

Power Platform 2019 release wave 2 plan

Power Platform 2019 release wave 2 plan

Features releasing from October 2019 through March 2020

fifthimage

Microsoft Learn

Learn how to build the business apps that you need.

Top Kudoed Authors (Last 30 Days)
Users online (7,006)