HOW to use Microsoft POWER APPS (2023) - Creating the App, Solution & Screen Navigation

okay so you've seen people develop awesome  things within powerapps but you have no idea   how to start it yourself well good news  you've come to the right place my name is   Jochen I am a Power Platform consultant at  Cegeka and in this beginner level series I   am gonna guide you to start using some  absolute fundamental building blocks   within powerapps to create some  amazing things let's get started all that I will be using throughout the entire  series is a licensed powerapps environment of   course and the SharePoint site that I can actually  reach from that environment because that is where   we will store our data and as a quick teaser at  the end of the series I will have built an app   that allows me to order office supplies it is a  simple power app but fully functional and filled   with some very basic power up stuff we will be  tackling screens groups variables collections   forms overlays you name it but of course let's  start at the beginning and the very first step   is to go to make.powerwraps.com and log in with  your own credentials once you are logged in make   sure to select the correct environment in which  you're going to develop your app and then let's   go to Solutions because we are going to put  everything into a so-called solution why you   might ask well a solution is basically a bundle  of everything that you will develop belonging to   the same app so for example we're gonna make our  app should we make some let's say power automate   flows to go with the app we can also put those  into the same solution and that will make it very   handy to export the entire solution at once and to  import it into another environment so of course I   am going to start with creating my own solution  called office ordering supplies a publisher you   could select a default publisher right here or  you could make your own by going new publisher   display name will just be my name the same thing  goes for the name field only make sure you delete   a space if you have one because he won't accept  that description can stay empty prefix is just   my initials this is okay and press save and now  it will appear in this drop down and I'm just   gonna pick it my version is okay and I'm gonna go  create now at this point we have an empty solution   which is awesome as a starting point because now  we can start putting stuff into the solution and   you guessed it we are going to create our app  next go new up top Here app canvas app the app   name will be office ordering supplies app and I'm  gonna go with a tablet format more on that later   create now this automatically takes us to the  powerapps editor which is exactly what I wanted   skip for now but before I actually start adding  stuff to my canvas which you can see right here   I want to show you this go to settings display  and you saw that I chose the tablet format when   I created the app well all of these things in the  display menu are kind of related to that and I'm   not going to go into too much detail because you  can see the description of every property right   here but one golden tip if you want to format  or orientate your app in a certain way do it at   the very beginning of your development don't get  me wrong it's not impossible to come in here and   change it later on but I can guarantee you if you  have filled your canvas with all sorts of controls   it might mess things up when you start changing  these settings I'm just gonna leave it for now   landscape orientation 69 size Perfecto close  window now the powerapps designer has a lot   of different components which I'm not going  to explain into too much detail yet because   we will simply be using them along the way but  for now just know a couple of things this is my   canvas so this is where you'll actually design  the layout of your app actually of the screens   that are going to be used in the app you have a  top menu bar here where you can insert stuff you   can add data to your app we can add new screens  we will be doing all of that so no worries and   then in my opinion may be the most important part  of the editor is this you can see that we have a   tree view on the left side of the screen right  this is where all the controls everything you   will add to your app will be listed for example if  I insert a label it will literally add that label   because I had screen 1 selected and if I select  any of these things you will see that on the   right side we have a properties Pane and on the  left side on top we have a properties drop down   and your suspicion is probably correct it's  literally the same thing just a different way   of showing it to us as the developer if I select  the text control that I just added we can see for   example that we have some font properties well  in that case the right side properties pane in   my opinion at least is very handy to for example  make the font size a little bit bigger make it   bold stuff like that because we visually see the  properties right here but for other properties we   can actually work with formulas because this  up top is the formula bar if I click any of   the properties on the right hand side you can  see that this drop down element also changes   and that we have an actual formula bar to put  in the same values if you will that we put in   here or of course to write some code and that  is the reason why for some properties where I   know that I'm going to be writing some code I  like to use the drop down instead of the right   side properties pane but that's just a personal  opinion really choose whatever feels best for you the first thing that I like to do when I start  developing an app is make a template screen now   in short this will be a screen that the user never  sees when he's actually using our application but   we as a developer going to use that screen to put  on all kinds of controls and that we can simply   copy paste them to the actual app screens it's  simply an amazing way to have some consistency   in your app when it comes to layout and design  and as you can see powerapps already provided me   with the first screen called screen one and  I am going to Simply rename this screen to   template screen but before I start adding some  controls to it I'm gonna do the very first step   on that consistency that I mentioned and that  is choose a theme I'm gonna go with coral and   this means when I now start inserting stuff like  for example a button that that button already has   a certain color and a certain color when I click  it of course we can always tweak it but the basic   styling is done for all the controls that we will  be adding to this template screen so we already   have a label and a button but I'm gonna change a  little bit on the layout of this button because   I want those Corners to be a little more rounded  we can do that by changing our border radius for   example to 100 and I'm also going to make this  text a little bit bigger so we'll need the font   size property to let's say 18 there we go next  thing I'm going to add is a rectangle and you   will find those well you can start searching  here if you want to but a very handy thing is   the search bar so just type in rectangle click it  and there we go now I'm placing it right here and   I want a second one like a hollow rectangle with a  transparent body but just the border that has the   same color but what I could do is insert another  one just the exact way that I did before or I   can just copy paste the rectangle that I already  have so I'm going to select it right click copy   right click here paste now we have two rectangles  identical to each other first thing that I now   want to do is find out which color this is so  I'm going to select the rectangle go to my fill   property copy this value which is a color value go  to my border color property paste the value again   of course now you won't see any difference yet  because our border thickness is set to zero I'm   gonna change that to 2 and we're gonna make our  fill color so go back to the fill property not   this one but just type in transparent there we  go next thing I'm going to add is a date picker   which is this control right here I'm just going to  put it there I'm not gonna really change anything   about it I think except for the Border because I  want that to be the same color as a rectangle so   select the rectangle and by the way if you see  these properties that are like in bold compared   to the other ones that simply means that the value  for that property differs from the default value   that powerapps already had given to that control  so let's find the Border collar property again   copy the value go to our date picker order color  same property paste not enter just click away   boom same color two more things I'm gonna add a  vertical gallery and a horizontal Gallery if you   have no idea what a gallery is no worries we'll  cover all of that in the upcoming videos by the   way guys if there is something that you really  want me to include in this beginner series drop   a comment below and while you are there check out  a link that I put down in the description that has   a perfect explanation for every single available  formula that powerapps provides us because there   are a lot of them we're not going to use them all  spoiler but that is a very good link just to have   some understanding of what can be done with some  default functionality built within powerapps so   let's add our vertical Gallery first insert use  the search bar don't make it too hard on yourself   blank vertical Gallery is the one that I want  and this is what happens we'll ignore this for   now as I said we will tackle all of that later  on I'm just gonna resize this a little bit and   again the only thing I'm going to change is the  Border again so I'm going to select the gallery   not the element of the gallery the whole gallery  go to the Border color property replace this with   the value that we copied and of course make sure  that you have the Border thickness set to do or   do whatever you like and I'm gonna do the exact  same thing for the horizontal Gallery so insert   horizontal nope there we go  blank horizontal Gallery click   resize and reposition select the whole Gallery  border color property replace this with the copied   value and of course make sure that we have two  again as our border thickness template screen done before we move on to the actual app screens that  we're also going to build in today's video I want   to show you this if you want to save your app just  go here right up top press save you will ask for   the name which we kind of already gave it when  we created it save and when this little thing is   done there we go our app for the very first time  is now saved if I go back by pressing this button   Leaf this takes me back into my solution screen  and as you can see the app luckily is actually   there two things I could do now I can go back  into edit mode by doing this or pressing this   button or I can actually try and play the app so  actually launch it as a user in the end would also   do just click the three dots and hit play or  press this button let's try it out and as you   can see this is our template screen of course we  can't do anything in it because we can click this   button we can scroll this scroll bar but nothing  happens because we didn't do anything but at least   it shows that our app is saved and is basically  ready to be used and you can see that it opened   it in a new tab in my browser so I'm just going  to close this one and I'm gonna go back to edit   mode now before we can design the layout of the  three screens that the app will actually show to   the user we need to add those screens first so up  top here new screen blank and do this three times   because we're gonna need three screens and let it  be a best practice that if you add stuff to your   tree view or to your app that you immediately  rename it so I'm gonna rename these screens to   home screen the second one will be new order  screen and the last one existing orders   screen now at the end of this video I want to make  sure that the three screens are ready to navigate   between each other that's one thing and I'm gonna  basically already finish the layout for our home   screen which will be our landing page instead  of the template screen and that last part is   something we can do immediately by selecting our  app and go to the start screen property up here   and simply say the name of your Landing screen in  our case home screen so let's start designing our   home screen and a quick tip if you add controls  to your apps or to a screen make sure you of   course have the right screen selected and also  as a developer sometimes we want to be smart and   a little bit lazy so what I'm gonna do I'm gonna  build a header bar on my home screen and when that   is done I'm gonna simply copy paste it to my new  order and my existing order screen as well and for   that header I will need a couple of things that  I already defined on my template screen I'm gonna   need this rectangle so copy paste I'm using Ctrl  C Ctrl V by the way feel free to do it however   you want you can also use the three dots here or  right click it it's the same thing I'm going to   immediately rename it to rect header underscore  HS HS is home screen why did I do that you might   ask while two controls in your app cannot have  the same name so we are in the end also gonna   have a wrecked header in the two other screens and  then I'm simply going to add the initials of those   screens to it so the name is different but it's  basically the same kind of control and it looks   alike and by the way if you want to undo and redo  stuff there's an arrow right here where you can   choose that or shortcut keys Ctrl Z and Ctrl Y  and the only thing I'm gonna do is resize the   rectangle like this next thing I need are three  labels so what I'm gonna do is go to template   screen select my label copy home screen paste  and I'm going to paste it two more times now I   want to make the labels white instead of black  because I think that looks better on that red   or orange whatever color it is background and  by holding Ctrl I can select all labels in my   tree view or on your canvas go to my color right  here select White and that's it these two labels   will be for the right side of my header and this  will be the big label on the left we're going to   change the text to please make a choice and make  this like font size 50 there we go and I want to   make sure that I have some room for my home icon  that I'm gonna place in a minute so what I can   do is simply make this a little bit smaller or I  can use the padding property on the left side and   say 125. the second label I'm resizing this and  make this the title of our app office ordering   applies app a little bit bigger there we go  I'm gonna align it to the right a little bit   of padding on the right as well because I want to  stay away from the edge and this label first of   all I'm going to make sure it's the same size  as my label up top here so I'm gonna do this   there we go you can see that powerapps tries to  help you by snapping which is awesome I'm also   going to right align it and give it some extra  padding on the right side there we go and as a   text this is something special I'm gonna have two  parts being the hard-coded text hello with a space   for the second part I'm gonna use a formula so  Ampersand because that is like the concatenation   to put two parts together so the end result for  the user is just one text label and then I'm   gonna say user open and close brackets which is  a one of the built-in functions Within powerapps   Dot and now I can choose a couple of things here I  can choose the email address the full name or the   image which I don't even have but I'm just gonna  go with full name and in this case sigika aiad   is the actual name of the user that I am using  but if anyone else logs in with their account   it will literally show their full name because  this will always like adjust to the user that is   actually using the app let's make the alignment  a little bit prettier there we go title bar done   except for our icon insert icons and this is a  long list and I'm gonna look for the whole mic   I'm gonna make it bigger because now we made sure  that we have some space because we use the padding   on this big label and speaking of padding I'm  gonna do the same thing so padding on each side   of 10 and of course I'm also going to make the  color white beautiful now an icon can also be seen   as a button because a button an icon even a label  have a property called on select being this one by   default it's always set to false but we're gonna  change that because if the user clicks the home   icon we want to go back to the home screen and  it's really simple to do that select the icon go   to the unselect property and go another built-in  formula navigate Open brackets choose your screen   in our case home screen comma and now we need  a transition and you can do screen transition Dot and these are the options cover cover right  fade I mean you can choose whatever you like I'm   gonna go with cover close brackets and I know it  doesn't make sense to have a navigating home icon   on the home screen but we'll take care of that  in a minute but first let's group these things   together because it is all part of a header group  then we're gonna copy paste the group to the other   screens as well and one thing I forgot to do  is rename these controls so let me do that real   quickly and do group controls together simply  select them by holding down the control key   this right click group and immediately rename the  group to group header underscore HS and as you can   see when I click this little arrow right here all  the controls that I had selected are now within   the group that I created and now we can copy paste  simply select the group Ctrl C go to the other   screens and Ctrl V and that's it I'm just going to  rename everything to NOS for new order screen and   the same here with EOS or existing order screen so  now we have the home icon on the other screens as   well which means at this point we no longer need  or at least need to see this home icon on the home   screen so what I can do is select the icon control  go to the visible property and simply say false   instead of the default value that is true and from  now on the user on his home screen will no longer   see the home icon but you will see it on the other  before we finish the entire home screen layout   let's make things a little prettier on all screens  at once I'm gonna add a background image if you're   doing this for the first time you'll probably  have to upload your images first I already   did that I'm gonna select my background image and  make sure this is set to fill at least in my case   because I think the default value is fit let's  do the exact same thing for the other two screens and since our home screen is now our landing page  we want to make a good first impression for our   user so let's add another image but this is not  going to be a background image this is actually   going to be an image control like we have a label  control like we have the home icon control it's   the same thing insert then go image like this this  is the default image that powerapps provides but   of course here I want to say image and then my  main menu image because that is the other image   that I already uploaded two things I want to  change I want to also have the rounded Corners   that I will have on my buttons that will be on the  left side in a minute as well so order radius 100   let's resize it a little bit like this  and the transparency is a number between   zero and one I'm gonna go for the bang  in the middle 0.5 there we go [Music]   last thing I'm gonna do in today's video is make  sure we have two buttons that allows the user from   the home screen to navigate to the other screens  and of course with the home icon that is still   visible on the other screens he can navigate  back to the home screen and now that I see it   one thing I forgot to do is to change the label of  course on our new order screen this will probably   be something like create your order and on the  existing order screen I'm literally gonna say you   can double click it by the way or select the label  and go to the text property it's the same thing   existing orders so two buttons we already had  a button remember template screen select the   button copy home screen paste it twice let's  make this a little bit bigger for example like   this if you want to make sure that two controls or  two buttons in our case have the exact same size   there's one waterproof way to do it and that is to  select the first control have a look at the size   properties being width and height I'm going to put  this to 350 by 200 nope 200 and then literally go   to the other control and set those at the same  value I'm going to reposition them a little bit   and double click to adjust the text or again click  the button go to the text property this button I   want to say create new not rotor order and let's  go for font size 30 and this one you existing   orders font size 30. now at this stage we have  the buttons but they don't do anything nothing   happens when the user will click him like we did  with the home icon remember select the button go   to the unselect property this one by default it's  set to false which is literally do nothing and   now we of course don't want to navigate to the  home screen as we did with the home icon now we   actually want to navigate to those other screens  so navigate in this case to New Order screen comma   cover right which is simply the animation that it  will use to navigate between screens I can copy   the whole formula go to my other button to the  on Select Property paste it but of course this   part is not correct I want to navigate with the  second button to my existing order screen let's   align this image with the top and the bottom  of the two buttons there we go beautiful and   I think my friends it is time for us to test  the first actual version of our app [Music] I   could do the same thing as before save my app go  back to my solution open the app in Play mode and   that's it or I can use a very handy tool within  the designer called the preview mode this little   icon right here just click it I've already saved  my app and this gets me into a simulated play   mode if you will where I can literally test  and use the app as if I was like an end user   because testing we will let's click this button  boom this gets us to our new order screen where   I created this title create your order clicking  the home button back to the home screen which is   awesome sauce view existing orders gets us to each  existing order screen and we can navigate back to   the home screen Mission successful if you ask me  in the next video I will continue the development   of our beautiful office supplies ordering app and  we will be using galleries I swear to God you will   be using galleries a lot when you're developing  apps so make sure to check out that video as well   but for now thanks for watching if you have  any questions drop a comment down below like   the video subscribe to the channel while you're  there and I will see you in the next one take care foreign

Channel: Cegeka Business Solutions (Microsoft Inner Circle)

Views: 30,472

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, database, connectors, tutorial, navigation, screen

Id: mXAEBIqf960

Length: 24min 36sec (1476 seconds)

Published: Tue Jan 31 2023