Overlays & Pop-ups | HOW to use Microsoft POWER APPS (2024)

so I literally just well oh yeah it's  time to get fancy my name is Jochen I   am a Power Platform consultant at sigeka  and in today's video I'm gonna show you   guys how simple it is to create overlays and  pop-ups to fancy up your power app let's go hey guys and welcome back to this powerapps  beginner Series where I am creating my office   ordering supplies app from scratch throughout all  the episodes I'm showing you a lot of building   blocks that you can use to create your own stuff  in powerapps so if you have missed an episode or   you simply want to start at the very beginning  there is a link to the whole playlist down in   the video description don't hesitate to check it  out but if you are just here for today's fancy   stuff that's also fine because we're gonna  kick it off by creating a loading overlay   foreign doubt you have seen this before on a  website or on an application on your phone if   you for example load up the first screen you get  a loading overlay which kind of prevents you from   clicking anything that is exactly what we're going  to build inside our own app and I want to create   this for starters on my home screen if I go to the  unvisible property you can see that we put in two   lines of code last episode now these two lines  of code kinda do a data refresh and depending   on the amount of data this could take a couple of  seconds now the question is do we want the user   to start clicking around while that is happening  or do we simply want them to wait I would suggest   option b and that is exactly what we can achieve  by building a loading overlay so let's do it and   it's very simple it will just be two controls a  rectangle and a label so let's start by adding   those rectangle first and then hit text label I'm  just going to rename them as well and let's start   with the rectangle right now by default because  that's my theme this has the orange color but   I don't really want that so I'm going to go to  the fill property and say instead of this value   255 255 255 dot 0.9 which is the alpha value again  and it's kind of the transparency and this is what   happens so you can recreate that typical overlay  look simply by using this color in your fill   property for a simple rectangle second part of the  overlay is the label so let's make this also the   full size of our screen Central alignment let's go  for I don't know 30 and then of course we wanted   to say the twin double quotes loading dot dot dot  let's make this even bigger let's go for 75 there   we go and final step for now I'm gonna group these  two controls together by holding down control and   selecting them right click or hit the three dots  group and rename the group to group loading HS   and that my friends is pretty much all it takes to  create an overlay but of course as you can see we   have an issue now because at this moment this will  always be visible if I go to the visible property   of this group by default it is set to True AKA  always show this which is obviously not what   we want so let's change that because instead of  saying true or false for a visible property we can   also use a variable for example which variable you  might ask well let's go back to the home screen   and to the unvisible code let's add a first line  and that is going to be a set or a global variable   VAR loading dot true and at  the end set VAR loading comma   false so what this does really simple and we  can even add it in comments show loading overlay   because this is the exact variable that  we're going to use to trigger the visibility   of our overlay this is of course height loading  overlay and in between we have our data refresh   code and the final thing of course to do is  to select this variable go back to our group   to the visible property and it's not going to  be true or false we're going to replace this   by saying VAR loading and I know I don't have a  lot of data so it might be just a blink that you   see that loading overlay but pay attention  because I'm going to go to preview mode I'm   gonna go to another screen and go back to my home  screen which will trigger the invisible property   there we go there's the overlay boom data  is loaded and the overlay disappears and   the reason I chose a global variable is because  this is a thing that I tend to copy paste into   my other screens as well so let's do that so  let's copy this entire formula to our unvisible   for example of our new order screen paste and of  course let's take the group that we created copy   paste to our new order screen let's rename  everything and the group itself there we go   and of course the final thing that we could do  is change this data refresh code is it necessary   on this new order screen I'm going to leave it for  now but should there be other code that we want to   run in between those two set statements perfectly  fine to just replace this code with whatever you   want and that's it that's all it takes to create  an overlay and to copy it to other screens as well   I bet that was way more easier than you thought  right but if you have any questions whatsoever   on the topic use the comment section or if you  have ever implemented an overlay in your own   app or whatever business case let us know down  there that being said let's move on to pop-ups pop-ups are another thing we all know we have  all seen it you are visiting a website or an   app on your phone and all of a sudden something  pops up that might look like another screen well   while that can be the case depending on how it's  developed of course pop-ups and powerapps can be   created without the need of a separate screen  or whatever let me show you and in all honesty   it is very similar to the thing we just did with  the overlay because we are going to add a bunch   of controls to our new order screen group them  together and then once again use a variable to   determine the visibility of the entire group  all at once and let's start with that variable   because in the on Select Property of my confirm  order button which is still on the default value   of false I'm going to delete that this is where  I'm gonna enable if you will the pop-up by saying   update contacts so it's a local variable this time  because we will only need it on this very screen   and not throughout the entire app and we're going  to set the value for that very variable to True   whenever this button is clicked and the next tab  is just to add a bunch of controls to this screen   and that in total will be our pop-up but I'm  not going to show you every little step that I   do so let's go three two one boom so this is all  the stuff that I added it's not rocket science   really I just added two labels these two I added  a vertical gallery to show the shopping basket   items I added a form right here but I didn't do  anything with it I haven't even connected it to   any data because that is stuff for the next video  and I added two buttons keep shopping and finish   order and I almost forgot to mention it in the  background I have added two simple rectangles   once again the white one right here is the exact  same one that I used in the overlay earlier and   the gray one is also just a simple rectangle with  a border to kind of give that pop-up look and the   main thing of course now is to group them again  so I selected them already by holding down the   Ctrl key right click group I'm going to rename  the group to group confirmation confirmation   pop-up underscore NOS because that is exactly  what this is this is our confirmation pop-up   and two things are needed to finish up our logic  by the visibility thing first thing is on this   button keep shopping which is basically a sort of  cancel button so in the on Select Property of this   very button I'm going to delete the default value  false I'm going to copy that formula that I used   earlier to set that local variable to true but of  course in this case I want to set it back to false   because that eventually will hide the entire  pop-up and that is the very thing we have to   make sure that we do now I select the group go to  the visible property instead of the default value   that is true I'm gonna say far show confirmation  and immediately you can see that the entire pop-up   disappears because at this stage that variable  is even blank which is kind of the same thing as   false hell it's not true that's for sure but now  we can actually test what we have built so let's   go to our preview mode clear our shopping basket  and you know what let's start at the home screen   there's our loading overlay which is good let's  go to the New Order screen and now let's add a   couple of you know what let's add some paper to  our shopping basket confirm order that triggers   the visibility of our pop-up we can delete stuff  I'm going to show you in a minute what I did here   by the way this cancel icon where we can delete  our items if we want to and we can click the   keep shopping button to hide the pop-up and as  promised for those of you who might be following   Along by creating this own app yourself this  is the code that I had with behind my cancel   icon which is basically very logic if you think  about it when we cancel an icon in our shopping   basket we want to a do a minus one for our VAR  local item counter which is a local variable we   created we want to deduct the price of that item  of our total price which you can see right here   the three and of course we want to remove that  item from our collection called call shopping   basket which this Gallery is simply showing to the  user All In All Mission succeeded if you ask me   we have created an overlay and we have created  a beautiful confirmation pop-up job well done there is one thing that I almost forgot to  mention and it's important always keep an   eye out on the order of groups and controls in  your tree view because in our cache we want our   loading overlay so this group loading NOS right  here to be the absolute top layer of visibility   and that means it also has to be on top in the  tree view because the top element in the tree   view is kind of like the first layer as far as  visibility goes and luckily you can very easily   solve issues like this by clicking the three  dots of this group for example reorder bring   to front and there you go in the next episode we  are going to complete our app by finishing that   form we already put in in our confirmation pop-up  and of course we will implement the necessary code   and logic to make sure that if we actually finish  or confirm an order that our data also gets saved   on SharePoint that is my main goal for the next  last video in this series but for today I want   to say thank you for watching if you have any  comments or questions whatever use the comment   section and don't forget to like the videos  and subscribe to the channel that is all for   me today guys thank you so much for watching I  will see you in the next one take care [Music]

Channel: Cegeka Business Solutions (Microsoft Inner Circle)

Views: 13,156

Keywords: how to use microsoft power apps, how to use microsoft powerapps, how to use powerapps, how to use power apps, beginner, training, course, basics, powerapps, power apps ideas, powerapps tutorial, power apps demo, microsoft powerapps, learn powerapps, power platform, power apps sharepoint lists, sharepoint lists, create an app, power apps, microsoft power apps, sharepoint, build app, develop app, low code, ms power apps, power app, tutorial, loading, overlay, pop-up, pop-ups, 2024

Id: uP6y9MK2ZaM

Length: 11min 38sec (698 seconds)

Published: Tue Jan 31 2023