cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
Highlighted
Super User
Super User

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
Highlighted
Community Champion
Community Champion

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

Highlighted
Super User
Super User

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

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?

Highlighted
Community Champion
Community Champion

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

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

Highlighted
Super User
Super User

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

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.

Highlighted
Super User
Super User

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

Hi @seadude 

I like your idea of using an HTML table.

What data source are you using to store your images?

Highlighted
Community Support
Community Support

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

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.
Highlighted
Community Champion
Community Champion

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

@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.

Highlighted
Super User
Super User

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

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?

Highlighted
Super User
Super User

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

Hi @Eelman . Is this INSIDE a Gallery?

Helpful resources

Announcements
August 2020 Community Challenge: Can You Solve These?

August 2020 Community Challenge: Can You Solve These?

We're excited to announce our first cross-community 'Can You Solve These?' challenge!

secondImage

Return to Workplace

Reopen responsibly, monitor intelligently, and protect continuously with solutions for a safer work environment.

secondImage

Super Users Coming in August

We are excited for the next Super User season.

secondImage

Community User Group Member Badges

FIll out a quick form to claim your community user group member badge today!

secondImage

Power Platform 2020 release wave 2 plan

Features releasing from October 2020 through March 2021

Top Solution Authors
Top Kudoed Authors
Users online (8,214)