Skip to main content

Notifications

Announcements

Welcome to the Power Platform Communities
News and Announcements icon
Power Platform Community / Forums / Building Power Apps / Embed an image from Im...
Building Power Apps
Unanswered

Embed an image from Image input or Sharepoint list in the HTML text of Power Apps

(1) ShareShare
ReportReport
Posted on by arseny_sandaar 12

I am developing the app which automatically sends e-mail using collected data in the app IN POWER APPS. 

To send  an e-mail I use MyFlowPowerAutomate.Run("recipient@host.com", "E-mail subject", MyEmailBody.HtmlText).

 

MyEmailBody is an HTMLtext display item of Power Apps. Collecting the data from the app I develop an e-mail body. The e-mail body is constructed based on certain conditions. Everything works well, but Images.

 

The e-mail should contain images embedded in e-mail body (not as attachments). It is very similar to the process when you manually paste copied image in the e-mail body.

I have images stored in the sharepoint list Image type column. Each image can be accessed either by storing it in the Image input in the app or via the same Power Fx query from the list: First(MySharepointList, ID = MyId_1)).Image 

 

I have tried to use <img src="data&colon;image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA..."> in different ways including in HTML text, though it didn't work. I generated the sequence using JSON() function:  JSON(MyImage1.Image, JSONFormat.IncludeBinaryData).

 

I also used an URL link of the image stored in sharepoint instead of an encoded image, though it was coming as a sequence of something like this: appres://datasources/My%20list/table/9d6710d0-1e99-455a-a126-db25f323f6ed/rows/9/reference/https:%2F%2Feurope-001.azure-apim.net%2Fapim%2Fsharepointonline%2F14364aecf82c4a61bb59ba3656a94408%2Fdatasets%2Fhttps%25253a%25252f%25252ftauindustrialrobotics.sharepoint.com%25252fsites%25252fproduction.report%2Fcodeless%2F_api%2Fv2.1%2Fsites%2F06762788... However, in the app the use of URL showed the image, but when sending it didn't work.

I also used encoded image in the Power Automate Flow: MyFlowPowerAutomate.Run("recipient@host.com", "E-mail subject", MyEmailBody.HtmlText & "<img src=<my_encoded_image>""" """>"), though there was no success. 

 

Are there some ways to embed an image in HTML text in the Power Apps so that it would be sent embedded t?

Categories:
Using Apps Using Formulas
General Questions
  • Suggested answer
    erfernandes Profile Picture
    erfernandes 32 on at
    Embed an image from Image input or Sharepoint list in the HTML text of Power Apps
    I managed this to work in two ways: within the app or calling a flow. 
     
    Scenario within the app:
     
    I needed to decode the URL as the URL given from the Image column has a strange format lol... First of all, I created a collection with all encoded chars:
    ClearCollect(
    colEncodedChars;
    {
        Encoded: "%25253a";
        Decoded: ":"
    };
    {
        Encoded: "%25252f";
        Decoded: "/"
    };
    {
        Encoded: "%2F";
        Decoded: "/"
    };
    {
        Encoded: "%21";
        Decoded: "!"
    };
    {
        Encoded: "%3F";
        Decoded: "?"
    }
);
    Then I splitted the URL that comes from SharePoint to get only the https portion and replaced the encoded chars. With a ForAll function, I decoded the chars. Consider I'm selecting an item from a gallery and I have a image column called "Foto".
    ClearCollect(
    colDecodedChars;
    $"https{ Last(ForAll(Split(ThisItem.Foto.Full; "https"); {Result: ThisRecord.Value})).Result }"
);;
ForAll(
    colEncodedChars As EncodedCharItem;
    Collect(
        colDecodedChars;

        Substitute(
            Last(colDecodedChars).Value;
            EncodedCharItem.Encoded;
            EncodedCharItem.Decoded
        )
    )
);;
    Finally, to get the image Url formatted to be used in an image control, in Default property, or in the "src" property of the img tag:
    If(Last(colDecodedChars).Value = "https"; Blank(); Last(colDecodedChars).Value)
    Obs.: my environment is configured in portuguese language, so, you may have to change the single semicolons ( ; ) by commas ( , ) and the double semicolons ( ;; ) by single semicolons ( ; )  !!!!
     
    Scenario calling a flow:
     
    Just made a flow that receives the ID of the list item and return the Url of the image.
     
     
    This action returns a body with a "d" property and a "Foto" property, which is the name of my image column. The "Foto" property has a stringified object that contains two important properties: serverUrl and serverRelativeUrl. We need to concatenate both of them as below:
     
     
    concat(json(body('Send_an_HTTP_request_to_SharePoint')?['d']?['Foto'])?['serverUrl'], json(body('Send_an_HTTP_request_to_SharePoint')?['d']?['Foto'])?['serverRelativeUrl'])
    Now just add an action to respond to Power Apps passing the output of the Compose as a parameter. Use this response in the Default property of an image control or "src" property of the img tag.
     
    Hope it helps!
     
     
     
     
     
     
     
     
     

Helpful resources

News and Announcements

Welcome to the Power Platform Communities

Quick Links

Welcome to the Power Platform…

We are thrilled to unveil the newly-launched Power Platform Communities!…

Community Update Sept 16…

Power Platform Community Update…

Welcome to the new Power Platform Community!…

We are excited to announce our new Copilot Cookbook Gallery in the Community…

more Community News

Leaderboard

#1
WarrenBelz Profile Picture

WarrenBelz 140,749

#2
RandyHayes Profile Picture

RandyHayes 76,308

#3
Pstork1 Profile Picture

Pstork1 63,355

Leaderboard

Featured topics

Enable Copilot for end users in model-driven apps

Product updates

Microsoft Power Platform Community release plans