cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
seadude
Memorable Member
Memorable Member

HTML Control, In Gallery, ThisItem.Picture, Possible?

Hello,

To make my app more performant, I'm substituting disparate controls for a single HTML Text control within a Gallery.

Is it possible to show an image using HTML control and something like "ThisItem.Photo"?

Example:

  • Collection (`colTest`) has four columns:
    • Name
    • Address
    • URL
    • Photo
  • Gallery Items property is set to `colTest`
  • HTML Text property is set to:

 

"
<table id='test'>
  <tr>
    <th text-align='center'>" & ThisItem.Name & "</th>
  </tr>
  <tr>
    <td text-align='center'>" & ThisItem.Address & "/td>
  </tr>
  <tr>
    <td>" & ThisItem.URL &"</td>
  </tr>
  <tr>
    <td><img src='ThisItem.Photo'></img></td>
  </tr>
</table>
"

 

I've also tried: 

  • `<td><img src=' " & ThisItem.Photo & " '></img></td>`
  • `<td><img src=" & ThisItem.Photo & "></img></td>`

Do I have the syntax wrong or is this pattern not currently possible in PowerApps?

Thank yoU!

23 REPLIES 23
Eelman
Super User
Super User

seadude
Memorable Member
Memorable Member

Thanks for the idea. Unfortunately, I can't get this to work.

Tried:

  1. <td><img src=" & ThisItem.Photo & "></td>
  2. <td><img src=" & Mid(ThisItem.Photo,24,Len(ThisItem.Photo)-24) & "></td>
  3. <td><img src=' & Mid(ThisItem.Photo,24,Len(ThisItem.Photo)-24) & '></td>
  4. <td><img src='" & Mid(ThisItem.Photo,24,Len(ThisItem.Photo)-24) & "'></td>

If I substitute ThisItem.Photo for a URL...

  1. <td><img src='https://upload.wikimedia.org/wikipedia/commons/5/5b/L%27amaro_caso_della_baronessa_di_Carini_%281975... '></td> it works fine.

Any other ideas?

Yes, you could try this. I knew I'd read it somewhere that you need to get the various properties of your image when you create a collection with images in it. I think you then reference the contentBytes?

 

https://powerusers.microsoft.com/t5/Building-Power-Apps-Formerly/send-image-via-email/m-p/199240#M64...

 

I tried to get this to work but couldn't, sorry

seadude
Memorable Member
Memorable Member

Thanks for the lead. Since I'm not using O365 connector to send an html email, but rather placing html text with image inside a gallery, I couldn't find a way to make it work.

timl
Super User III
Super User III

Hi @seadude 

I like your idea of using an HTML table.

What data source are you using to store your images?

v-yutliu-msft
Community Support
Community Support

Hi @seadude

Do you want to display pictures in a html text control?

I'm afraid it's not supported currently in PowerApps.

For now, html text control is used to display plain text ,numbers and HTML tags only.

It will not convert text to pictures.

HTML text is not meant to be interactive. It should only be used for text display.

If you want to display  pictures inside a gallery, I suggest you use Image control.

Do you use url to store the image?

If so, you just need to set the Image's Image to:

ThisItem.URL.

 

Here's a doc about html text control for your reference:

https://docs.microsoft.com/en-us/powerapps/maker/canvas-apps/controls/control-html-text

 

 

Best regards,

Community Support Team _ Phoebe Liu
If this post helps, then please consider Accept it as the solution to help the other members find it more quickly.

@seadude I have just been messing around with the JSON() function and I may have a solution for you?

MS Doc: https://docs.microsoft.com/en-us/powerapps/maker/canvas-apps/functions/function-json

 

I created a blank sheet and added a button and a HTML text element and did the following.

** mySPLib is just a SP library with images

 

Button1.OnSelect = ClearCollect(colImages2, mySPLib); Set(JSONImage, JSON(First(colImages2).'Link to item',JSONFormat.IncludeBinaryData))

 

HTMLTextElement.HtmlText = "<img src="& JSONImage &">"

 

The image shows up perfectly 🙂 Maybe you could adjust this to suit your situation?

 

The JSON function only works  in behavior functions but you may be able to workaround that? Also, my code First(colImages2) would need to be adjusted to reference your ThisItem property in some way.

 

Let me know how you get on.

seadude
Memorable Member
Memorable Member

Hi @timl ,

The data source is a Collection which combines two API responses from a Custom Connector.

Example:

 

//Call the seattle.gov cultural spaces API
ClearCollect(colSeattleCulture,
    SeattleCulturalSpaces.GETNearbyCulture(
        {
            '$where':"within_circle(location," & Location.Latitude & "," & Location.Longitude & "," & sldDistance.Value & ")"
        }
    )
);

//From that response, call Azure Maps API's for BOTH distance and map image and combine into a single Collection (used by Gallery in question)

ForAll(colSeattleCulture,
    Collect(colSeattleCulture1,
        {
            address: address,
            distance: First(azureMapTimezone.GETDistance(
                {
                    'api-version': 1.0,
                    query: Location.Latitude & "," & Location.Longitude & ":" & latitude & "," & longitude,
                    'subscription-key': "<sub-key-here>"
                }
            ).routes.summary).summary,
            dominant_discipline: dominant_discipline,
            jsonImage: 
                JSON(azureMapTimezone.GetMapImageWithPins(1.0, 600, 600, 
                    {
                        zoom:15,
                        center: Location.Longitude & "," & Location.Latitude,
                        pins: "default||" & longitude & " " & latitude
                    }
                ),JSONFormat.IncludeBinaryData),
            glrImage: 
                azureMapTimezone.GetMapImageWithPins(1.0, 600, 600, 
                    {
                        zoom:15,
                        center: Location.Longitude & "," & Location.Latitude,
                        pins: "default||" & longitude & " " & latitude
                    }
                ),
            name: name,
            url: url
        }
    )
);

 

Notice how I've tried wrapping the Map Image API call in the JSON function. I can not get either jsonImage nor glrImage to show in the HTML img tag. I even tried peeling off the first 24 characters from the JSON binary data.
Any ideas?

seadude
Memorable Member
Memorable Member

Hi @Eelman . Is this INSIDE a Gallery?

Helpful resources

Announcements
PA_User Group Leader_768x460.jpg

Manage your user group events

Check out the News & Announcements to learn more.

Power Query PA Forum 768x460.png

Check it out!

Did you know that you can visit the Power Query Forum in Power BI and now Power Apps

Carousel 2021 Release Wave 2 Plan 768x460.jpg

2021 Release Wave 2 Plan

Power Platform release plan for the 2021 release wave 2 describes all new features releasing from October 2021 through March 2022.

PowerPlatform 768x460.png

Microsoft Learn

Check out our new Discover Your Career Path blog post series and get all the details.

Users online (2,409)