Power Apps: Tutorial for Beginners (Build your first Canvas App)

in this video i'm going to take you through a tutorial on how to build your first powerapp canvas app i'm going to start by showing you how you can build an app in like three clicks in less than three minutes and then we're going to deconstruct that app understand all of the different pieces that go on and then we're going to build an app from scratch by the end of this tutorial you'll have a really good grounding in the core pieces that go on in a canvas app and tools for taking that knowledge to the next level let's get into it powerapps is included in your office 365 license i'll show you in a moment how you can get access if you don't already have that set up at your work or school you're always building in a browser so first thing is to open your browser go to make.powerapps.com and sign in with your microsoft 365 credentials once you've done that hopefully you will land on this home page in which case awesome we're coming back to that if you don't you need to go through and sign up for a trial to get started or for the powerapps community plan both of these things require a work or a school account or you can set up your own office 365 tenant if you don't have either of those all the links are in the description now we're good to go so this is the home screen that you will land on and as promised i'm going to take you through how to build your first app in three clicks let's do this so canvas app is basically something where you've got a blank canvas and you can put stuff wherever you like on the canvas and you can connect to your data sources that you're already using now there are about 400 different data sources you can connect with as a starting point here we've got some of the most common ones a lot of people will be working with a sharepoint list if that's you and you're watching this i'm going to get you to press that button i'm actually going to work with this one here which is connecting me to my dynamics 365 system because that is the data source that i'm the most familiar with that i work with all the time i want you when you build your first out power app to work with the data source that you're most familiar with and most comfortable with because that's the best way to learn so first click choose your data source second click here is to choose the table so i'm working with a database here if it's a sharepoint list you're going to choose your sharepoint list and then click that connect button now this is going to happen before i can even finish explaining to you what's going on here that this is building a canvas app a power app and it's a three screen app connected to that data source that i just chose there so what we see here and i'm going to take you through this is a browse screen that is connected to that data source so this is my crm list of accounts i've also got in here a screen that's going to give me the details so i can click through and view the details of those and an edit screen so first let me orient you around the canvas on the canvas app and it's called a canvas app because of this piece in the middle here this is our canvas we've got a nice zoom button here so you can whoa that's too far zoom in and out you can work with this at whatever kind of zoom factor you like if you want to really get in you can design this thing down to the last pixel on the screen so you can really get in there and make it look exactly as you want any colors any formatting anything in here the other thing is that we have got down the side here our main kind of navigation so you'll see i've started here and i'm in what's called a tree view now i've heard it said a little bit cheeky that it's a bit like if excel and powerpoint had a baby a bit of a stretch but it's a bit of fun so the powerpoint thing is a little bit like the navigation and that canvas in the middle and the different components and controls and screens and things that you're working with the excel type stuff we'll come to in a minute but you might see here we've got a formula bar and that's where that's going to come in so let me orient you around here first if i collapse this up you'll see we've got three screens in our app so we're working in the tree view here and i've got three screens if i click on each you'll see in the canvas in the middle that it goes to that so we've got a browse screen a detail screen and an edit screen if i go back to my browse screen and open that up again you'll see there are a bunch of components that are listed within here now i can click on these things or i can click on them on the canvas so let me show you here if i click on this icon it highlights the icon there did you see what else happened when i clicked on that formula popped up here this properties section on the right changed let me click on something else and watch again here this time i'll click over in the menu same effect i can click on the gallery did you see that change now i've got a formula that might look a bit scary don't worry we're going to come back to that and this changed on the right so the pieces that we've got going on here are your app is made up of components and controls different pieces that you're going to put on the screen and each one of those controls has a series of properties and each property has a formula associated with it now a formula can be something as complex as this in fact even more complex this is this is not as complex as it gets a little bit like an excel formula this is actually using a language which is called power fx it's an expression language it's no code so the idea here is that if you've got skills similar to advanced excel functions that's exactly the same skill set that you're using here in fact many of the formulas are quite similar and then there's a bunch more in here are things that excel can't even do now at this point if you're not an expert with excel don't freak out no one was born knowing this stuff but it's a very similar kind of level i suppose of knowledge with that kind of building logic and expressions in excel it's not like learning a programming language and this is what we mean by no code low code application building is that we're using logical expressions rather than traditional kind of programming languages all right so what we've got in here remember we've got our different properties and we've got the properties section on the right i'm going to start with something nice and simple here which is about formatting let's just collapse that back up again and i'm going to click back on my icon here now if we take a look at the icon let's have a look at the different properties that go with the icon and you'll find each of the controls and each of the components in a canvas app has different properties so an icon for instance what we're looking at here is the on select property and the on select property is what happens when you select it when you click on it so this has got a formula don't worry too much about the formula there but what it's doing is sorting you can see that it's it's a sort command that's going to go you know sort my list there if i drop down here you'll see there are other properties associated with that icon so i can go right back up to the top here and just browse through these we can see we've got things about the border color and style the color of the thing so we can play with the colors you can see that's white that's the rgba code you can actually just type in another color or for things like formatting it's actually easier to work over here so we could just change the color here too and then let's go with this nice kind of lime green there you'll see it's changed now this is called a wysiwyg editor what you see is what you get as i change these things on the canvas everything that happens here is exactly how my app is going to look i made that green that's now going to be green it's it's uh this is exactly i hope you can see here this looks like a mobile app this is exactly what it's going to look like when it's finished we can play around with all sorts of formatting and fonts and things and you'll find most of those things over here looking pretty much like the way you would do it in powerpoint or other systems like that including things like padding and so on but a bunch of extra things in there as well you can also bring in hex colors custom colors all of those kinds of things the formulas are quite different here you notice the color expects a color value whereas our on select formula or on select property expected a formula because onselect is a command to do something to navigate somewhere else or to sort in some way so the biggest concept here to understand really is that you've got a canvas you're going to put things on the canvas you're going to put different controls on the canvas and each of those things will have different properties and the properties expect formulas or colors or whatever it is that goes with that that's pretty much all that's going on here make it sound simple but then there's a world of learning because you'll see as we go through this there are heaps of different controls you can add to your app there are heaps of different ways that you can use these formulas but i really want you to think about this as a cumulative learning process if you've learned to excel before it's very much like that you don't sit down on day one and go oh i need to know all the formulas and i'm going to digest the whole book or maybe you do in which case by all means do that but you know you're going to use this in a way that as you need to learn things you're going to be able to do that and i've got a video here with some more advice and tips and tricks on how to learn and resources available for learning if you're looking for that all right let me take you through some of the other pieces here about the kinds of things that you can add and work with so we've already had a look at our tree view notice also here that everything is named in a way that's easy to keep track of good tip otherwise you'll lose track of what's going on in your app very quickly what we have here is a plus button which allows us to insert various different controls and you'll find that we've also got an insert menu at the top there so either way you prefer to get to it let me take you through the range of things that you can add i'm not going to go through everything here but a quick top-level tour of the kinds of controls that you're working with and therefore the kinds of things that you can do with a canvas app so firstly you can add additional screens nice templated screens there including a calendar a meeting um forms and lists and things so we'll come back to that keep watching because i'm going to take you through building this from scratch after i've taken you through this little navigation we can add labels and labels oops see i've clicked on it and i've just added one was that easy to do if you accidentally do something undo look at this oh and it's gone a label is something you might use for a header for a piece of text that kind of thing but you can also have other kinds of text pieces in here so not just labels but also text input where the user can type something in rich text editor pen input so signature on glass capability on your device other types of inputs in here we've got our button and in fact button has its own whole thing there you could just jump straight to button because within app building we use a lot of buttons click and it submits something or navigates somewhere we've also got other types of input controls including radio buttons date pickers list boxes all sorts of things there as well to control that user experience on the data entry gallery is the piece that we're working with here and a gallery is basically a way to list the items or records in your data source for me this is a database with a table that has my list of accounts in it that could be your sharepoint list you can connect to all sorts of things you can even connect to like twitter and so on and that could be a list of tweets so gallery is a way of viewing the list of things that are in there and it's actually very core component that you work with in powerapps when you're connecting to your data source another main component that you work with is forms which is what we've got on those screens here that are allowing you to view and edit the records and kind of update the values or the columns or the fields in there we can bring media in here as well and while we're looking at media let me just jump down to the side here and show you this button here this is where you can upload your media files so if you want to bring things like photos or videos and things in the first step is to upload them there into that media library stay tuned i will show you how to do that too and then what we can do is bring in images and videos and things you can also bring in audio you can create something that's a barcode scanner that uses the camera on your device or your webcam or new browser in order to take photos and save them so you can start to do cool things like that we've got some basic charting capabilities in here also you can connect to power bi tiles which will give you much more going on with that series of icons that are ready to go if you don't want to bring your own images in there and from there we get into more advanced stuff you can start to build out custom components you can bring ai and mixed reality into your apps that is super exciting but way beyond a beginner tutorial all right the other thing i need to show you here we've skipped over we went through the tree view we went to media and the ad menu but we've also got a data menu here so you'll see this is showing me the data sources that are connected to my app there's my accounts table from my crm system but you can actually add multiple sources in here and this is a place where you can see which data sources are connected and where you can add additional data sources if you would like to do that one more thing preview so we are working in an app here in edit mode as i said this what you see is what you get whatever i'm clicking on here i tend to prefer to work in that tree view so i can see where i'm at whatever i'm clicking on here is being edited but if i want to check to see if the thing is working and let me give you a demo of how this is working we can press this play button you can actually hold down the alt key as well and that will allow you to test it inside the editing canvas if you prefer to do that i still like to kind of open it in the preview window that's just me so what we've got here is a search and sort so i can click on the sort functionality and that will now actually give me a sort order i can search within here and let me search for the city so we've got some data in there that was in num was in sydney i can go through and find that in there i can play that through to the next screen and i get my screen that shows me the detail of that record and i can click edit and that will take me to the edit screen so this is what your pre-canned app is doing it's pretty impressive right you can just take this and use it you can change the theme you can add various things so it's a really good place to start let's close out of that and go back to the start and there's an important thing i do want to show you here which confuses a lot of people when they're first getting started if i close that preview and i'm back in my canvas where's all my stuff gone i had microsoft and stuff on the screen before where where's it all gone especially if you've done something that results in a blank screen you'll come back here and it's very hard to edit on a canvas that has nothing on it right don't panic your data hasn't gone anywhere i can't go in here and remove that as soon as i go in and do any kind of preview and return back to edit mode it's actually going to stay in the last state that i left it so if you find yourself in that situation just go back into that preview and take yourself back to wherever it is that you wanted to be and then we can close that one down and go back to where we started from so what we've covered so far three screen app built from data source in like three clicks in less than less than a couple of minutes and the core pieces and navigation around the canvas and the core concepts what i'm going to do now is take you through how to build your own app from scratch so that you see what that experience looks like i'm going to go back here to my main studio and this time instead of starting from data i'm going to make my own app and start from blank i'm going to start with a phone app and i'm just going to give this one we call this account management and i'm going to create something a little bit similar not as sophisticated to what we just did just so you can see how those pieces come together now one of the most common questions i get is phone tablet can't be responsive it actually is responsive in that you'll be able to turn it sideways and so on but for truly responsive app we have actually now got responsive containers available in canvas apps a little bit beyond the beginner tutorial though so um i'm not going to cover that here but yes that is something that you can do all right so here is my create from blank app and you'll see all the same bits we're just looking at but it is blank now i'd like to show you the other one first because it gives you a bit more of a sense of what's working with i sometimes find that the blank screen can be a bit daunting but let's start with adding a label this is a nice easy way to go so we can add a label in here and we're going to call this one now we can drag the piece around see what i'm doing here i'm kind of moving it around and you'll see as i go i can resize i could actually work with the x and y coordinates to get it more precise if i wanted to but for now this is this is good now my label has properties and the property i'm looking at here is the text property which is the word that's going to appear on the screen so i'm going to call this one accounts because it's my accounts and what i'm going to do now is instead of working through all the properties for the different formatting i'm just going to use this nice quick properties bar over the side here so just so that you can see what you can do let's give it a different um you know lots of different fonts in here let's give it a different font and a size let's make it uh centered i might actually change the background color here so let's uh let's stick with that nice kind of navy blue then i can't read that so we will make the text white there we go good start huh now let me show you how i can bring in that gallery again and connect to a data source before i do that very important thing save your app you do have to save it once once you've saved it once you're in a happy place where you're in version control and auto save but please remember to save it as soon as you've done anything first thing we do is get settings so i'm going to say and stick with this nice lime green here let's give it a nice star icon we'll call it account management and save it so back to my canvas i've got my label now i want to add a gallery and my data in there that we had before so i'm going to go here and add a gallery and i can choose what's going on if i want vertical or horizontal gallery i'm just going to choose a vertical gallery that's a bit of a mess so far right so first thing i'm going to do it prompts me and you'll find as you go through with this is a lot of built-in guidance and help like take your time and watch what's on the screen because it does actually guide you quite a lot so we're going to select a data source here and again i've got within the environment i'm working within because it's it's built on the same platform as my crm system here using microsoft database but if i didn't want to use that we've also got connectors if i go here you'll see all of the other different connectors available that i've used in this tenant before but you might have other things you want to use as i said a lot of people build on sharepoint but just you know you can build on anything any of these 400 different connectors i've built apps on twitter for instance so it doesn't have to be just microsoft stuff but i'm going to stick with the one that i used before and click on that and that will connect my gallery to that data table or to your sharepoint list or whatever it is you're using i'm using my crm data table there again still a bit of a mess now my gallery i can edit and move things around so we can grab this i can move it let's pop it here and i can expand it to fill up the whole screen that's starting to look a bit better i can also change the size of the thing in here so if i go in and edit there i can actually move this up and down here and i can also edit the data source so you'll see this is connected to my data source is accounts and you'll see the formula here is a whole lot less scary than the one we saw in the previous app but i'll do a little amendment there in a moment i can also add different fields so at the moment i'm seeing the account name and the account number when it connects up to your data source it puts in what its best guess is that you're likely to need but i can go in and change that and this is where i'm saying work with the data source you're familiar with because you'll know what's what on the screen and what you're looking for so i'm going to say do you know what i don't really want account number i actually want to work with the city because that's more relevant to me so we're going to do that and you'll see there that's just changed over and we can close that if i click on that whole gallery again let's have a look at this formula now so the way these formulas work is that this is about constructing formulas expressions in this power fx low code expression language not unlike excel so let me show you the sort formula as an example of this because that's actually quite similar to one that you'd be familiar with in excel at the moment it just says accounts and that's just accounts and that's that let's just completely get rid of that and in fact this is working on the items property of my gallery so the gallery has items in it so let's get rid of this and watch what happens if i get rid of that errors everywhere right so you'll find as you go with errors that's an error message that's showing you that you've got an error i mean of course there's an error because i've just deleted everything but what i'm going to do here is put a sort formula in and build it from scratch i could have just built it around what was there just want to show it to you from scratch so as i start typing and this is a little bit like excel as well you start typing something and it'll prompt you with possibilities so it's going ah sort okay that's a formula and look here it's actually giving you some inbuilt help on how that expression logic needs to look so we've got the source so what is my data source so it is the accounts table and again as i start typing it's prompting me that i can just click on that and now it's still got an error i'm still not done it needs a comma and then the expression so this is basically which um column in that data set am i searching on so i actually want to or sorting on rather i want to sort on account name and then we're going to close the bracket and now give it a second all the error messages are gone boom happy place so i've got that sorted in there from there you can work up towards formulas like we saw in the previous one by adding in the search box and the search by rows and all of those kinds of things and which bits it's searching by i find as a way of learning this stuff start with something basic accounts then add a sort functionality then add a search or go into that other app and just copy and paste the formula if you find something you need in there so build the formulas out this is the same way that i do this in excel find something i need to learn work it out build it up from there and then i know how to do that thing for next time okay so let's now add a splash screen to kind of welcome us now i'm being a bit slack here you should be renaming things as you go i won't do that over and over again but just to show you how i can rename my components here on the side let's rename this one so we just click on the ellipsis there rename and we're going to call this one call this one main screen and then for instance i could call my gallery let's call this one um accounts gallery it's a good idea to use something that kind of also names the type of component or control so that you remember what's what let's create a new screen now so we'll collapse this one up we're going to go in here and create a new screen and i'm just going to create a screen from blank because i want a nice sort of flashy screen i can move this up the order because i want it to come at the start of my app and i'm going to rename this one and we'll call it home screen good all right now i'm going to show you how you can work with some media things here and bring some other stuff in so let's say i want an image on the front of my app i can go in here to my media screen and i upload something so i'm going to bring in i've got a nice image of some books in there so we'll bring that one in and once you've got that in the app now i can go back to my tree view and on my home screen i'm going to use this media button and insert an image and then the property of the image is which image is it so i can just start typing that find that look at that now i can make that bigger smaller i can do all sorts of things with it the properties down the side you'll find this properties pane down the side changes in context of what control you're working with so i've got an image control here it's this one here the image position is fit you can also have center fill stretch so you can have things that take up the whole screen we could do you know tile if we wanted to could kind of create this as a background image uh i could make it um you know transparency here if we go to whoops not we're going to go 0.5 this is like on a scale between 0 and 1 so i've made it sort of fade into the background and there we go now we can start to layer things a little bit like powerpoint as well so what i might do here is i'll just add a add a button because adding a button core skill for building an app so let's click on that button and there we go that's not um got very much going on but let's make it let's make it bigger and you can see as i'm moving things around see how it gives me the guidelines so if i want to line it up centered on the screen a little bit like powerpoint again i can do that my on select property is that i want to navigate to my main screen so let's work with another formula here get rid of that i'm going to use a formula called navigate and as i start to type that i can choose that navigate to what's my target the target screen to navigate to is called main screen now you see how much easier it is because i've named it main screen if i had screen one screen two if you've only got a two screen app you'll get away with it but much beyond that it starts to get too much this also expects a comma and i can do a transition so this is a little bit like the powerpoint transition now let me show you the error while i'm here because this is a really common error that people make which is forgetting to close the bracket so just to show you here the troubleshooting we go into the app checker you can see there's an error with a formula unexpected characters and i can go through and see this and it will give me the details now when you're starting out some of the error messages can be a little bit hard to understand but if you see anything that mentions paren close that's short for parentheses close close bracket you've forgotten to close your bracket that's the easiest um one so let's go back in here and close the bracket and you'll see happy place all of my error messages have disappeared and that's all good you'll see within here you've also got accessibility checkers as well that can help you make your app um fully accessible which is an awesome feature that's built in there now you'll see i've just closed that off to the side which can also give me some more real estate to work on on the screen or i can bring that back out again so now i've got an on select i think i need to call it something other than button yeah so let's go in here and i am going to go down to the text property of the button and we will call it start now i can get a whole lot fancier with this from here it's just more of the same and learning right so i can start to learn things about for instance the the border radius i can have a disabled color a hover color let's play with this hover color here so we can say for instance at the moment this is a formula that's a color fade formula so this is basically saying as i hover over it it will be 20 of its own color the word self there referring to the existing color and it's done as a formula but i could choose another color entirely same with pressed color that's um you know doing the same kind of thing so it's kind of zooming in and out on the color as we go so you can start to play around with all of those things um the border radius you know you can make beautifully designed apps i'm showing you the principles here rather than any principles of good design let's test our app hey let's go in and have a look here now see see the hover thing as i hover over it it's going to that plus 20 when i click on it it also changes color so that's all defined in the properties of that button and it successfully navigated through to my accounts now i haven't done anything else here yet i haven't done anything where i can click on those screens to get through to the next one so let's do that as our last step in building our app i'm going to return back to my canvas i'm going to add one more screen here and i'll show you an example here of using a templated screen i could actually have done this one to start with with the list but i wanted to show you a blank one i'm actually going to create something here that is a form screen that allows us to connect to those things so what i've got here is screen 2 so we're going to call this one let's call this one edit screen and now the form needs to connect to data in the same way as the gallery connected to data let's go ahead and add it in here so this is showing me what's already there but i'm going to choose from here that data source is in my app and i'm now going to connect that form control to that and what it's giving me is account name account number main phone and city looks pretty good i could edit the fields if i wanted to i could add another field in there so let's say i have account rating i can add that in the thing with a form is that you have to control it with this little panel here so if i wanted to change the order of something let's say i wanted the city to be further up the form i actually control it from here rather than dragging and dropping it on the screen and we're good title not so good right we can go in here this is a label so you'll see as i click on it it's telling me it's a label let's go back to tree view so we can see what we're doing again and in the text we're going to call this we'll just call this edit account and looking good all right so we've got one last piece now we need to bring these two screens together we've got an edit screen that is a bit of an orphan here because it's not connected up to anything so let's go back to our main screen have a look at this gallery built in when we added the gallery we have got uh on the icon that it's selecting the relevant record we need to have a navigate command in here so we're going to go in and select the gallery and say on select when someone clicks on an item in that gallery what do we want to do here we want to navigate to the edit screen and we will use our fade transition so this is the same formula that we used before so that's part one and then let's go back to our edit screen and go to that form now what we've got we connected this up to the data source account but now we need to specify the particular item so great it's connected to accounts but how does it know which account we want the one that was selected in that gallery so we're going to choose the items property and in the formula bar here we're going to reference the um accounts gallery so i'm going to start typing that in accounts gallery and so we can select that and you'll the other thing you find when you're building out formulas in powerapps is that often you need sort of like a three-step or two or three step to something which part of the accounts gallery so we've referenced that particular gallery um in there we can press full stop and it will show me what my other options are and this is something that as you learn to build formulas this idea of putting in the dot and seeing what comes next and putting in the dot until you find the right path is a is a really good way to learn so we want accounts gallery and there's a bunch of different things that are in there and it's actually the selected item and there we go that's looking that's looking promising all right let's give this thing a full test to give it a test go back to the start because when you press that preview button it's going to be wherever you are let me just do the preview in the browser to show you how that works i'm going to hit the alt screen at the alt tab and we'll just close this off so we've got the full screen i'm going to hold down alt so you can see already when i'm holding alt it's working functioning as a test let's click start it goes through can click through there and there we go and i could edit that and it would go back to my data source all right that's the 101 on powerapps canvas apps remember it's just all about adding controls components screens each of those controls has a list of properties you will learn those over a period of time your properties have formulas or formatting and things that go with them and treat this as cumulative knowledge that you're going to build over a period of time i hope that's been helpful and more importantly i hope you will have fun with this please let me know if you've got specific questions in the comments other things you'd like to see tutorials about and good luck with your power apps learning and building journey please subscribe to my channel if you'd like to see more of this tips tricks tutorials on powerapps power platform dynamics 365 and microsoft teams hit that subscribe button and thank you so much for watching

Channel: Lisa Crosbie

Views: 65,914

Keywords: power apps tutorial, powerapps tutorial, powerapps tutorial for beginners, powerapps tutorial step by step, powerapps, power apps, microsoft powerapps, learn powerapps, microsoft, microsoft powerapps tutorial, powerapps for beginners, microsoft power apps, get started with power apps, powerapps beginners guide, powerapps beginner, get started with powerapps, powerapps introduction, learn how to create canvas app, powerapps canvas app, powerapps demo, low code, ms power apps

Id: q2gOaI7EtOc

Length: 34min 25sec (2065 seconds)

Published: Sun Mar 21 2021