Skip to main content

Notifications

Power Apps - Building Power Apps
Unanswered

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

Like (1) ShareShare
ReportReport
Posted on 29 Apr 2024 09:56:50 by 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?

  • Suggested answer
    erfernandes Profile Picture
    erfernandes 32 on 06 Aug 2024 at 01:46:59
    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!
     
     
     
     
     
     
     
     
     

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

End of Year Newsletter…

End of Year Community Newsletter…

Tuesday Tip #12 Start your Super User…

Welcome to a brand new series, Tuesday Tips…

Tuesday Tip #11 New Opportunities…

Welcome to a brand new series, Tuesday Tips…

Leaderboard

#1
WarrenBelz Profile Picture

WarrenBelz 144,696

#2
RandyHayes Profile Picture

RandyHayes 76,287

#3
Pstork1 Profile Picture

Pstork1 64,456

Leaderboard