Hello, my name is Todd Baginski. I'm a Microsoft
MVP and partner and CTO at Canviz.
What I'd like to show you in this little video, is how you can
go create yourself a pop-up box on the same page
in a PowerApp and make it look like it's sitting in front of everything else
in the screen while you gray out everything behind it.
So let me show you what this looks like in practice and we'll dive into the code.
here's my Shoutouts app, I can see all the different shoutouts that I've sent other people
or my organization all right click to several delete icon here
for the trash can opens up the sort of light box.
And, you can see it greys out the screen behind it and allows me
to either confirm, and yes I want to delete the shoutout or I can cancel it and not delete it.
Either one I click, it's going to get rid of that
pop up and come right back to the screen so here we can see it again.
And, then I can cancel it so how do we go about creating that.
This is actually really easy to do and our out the first thing that you want to do regional
or create a group that you're going to put all your controls and that are
defining what your pop-up looks like so in this case we
call totally confirm underscore one because we already have it from the previous pages well.
You'll notice that all the controls that I have in here.
Have their visibility property set to this variable call showed
delete confirm. I can look at this rectangle, that rectangle,
the image that is part of that
easily line-up box every single one of them has visible property to show delete
confirm.
So, what does that property value come from? Well, this variable called
showed delete confirm is actually set
when we select the trash can image. So first we set which
shoutout we're going to delete to this item which is the shout out this gallery is
displaying and then we set the show delete confirm
variable equal to true.
When that variable is true then that is going to toggle
showing all these controls. So right here in the editor, this click, and now I've just
set surely confirm variable equally true and now we
can see all of those controls line-up so now they're all
it up I can click on them and I can see exactly which ones they are,
for example, there's my trash can image that I use in my pop up.
If we click on the button here what is the button you will first it's going to remove
from the shower out entity in the culminated service the shower
out to delete which is the currently selected item in the gallery.
And, then we're going to set the number of shout outs to me it to a value the number
shouts from me and to refresh all that for user interface purposes
nor done we said it showed
really confirm back to false if we do cancel it's much simpler we
just set showed only confirm back to false so if I click cancel here
and the editor now that variables false and all those
things disappear from the screen so that's a very simple way and you can go and
set yourself a pop up late box
in PowerApps going to turn it back on one more time to show you something else.
If I look at the rectangle here rectangle2_2 notice it to the bottom
of my control tree which means it's going to appear
below everything else that's why it doesn't cover up the other pieces
they're laying on top of it in the middle of the screen.
If you look at closer at that one right there you can see that the fill for this is
0.8
and that's how we set the opacity so that this is black, but
a little bit of the screen underneath shows through.
So, that's how you go about creating
yourself a light box popup in PowerApps and very easy way you can do it.