web
You’re offline. This is a read only version of the page.
close
Skip to main content

Announcements

News and Announcements icon
Community site session details

Community site session details

Session Id :
Power Platform Community / Forums / Power Apps / Pen Input in HTML Docu...
Power Apps
Answered

Pen Input in HTML Document

(0) ShareShare
ReportReport
Posted on by 22

Hi,

 

  I have an app that generates a Purchase Order in HTML format and then emails it out.  I can include a signature as an attachment in the email but not the body of the HTML document.  I know there are shortcuts to add the signature image to a sharepoint list and I have setup my app to collect the signature in a collection in the app.  I can go to my collections and see the image of the signature there but how do I get the image to display in the body of my HTML document instead of as an attachment?

Categories:
I have the same question (0)
  • v-micsh-msft Profile Picture
    Microsoft Employee on at

    Hi @lyoung,

     

    Thanks for the information.

    Currently there is no direct way to have the Pen Input control to be putted into HTML control in PowerApps. We need take use of Microsoft Flow to have the image combined with the HTML, please refer to the following blogs:

    Creating Printable PDF's of PowerApps screen which contain PenInput controls.

    Please note: This URL contains 3rd-party sources, the content is provided AS IS, there is no guarantee of the changes/Updates.

     

    The logic here is:

    1. Save the image file into Azure Blob, then generate the Azure Blob image URL (which could be accessible through HTTPs after authentication ), then take use of Convert HTML to PDF action, after that, save the created PDF as an Email Attachment.

    I didn't try out putting the image URL directly within the HTML format of the Email, which suppose to work as well.

    Best regards,

  • lyoung Profile Picture
    22 on at

    Thank you @v-micsh-msft for the information but I have two issues with the solution you provided.  First is that it still requires a third party program that is not free Muhimbi and the trial is not feesible on a large scale.  Second is that we use a hybrid setup to sync Azure with our local system so there is no option to create a blob storage in Azure admin unless we are willing to pay again.  All I am trying to do is embed the signature in a document for printing purpose.  I could care less if it is email, html, word, or a PDF. It is ridiculous that this is such a difficult task to accomplish.

  • lyoung Profile Picture
    22 on at

    This works for me and it even embeds the Signature image in the body of the email...WooHoo thanks to Laura Rogers video SharePoint Power Hour: PowerApps Pen Input, Signatures

     

    Solved by having a button with the OnSelect Property set to:

     

    'Outlook.com'.SendEmail(
     "lyoung@weilerproducts.com",
     "New",
     "<p>
     <h2 align=""center"">Weiler Employee Gear Order Form</h2>" &
    "<h3> Employee Info: </h3>" &
    "<table width='100%' border='1' cellpadding='5' style='border:1px solid black; border-collapse:collapse'> " &
     "<tr>
     <th align=""left"" cell width='20%' style='background-color:#efefef'> Order Date </th>
     <th align=""left"" cell width='20%' style='background-color:#efefef'> Employee Name </th>
     <th align=""left"" cell width='20%' style='background-color:#efefef'> Phone Number </th>
     <th align=""left"" cell width='20%' style='background-color:#efefef'> Department </th>
     <th align=""left"" cell width='20%' style='background-color:#efefef'> Managers Name </th>
     </tr>" &
     "<tr>
     <td align=""left"">"&Text(Today(),DateTimeFormat.ShortDate)&"</td>
     <td align=""left"">" & Employee_Name_Input &"</td>
     <td align=""left"">" & Phone_Number_Input & "</td>
     <td align=""left"">" & Department_Text_Box & "</td>
     <td align=""left"">" & Manager_Text_Box & "</td>
     </tr>" &
    "</table>" &
    
    
    "<h3> Items: </h3>" &
    "<table width='100%' border='1' cellpadding='5' style='border:1px solid black; border-collapse:collapse'>" &
     "<tr style='background-color:#efefef'>
     <th cell width='20%'>Qty</th> <th width='20%'> Item # </th> <th width='20%'> Color </th><th width='20%'> Size </th><th width='20%'> Price </th>
     </tr>
     <tr>" &
     Concat(ShoppingCart,
     "<td width='20%'>" & ItemQuantity & " </td>
     <td width='20%'>" & ItemNumber & " </td>
     <td width='20%'>" & ItemColor & " </td>
     <td width='20%'>" & ItemSize & " </td>
     <td width='20%'>" & ItemCost & " </td>","</tr><tr>") &
    "</table>"& "<br></br>"&
    
    "<table width='100%' align=""right"" cellpadding='5' border='0' style='border:0px solid white; border-collapse:collapse' >" &
     "<tr >
     <td width='20%'></td>
     <td width='20%'></td>
     <td width='20%'></td>
     <th scope=""row"" width='20%'align=""right"" >SUBTOTAL:</th>
     <td width='20%' >" &Text(Sum(ShoppingCart, ItemCost),"[$-en-US]$#,###.00") & "</td>
     </tr>
    
     <tr>
     <td width='20%'></td>
     <td width='20%'></td>
     <td width='20%'></td>
     <th scope=""row"" width='20%'align=""right"" >TAX (7%): </th>
     <td width='20%'>" &Text(Sum(ShoppingCart, ItemCost * "0.07"),"[$-en-US]$#,###.00") & "</td>
     </tr>
    
     <tr>
     <td width='20%'></td>
     <td width='20%'></td>
     <td width='20%'></td>
     <th scope=""row"" width='20%'align=""right"" >TOTAL:</th>
     <td width='20%'>" &Text(Sum(ShoppingCart, ItemCost + ItemCost * "0.07"),"[$-en-US]$#,###.00") & "</td>
     </tr>
    
     </table>"&"<br></br>"&
     "<h3>Payment Method Selected: </h3>"
     &Payment_Method.Selected.Value &"<br></br>"& "<h3>Employee Signature: </h3>"&"<br></br>"&
     "<img src=Signature.jpg width = 200 height = 100 float=right >",
     {
     Importance: "Normal",
     Attachments: Table(
     {
     Name: "Signature.jpg",
     ContentBytes: Signature_Input.Image,
     '@odata.type':""
     }
     ),
     IsHtml: true
     }
     );
    Reset(Employee_Name_Input)&Reset(Department_Text_Box)&Reset(Phone_Number_Input)&Reset(Manager_Text_Box)&Reset(Payment_Method)&Reset(Signature_Input);Clear(ShoppingCart);Navigate(BrowserScreen,None);UpdateContext({PopUp2: false})
  • Verified answer
    JensKofod Profile Picture
    143 on at

    An easy and multi-purpose solution is found to add pen-input to Sharepoint/Email/PDF/Html by utilizing the addition of a PowerApps Json functionality added on 02/05/2019.

    The Short description on how to make this work is to save the pen input image in a JSON format asking the JSON function to include Binary Data:

    Set( PenVar, JSON( PenInput1.Image,JSONFormat.IncludeBinaryData ) );

    See here for details: https://iiu.dk/2019/10/12/powerapps-pen-input/

  • takolota1 Profile Picture
    4,980 Moderator on at

    @JensKofod 

    It can be even simpler. You can add the signature image directly into a Power Apps HTML display & just pass the whole HTML display to a flow to be converted to a PDF: https://powerusers.microsoft.com/t5/Power-Apps-Community-Blog/Add-Signatures-to-HTML-and-PDFs/ba-p/2713092#M2020

Under review

Thank you for your reply! To ensure a great experience for everyone, your content is awaiting approval by our Community Managers. Please check back later.

Helpful resources

Quick Links

Introducing the 2026 Season 1 community Super Users

Congratulations to our 2026 Super Users!

Kudos to our 2025 Community Spotlight Honorees

Congratulations to our 2025 community superstars!

Leaderboard > Power Apps

#1
WarrenBelz Profile Picture

WarrenBelz 519 Most Valuable Professional

#2
11manish Profile Picture

11manish 489

#3
Haque Profile Picture

Haque 327

Last 30 days Overall leaderboard