PowerApps Forms - Introduction to data sources, data cards, and layout

in today's show we're going to kick off our series on power apps forms so this is the introduction video we're going to talk about connecting to your data source pulling in the different column that you need and then kind of the layout introduction of data cards kind of the very first layer in there right and since power apps forms have so many nooks and cranny's we're gonna break out into several different videos so that in later videos we can do more complex things and then the end of the series hopefully we can do some really scary stuff with our apps forms so this is that first video to make sure you have the foundational knowledge you need but first here's our intro hi my name is Shane young with power apps nine-one-one those guys in today's show we're gonna do an introduction to power apps forms so I realize you've probably already used forms right because there are all of our solutions everywhere I get that but I get questions almost daily from people on like hey how does this part work with this Parker I find that a lot of people with forms fake it be honest I feel like I faked it with forms so no big deal but what I'm going to do in this series is we're gonna try and go in and we're gonna try and cover every single thing ever to note about forms which is pretty daunting so that's why we're gonna break it up into different videos in this video though this is the first one's gonna get you going we're gonna talk about how to bring some data in we're going to talk about then how to design the form those data cards just make sure you understand some of the options that are available there and we're just gonna jump in and make this video okay so over here on my desktop I have got just a blank tablet form open nothing nothing here right and so the very first thing we're gonna add to the screen actually is a gallery right because before we can do a form we really need a gallery on the screen so I'm going to a vertical gallery on here and I'm going to use SharePoint as a data source for this particular set of videos but it doesn't matter right there's nothing SharePoint specific here matter of fact some of the little nugget something to give you about some of the other data sources so don't freak out I feel like I'm not a SharePoint person no big deal this is gonna work for you because all the data sources after we do this are the exact same exact same song word but very similar so okay so there's my gallery right it's just pulling in some SharePoint people you can see our good friend Chuy's here my buddy Greg was dumb enough to send me a picture of him driving his truck so has an ugly picture on there all right but so now we have a gallery and we can get in and do the thing that we actually want to do and this work with forms so click on forms up here and so the first thing I want to talk about right because we're gonna cover all the pieces hopefully is this whole idea there's no edit form in a display form so what's really important to understand is that 99% of the time I choose edit form why because the display form can only display data display forms are not flexible you can't change their mode you can't make them an edit form or a new form or customize them in the same way so I'm gonna have all the same options as a edit form so if you're ever on the fins like you don't know always make an edit form because I can make an edit form do everything in this play form does but I can't make a display form do with an edit form does weird I agree so don't overthink it just know unless you have a very specific reason why always use an edit form so there's my edit form and so it's like hey what's my data source what needs to be the same data source in my gallery right because how we're gonna feed data across so we're gonna say employees and so after a few seconds power apps designs a form for us now let's grab that and kind of move it over this way a little bit jus like so and we'll kind of bring it down and if we look right there's a whole bunch of field tariffs we're gonna get into what all these do what they are and so here you can see one of the first nuances of forms my form was three columns I was resizing it went to two annoying no big deal this happens I would consider this a bug if you come back in here and click on three column again it just automatically fixes it so don't ever think that but before you dive in there what I want you to do is so right now the data source is employees but it's all blank right and so what we need a set is the item property this is what determines what item is shown in here and so what I'm gonna do is I want to say I want to just use gallery one that's selected right so whatever road they chose over here that's the data we want to put over here and we will highlight let's see I'm gonna hold down the Alt key so I can click on chewie so there we go so chewy it'll be our piece of data we work on here alright that looks right to me so with a reform over here when I have the whole forum selected and you'll note that the whole forum is selected right by looking at on the left and seeing it's all highlighted you see things like alright so your data source your field your layouts the trick is if you click any three of these you get the same pop out menu so let's talk about what these do so the first one edit data that will open your data source if it can so for example I'm using SharePoint it knows how to send me to the SharePoint URL so if I click on edit data it'll fire open a new tab and go to that SharePoint list okay so that doesn't always show up just depends on what your data sources refresh this is a button that we forget about but what'll happen with me especially like if I'm building an app I don't always get my SharePoint or Excel or sequel data source right on the first try so maybe I'm like halfway through I'm in here mommy I needed a column right so I jump over to my data source I add another column so then you what I have to do is I have to come back over here and hit refresh and this will go back and retrieve this so what you want to do though is if I were to add a column I need to go refresh this one hand this one right both of those controls so they get the new version or the new the new columns a new data that type of stuff if you're having problems without the other thing you could do is just save and come back in and when you come back in they would be there but refresh saves you a lot of that okay snap two columns and three sorry kind of showed you the three column thing but what I want you to know about snap two columns is this is the key to you designing a form that looks the way you want it to look okay so let's go over here okay and so actually let's take let's flip-flop these guys real quick similar to drag the gallery over sorry I'll just cut this I'm gonna rearrange I'll be right back okay sorry about that I've never designed a screen this way we're the forms on the left and they're galleries on the right but this would be easier because of the popover anyway so one of the things I want you to know about snap two columns is what that means is if you look it tight on your man this column really should be bigger what can you do you can just grab this and drag it over so see so now dog the title column here is taking two columns I can also grab this and this will make the whole row vertically taller or shorter so this is a handy way when you're designing your forms because I have had customers who have tried to go in here and say you know I don't want this snap to column so he undid that and then he had come over here and he's like I want this to be just like that and it kind of worked but he would press the wrong button or click their own thing and they would Auto flow everything again and it'd be really messed up I would never build a solution where I wasn't using snap to columns so we do that it's gonna reset everything back boom now what he could have done though because he wanted to have these different be different sizes one of the things you might do is you might say instead of three I want to have a six column layout okay so power apps didn't reflow and squish all my data but now I have half columns so look so now I could be like all right you guys split that right because now they're both across three columns these guys are all across two columns so the same look but a little more flexibility and if you get really crazy then you can go over here and say all right I want to do you know twelve columns right and then you can even into really tiny increments so that's a very important thing you're trying to visually make a form work the way you want to try to stick to snap two columns and then just take advantage of the fact you can it put on twelve and move and expand in different pieces you'll always be happier that you did all right so that's one of the tricks I wanted to make sure you guys understood was this whole snap to column another piece that comes in here is what if you know okay I want to kind of do this but I don't want I want title to be up here all by itself but I don't want it to be all the way across because I just look silly I don't know what you can do hit these ellipses add a custom card okay this is going to add a custom data car so if we scroll down here in the bottom data card one I'm gonna grab this card and you can do this with a car gonna grab it I'm gonna drag it up and I'm gonna put it right behind title boom just like that so now if we scroll back over here so now I can take and make title whatever size I want oh yeah that's what we wanna do a title and you know what that custom card got too big so we're gonna kind of grab it and make it smaller but so then now we've kind of done this so now we and if we were to hit play in preview our app I've got this that dead white space that you wanted to make your form look better or maybe what you want to do is come over here and so then now it's you got that white space maybe you want to have a cute little picture I don't know what's a cute little picture probably not put an airplane on here we're talking about travel and this is another thing that people do wrong look what happened icon one is not underneath my form it is on top of my form but it is not part of my form I make this mistake people on my youtube channel make this mistake all the time no big deal who's gonna delete it we're gonna click over here in our data card see how data card one is now highlighted and now we're gonna say icons and if I can find and we're gonna do a bell now but I don't want to find any are playing it but then now I've got this cute little you know icon here so I could put some text and instructions like put the company logo but I had this kind of a little bit more of a design experience by just using that custom card and putting data in there all right so that's another one of the tricks I want to make sure you understood all right so speaking of cards let's go back over here so let's click on form one well click over to this so here's all of my pieces I'll guess we talked about layouts so layout vertical versus horizontal this rooibos determines whether title is above the field or to the left of the field in this example I have never made one with horizontal to be truth be told they're always vertical I don't know why no reason just always has I so then the next thing that I want to talk about is customizing these alright so if you look at title oh let's not go that far you just click on this so for every field that we did we're a data source we had power apps creates a data card for every field that we're showing so when I click on this field you can see that the title data card one is down here remember good naming conventions and make your life easier but I'm not going to make you watch me name a bunch of stuff but notice with this data card what happened is there's a few things so star visible one so this little star shows up because this is a required field and so power apps built in some logic to show that only when it's acquired error message if there's an error like you forget to fill in this one the error message shows up that's driven right here and once again that's also hidden but if you want to change it it's there the data card value this is a piece that we most often will mess with right because you want to customize you want to change this to be a different behavior different defaults calculations whatever you're trying to do most of the time this is the piece that we're going to do but that's the input field and so the way that that input field is determined if you go back over here and look so you can see that title when it connected to my data source it said hey that's a text and so if we hit this little drop down you can see here are some of the different options for formatting and how you'd want that text drop-down or text column to manifest itself over here honestly I almost never like literally never change these or even using these options here which is probably you know a mistake in my part I probably recreate some things are here for free but the reason I wanted to talk about this with you today it was not to tell you that I was making mistakes not bad though and I wanted you to know that this is important for you understand if we click the ellipsis that the title so field name is title field type is string power apps determined for us that that was a string field went connect to the data source you can't undo this if power apps chooses the wrong field type for you you need to go fix your data source you can't tell power apps no this is not really a string this is supposed to be a number I don't know why you're saying this in like SharePoint sequel CVS that type of stuff I don't ever have a problem this where this comes up a lot is with my people who are doing Excel driven solutions so in your Excel table based on the formatting of the column power apps tries to determine what type of column you have and so a lot of times what will happen not a lot sometimes what will happen is Excel will get confused and will tell power apps that that date column you're showing it is actually a number column or is a text column and it causes you a lot of grief and in those cases I just don't have to go back to Excel delete that column and recreate it and make sure that the formatting is the thing I want power apps to see I've not been successful once power app sees a column is something that's not correct fixing that column in Excel I always have to create the call recreate the column and get to work so maybe you'll have better luck but I just point this out to you so you make sure that if you're having data problems with your forms that you're making sure that the column types right so this is a field type complex you know you're making sure that power apps and your data source are talking about the same thing and if they don't you can't fix power apps you've got to go to your data source and get it to show power apps what power apps expects to see so that one causes people to lose a lot of sleep so I want to call that out also with data cards and we're not gonna do a bunch of it but if you looked at this you know hey I don't want this to be title I want to be this to be awesome title sure why not right you can't modify this right it's grayed out the reason for that is if you go over here and click on advanced you're gonna see that by default all the data cards are locked this keeps you from doing silly things on accident but when you decide you really want to do this silly thing what you can do is you go over here and say unlock to change properties now as soon as you unlock it notice that title went from purple right like all of the other ones to gray like that data card one that's because if you click on this now this is a custom card so you've told power apps you want to be in charge of how this card behaves and do and a lot of the solutions I build I have to do this almost all of them so I wanted to make sure you understood you could use advanced and so then now I can come up here and say you know now I want this to be super title and so then now the display is super title alright so that's important to understand that's how you do this now if you get in there like man I really messed this up right it's my first time doing this this is not working right no problem what you can do is so right here we have the title custom car scroll the bottom down here at the bottom somewhere on power opposite being rude alright what's unselect or or let's delete this card we're gonna say delete this custom card when we delete this custom card now down at the bottom there is is our title and if we click on it it turns purple because it's now a locked default power apps controlled everything card and so then we can drag it all the way back up here nine times out of ten I can't get it to drag to the top so I have to drag to the top or one below and then drag the bottom down I've seen it work but I can never get to work so then BOOM now we're back to our design right we can grab this and so now it's not it's like we never did all that crazy customizations that we just did so I want to make sure you knew about that also remember you don't have to unlock the card to do everything so with this car if you decide you know you really want this text to be in a different color well you can change oh but you guys spell it right you can change the color and things like that without unlocking the cart right still locked so not all changes required visual ones don't don't structural ones do and speaking of structural ones and not going to go down this rabbit hole but make sure you also understand that how does this data card know that when you put in dog here it needs to write that back this is Google preview of one more advanced things we'll cover later but if you look right here there's an update and so what update does this is says when we submit this form later this is what is going to drive we're going to write data card value 22 text which you write what is that well that is this right here he's going to write that text value to the data source where edit the data sort update the data source so update is how we control what gets sent when we go and do this so a little more advanced something we're not going to do over today but I think that is something that's important now the other thing that I want to talk about here is we're going to go in and now that we've kind of got this going the way we want what I wanted to do also though is there's a bunch of columns here I don't want to see especially there's SharePoint data sources I just go to the bottom here just start unchecking these things right go away no one cares about any of you [Music] right and we're not breaking anything they were just changing what is being displayed on the screen and so speaking what's being displayed on the screen one of the things that I will sometimes do is maybe I have a column in my data source I want to up but I don't want the user to be able to update it right I don't want them to know I'm updating it so for example a lot of times I'll make a column on like in like a sequel database I'll make a column for what user submitted this and I will just write that data directly so the column shows up over here and then remember that with each of these data cards I can control get the drop down here their visible property so if I don't want to show you who this was modified by it all right I need to do false which would be silly because that I might as well have just unselected this box right just get it off the screen but what you might do is put modified back right now it's mad at me so yeah I'm not going to show you modified this whatever you'd be grumpy you do you right but what you can do with this data card is maybe you only want to show it to them certain times and so what we'll do in the next video is we're going to go in here and we're going to look at how you might set the visible and make this an if so you'll say hey if this is a new form hide it if this is an edit form hide it but if this is a view form show it so then that way based on the mode form the forms mode then you can control what the experience is so I've shown that in some other videos and I think we'll just do that in the next video where we talked about the different cards or the different next level we're gonna talk about the form modes and that type of stuff in the next video because this one's gonna be long already um I think from the design point of view though I think this gets you guys going right so this helps you hopefully understand how you control your forms some real core form basics and so that we're kind of starting to move down the the path in the next video we're gonna go in and we're gonna start with this same exact form but we're going to introduce some buttons around changing the different form modes so you can learn to manipulate those so hopefully you enjoyed this hopefully this helps you if you have any questions about this hit me notes below also if you look in the comments that's where I'll leave a or the description somewhere down there I'll leave the link to the next video but what are we gonna record the next video so as I stopped recording this one so hopefully they're coming out very close in proximity all right thanks and have a great day hey it's me again if you got a second click the subscribe button that always keeps me making more videos or if you want to work together need some help getting your power apps going hit me up with power apps nine-one-one always happy to work together or finally if you're always looking for more videos that's probably what it is check out the power apps playlist over here and you know enjoy that alright thanks and have a great day

Channel: Shane Young

Views: 224,547

Rating: 4.9008646 out of 5

Keywords: PowerApps Forms, Shane Young PowerApps, office 365 powerapps, powerapps tutorial, powerapps forms, powerapps forms - introduction data sources cards and design, powerapps forms tutorial, powerapps form design, powerapps forms excel, powerapps for beginners, powerapps data card, powerapps list form, power apps, microsoft powerapps, microsoft powerapps tutorial, powerapps in office 365, learn powerapps, powerapps forms sharepoint, powerapps forms video

Id: yT4gGVunU0o

Length: 20min 20sec (1220 seconds)

Published: Fri Aug 03 2018