PowerApps Pro Tips | Full Screen Image Pop-Outs

[AllisonCaldwell]

There are times when a PowerApps user needs to see a large image at full screen. When that’s the case, you want to make sure the user experience is a good one for them. At Confluent, we use a standard process to create full-screen image pop-outs, which provides the best of both worlds.

Here’s how it works:

1. Open PowerApps.
2. Open a template app, like the Product Showcase.
3. Go to the Compare Products screen.
   
4. Insert a new image media type onto the page. We will use this to appear when you click on one of the three Surface items on the page.
5. Resize it so it is nearly the size of the entire screen.
6. Add a button to the screen. Move it to the top right of the image, and change the name to X rather than button.
   
7. On the image, go to the property called image and insert this code: ” MyBigPic “ and then set the visible property to ” If(Len(Text(MyBigPicShow)) = 0,false,MyBigPicShow) “
8. On the button, add to the on select property: ” UpdateContext({MyBigPicShow:false}) “ and set the visible property to ” If(Len(Text(MyBigPicShow)) = 0,false,MyBigPicShow) “
9. On each picture, add the following to the on select: ” UpdateContext({MyBigPic: surface_book});UpdateContext({MyBigPicShow:true}) “ and be sure to change the name of each photo.

Now when you click on each photo, it will appear full screen. Then the user can choose to close it out using the X button.

Sometimes we will grey out the rest of the screen so the picture stands out. This feature uses variable to pass the image and the status between the three components.

Written by Power User and Managing Partner Evan Chaki, this post was originally published on the Confluent blog.

[Audrie-MSFT]

Awesome tips! I will be giving this a try soon!

Thank you,

Audrie

[mr-dang]

Yes great tip! 

[blueandgold]

OK, this is a fantastic solution! Thank you so much! 🙂 And a well-written article, with easy to follow instructions and visuals. Thanks for the help.

[KroonOfficeSol]

Using a image control and show it when there is a picture selected is great. Here a few improvements on how to enable this:

First make a [Enhanced group] and put in a [layer], the [image control] and a [cancel icon].
(btw [] is a control)

Do the following formula's:

• [Layer].Fill = Color you want - nice trick is to reference the [ScreenName].Fill here
• [Button/Gallery/etc.].OnSelect = UpdateContext({MyBigPic:"NameOfYourPic"})
• [cancel icon].OnSelect = UpdateContext({MyBigPic:""})
• [image control].OnSelect = Select(cancel icon) - If you don't want the user to click the picture to hide it then skip this part
• [Enhanced group].Visible = !IsBlank(MyBigPic)
• [image control].Image = MyBigPic

The !IsBlank() wil give a true or false, so there is no need for a if() formula. So it shows the [Enhanced group] with in it all the controls when you click the [Button/Gallery/etc.] and put a string in the variable. The [cancel icon] will erase the string from the variable making the [Enhanced group] to be hidden. Further you don't have to hide the [Button/Gallery/etc.] at all, because it's behind the [enhanced group] and so blocked for interaction.

If you want to use an extra variable to show/hide controls then better use a number variable instead off a boolean. Reason is that a number variable can contain almost unlimited states, which means you can re-use the variable for more groups/controls you want to show. Like this situation:

[Button 1].OnSelect = UpdateContext({ShowVar:1})
[Button 2].OnSelect = UpdateContext({ShowVar:2})

[HideControl 1].Visible = ShowVar = 1
[HideControl 1].Visible = ShowVar = 2

Another great trick is that if you want a control, lets say the [VisibleControl 1], to be visible a start or at different states off your variable, you can do like:

[VisibleControl 1].Visible in [Blank(),0]
[HideControl 1].Visible = ShowVar = 1

Why the Blank() in the first line? With adding this you don't have to set you're variable at .OnStart or .OnVisible off you're app/screen. So less code to write and execute on those places.

[sulrik]

It doesn't work with images inside datails of a list (gallery)

[LisaDollar]

I was also trying to do this on a detail screen and I couldn't get this to work. But this is exactly what I want to happen when the user clicks on the detail screen image. Help?