Display a base64 image in a HTML Control

[AdamH]

Hi All, 

I have a form in powerapps that has a pen input signature at the bottom of the form. When the form is submitted - I use a JSON to convert the pen input to base64 to store in the SP List.

Set(varSign11, JSON(PenInput7.Image,IncludeBinaryData));SubmitForm(Form5_7)

I've inserted a HTML control in a separate page and created my HTML template which details all of the fields and data on the submitted form and using a flow can convert to PDF and email out to the logged in user. What I would like to do is to take the base64 data that was saved as the signature and display it at the bottom of my form but within the HTML

Anyone have any advice?

[BCBuizer]

Hi @AdamH ,

You can include the signature with the below snippet in the HTMLtext property of the HTML control:

<img src=" & varSign11 & ">

[AdamH]

@BCBuizer 

Thanks, but that will only work with a new form submission. If I submitted a form yesterday and opened it in detail view today to export to pdf and email it, it wouldn't show an image, or even worse it would show someone else's signature.  

I need to find a way for it to pull the base64 from the SP list that was submitted with the form, then the forms can be exported at any time. 

[BCBuizer]

Hi @AdamH ,

Perahaps you want to add a new column to your data source (Signature, multiple lines of text). A datacard for this can then be added to the form with the below Default property:

Coalesce(
   Parent.Default,
   JSON(
      PenInput7.Image,
      IncludeBinaryData
   )
)

This can then be hidden (Visible = false)

What this does is to see if there is a value in the Signature column, and if not, grab the base64 from your pen input.

If you then change the reference in your HTML from the variable to the Signature column of the selected item, you shouldn't run into any issues.

[Anonymous]

Hi @AdamH ,

I will post here in case some other users might need information on how to display base64 images in powerapps.

I needed to embed some text and an image in a HTML Text control.

First, I used inspect to copy some random documentation from a website and paste it into Notepad++:

<div class="markdown-content markdown-render-area body-m"><p>Meant to be used by citizen developers</p>
<p>Name Prefix: <strong>wdi</strong><br>
Schema name: <strong>test</strong><br>
No need for attachments<br>
No required fields<br>
Searchable: yes</p>
<p>In this description<br>
All fields are having datatype Text, if not mentioned otherwise = Single Line of Text, standard length of 100 characters</p>
<p><img src="random image link"></p>
<ul>
<li>Feature – represents an Object in the map (Substation, Pipe ...)</li>
<li>Layer</li>
<li>Form – main Object of the Forms module</li>
<li>Photo – joined to forms?</li>
<li>Document – joined to forms?</li>
<li>Form Template</li>
</ul>
</div>

Next I will download a random image (JPG), and upload it to https://www.base64encoder.io/image-to-base64-converter/   , and I will copy the code from Base64 Image source. 

After that I will paste the code into the <p><img src="random image link">  </p>, replacing the "random image link" with out Base64 image code.

Next we will hit Ctrl + F, and I will replace all  "  (commas) with  '  (apostrophe). This will be the code we will paste into our Dataverse table.

Next up, we will create a new Solution in Power Platform thar has an PowerApps app and a Dataverse table. Inside the table create a new Rich Text column, with a character limit of 100000.

Should look like this, my column is named RichText2: 

Click on the purple Edit and create a new row using "New row using form"

 Create the row and click "Save and Close".

After the row has been added, delete the contents of the RichText column and paste the HTML code from Notepad++.

After this, enter the PowerApps app created in the solution, connect the app to the Dataverse table, add a HTML Text control, and assign the RichText column as its source, the final result should look something like this:

Hopefully this will help you and anyone else who might need it.😄