Power Apps | The BEST Power Apps Form Strategy | E022

okay so in this video we're actually going to start building out our form so in the previous video we went through a lot of thought process strategy laying out our wireframes our diagrams our list schemas in excel and it is as boring as it could have could be very fundamental very important strategies to think before you start to touch and start building out your forms in this one we're actually going to start building out the form it's a long video probably double or triple the size of the previous one but this is the one just imagine that i'm sitting with you and your team we're building these together you're getting a lot of tips and tricks from my experience and building these out and some gotchas some some tweaks over time of fine tuning of the strategy fine my process on building these forms and now i'm giving you all of this side by side even when i walk through this i make mistakes i didn't cut them out in this video because i thought they were important because some of you may fall into some of the same traps and how do you backtrack and find a different approach and then try to understand why our previous attempt did not work some some of those are in the video because it's so long it's one of those things where you want to take a chunk in absorb it or even apply it if you're currently working on the project pause it come back to it in a few days but do your best to get through the video it's only an hour you can probably sit through it but it's it's action-packed it's very dense there's a lot of tips and tricks in here enough of me rambling let's get started [Music] okay so now that we have our subsite this is where we're going to build all of our lists so again if very similar to what we mentioned in the previous video this is all of our lists that we need to build the different columns column types that we have for each one of them and notice two things to to make note of we have internal names and display names for each one of these columns so say for example we start to build out our clients list let's just go ahead and to our sub site go new lists and of course i'm going to do blank here and call this clients and i'm going to navigation if i need to hide it that's fine but even from a build perspective having this in the navigation is easy to bounce between them now you will notice that in our list for the title field again as i mentioned in the previous video you have to deal with that title field either set it as a default value which is some of the things tricks i use in other lists right so if you go to sales rep as an example i note here in the comments field that you know just use the title field as is but default it to the word sales rep and then we will use that to control this because all the other columns that i need just didn't fit that single line text which is the column type 4 title i need a person field type for the rep and i need a lookup because the dealership is stored in a different list so you know i really didn't have a good use for that title and that's why i represented here so in this scenario um for title i'm gonna just do full name which is gonna be a concatenation of first name space last name inside that field and we'll do all that fanciness and power apps and i want to say everything else is is pretty straightforward but let me show you these two then i'll pause the video go ahead and build this out there's no sense for you to sit and there's no value in you watching me build all these out in the repertoire's way so here if under title i want to rename this if i i have this rename option here right but this only changes the column name in the view not necessary on the list itself so for title and only the title field i actually have to go to list settings click on it and then change it to full name and as i mentioned before my display names are going to be user friendly with spaces special characters or anything along those lines so here now let me go back to clients and now for the remainder of these columns this is my internal name and then this is my display name so in short i really just have to touch that column twice so i love this modern ui in a way to interact with creating columns so i do this majority of the time unless i need something that's hidden under this more option here like a legacy column type or a column type that they don't have listed here that's the only reason why i flop over to the classic mode so for all intents and purposes i'm really building this out here so let's just do first name and we know my internal name is fname and that's what you have to name it first and then you just come back in here and edit the name and then just give it the user friendly name and then hit save now the internal name is always going to be with the column and you only have a single shot at that internal name so if you forget you have to delete the column and start that process from the beginning now the only way i can see the end well there's a few tricks you can do so if i sort by the column you see up here in the url as you can see i can sniff it out that way but a clear way to get the internal name when needed and this is really when you get to like a pro dev or a development cycle to where we actually need to reference the internal name like in a spfx web part or maybe we're building something with the pnp sdk uh core framework those are going to be internal name references so it to get the internal name what i normally do is go to list settings click on the column i'm interested in and then as soon as i get to this detail screen for that particular column right here in the url all the time 100 of the time will be the internal name for this so let me pause the video let me just go ahead and crank out the rest of these columns and then i'll come back to you okay so for the most part i have most of the uh columns here there are a few of them that are missing uh there and there's a few that i wanted to call out so anything that required a lookup column i did not create because i need to have this list created first in order to make that reference so that's going to come with the second round the one thing i do want to highlight is the client id now prior to a recent change i would say recent probably within the nine last nine or nine months or a year ago um i always wanted to use the number for the client id because that was a natural fit you know usually with ids you want to have this number to represent it but i stayed away from it because we could not turn off commas right with the thousands separator so now what's happening microsoft has since then released this ability to turn the thousand separator off um so now we can actually use numbers in its purest form now as far as decimals uh that's gonna be zero in this scenario and um i think that's all i need to do uh with this as far as settings on that so i'm i'm paying special attention to the client id column uh turning off the thousand separator and making sure it does not support decimals because we don't need that we're only dealing with whole numbers outside of that um i want to say we're ready to rock with building out the rest of the list so i'm going to go ahead and build these out uh you know based on these types and again this is really really straightforward this is just you know standard sharepoint columns and things along those lines so i'm gonna pause the video build these out and then i'm going to go ahead and wire up my lookup columns now understand that when it comes to a lookup column when you go to add new you're not going to see that option here that's going to be under this more ellipsis here and then you're going to be able to do a lookup and this lookup is going to be locked in the sense that it will only consider lists that are within the same site and again and some and for your scenario you may not have that luxury right so if you look at some of these column types there may be say for example dealership that's going to be more that's going to be outside of your sub site when you're talking about clients in the crm because there may be a master list of dealerships in that scenario you will not be able to use a lookup because this list will not be within the same site as your other solution so in that scenario what we would do i would have i would represent the dealership as a single line text right and then just use power automate to bring in the dealership list as a data source and then dynamically drop in here the selected value are in some scenarios i may have two columns one for the dealership id and the other one for the actual dealership name with the understanding that i'm updating both columns based on the selection of the user within powerapps so those are usually sometimes some some of the tricks we had to play if i'm referencing a list that's outside of the current site and i cannot leverage the lookup i love the lookup because on the on the view perspective it has a more integrated experience when you're looking at the dealer then there's a hyperlink to that actual record on the dealer list and some it's just a convenience thing more than anything else and then the necessity but yeah you absolutely can't achieve this uh re you know this look up or this uh foreign key uh foreign lookup list relationship just using a single line text and a drop down with the the listen in a dynamic way and we'll walk through some of those scenarios as well all right so let me pause this video let me go ahead and build these out and then i'll come back to you okay so i have all of the lists listed here i have the dealership so i actually just went right to the tesla public facing website they have all of their locations listed and of course you have to look at the dealership location versus the charger locations i just listed the ones in ohio have those listed with the managers in the date so let's just add one just so you can just see how smooth it is especially when using the location column versus the different explicit columns for to build out an address so here with the location i can just start to type the location so this one's going to be 1125 north broadway avenue in oklahoma city so if i just start typing 1125 north and then broadway now i can look well i see this is just such a common so it's broadway avenue right so now i can look here and this is the exact location and not only does it have the location so let me just go ahead and put in the manager for this one so let's just select kevin and then the start date let's just say this was built in let's just say may of 20 11 or something like that and then the rep count let's say there's 16 reps there and they have 23 vehicles on hand and then we just go ahead and say this all so now that i have that location field notice what happened with this card this card not only gives me the location and i can quickly copy that and and jump into probably google and anyone else that can verify this but i also have a bing map which is very very convenient again when it came to the client side because i know on the client list i wanted to create a custom powerapp form i i and we're going to figure this out like i haven't played around with this as of late to see if the location feels is supported in powerapps but that would be the the caveat right so um again because on on these fields here i don't plan to customize this form because i think this form is very straightforward there's no logic there's no cast gain drop down there's no additional validation there's no columns i want to hide or show there's no layout i need full control over so this is a candidate to use out of the box even with layout like if i wanted to lay this out a little bit differently i would probably use the configure layout and then kind of use the the json formatting to format this and probably put in like a header or maybe shortest and a more of a horizontal layout versus a single column vertical layout i can have all that flexibility available to me without jumping into the custom powerapp form scenario so for most of these lookup or utility lists i can get away with the out of the box but for my clients this is the one that we want to customize to make it a little bit more easier for the admins who's going to be managing the solution okay so now that i have everything built out let's go ahead and start building our custom form that we're going to use for the admin so the solution and in order to do that the easiest way i found and there's a difference right so i can go to this scenario and say customize with powerapps and then it will generate a custom form or i can go to integrate powerapps and then customize the form now the two there are two paths and in the end you ultimately land in the same destination which is power app studio the biggest difference though and this is one thing to note if i am troubleshooting the data that's provided by this particular list item i will want to go this route because this is going to launch powerapps studio and it's going to preload this it's going to bring this information with this particular item whereas if i launch it from this route this would just be a generic uh form and i i can't remember if if the form values would be empty or if it would just grab the first item in the list so that's a distinction to make it's a subtle one but if you're troubleshooting or you're trying to play with a formula and there's a certain value that you need that use case in and you have a list signing with that then you want to go launch this from the list item so here for our scenario because we're creating this brand new we're just going to go ahead and launch this so assets loading let me flash back to [Music] our [Music] form and this is what we want to get to so let's talk about branding a little bit so when when i build these out my branding is very very light i i leverage the the out of the box theme uh usually the gray thing we're gonna go and set this all up and this just saves you a ton of time right because if as soon as you jump in here and start customizing the border color customizing the the font size customizing the font color label colors and and all this other jazz you you set yourself up for a very expensive maintenance story right so what i do i go very broad stroke out of the box i use the theme and i do a pepper in our very light pepper of the branding right so the brain is just going to be the logo top right the branded color uh anywhere that i can usually the branded color is going to be my primary color so if this was a a blue then my border will be blue of course my logo would have some tone of blue whatever the branded logo is all of my my highlights are important colors primary colors that i use in different components is going to be the branded blue and you will notice also with the cancel right the cancel that's the branded tesla color the cancel font is going to be the branded tesla color and again and that's how i pepper in the brand so if you look at this it feels tesla right and it doesn't cost you a huge maintenance story because we went crazy and did all the borders uh with the tesla red and so on and so forth so just keep that in mind uh with the brand new okay so where we are so here we are in power app studio the first thing you do you get this mobile mode so the first thing i love to do is to change this to one of the standard layouts so i just go to file go to settings go to display and then one change the orientation to landscape i get this warning that you know changing that to landscape is going to distort whatever components you have on the board that's fine we can easily adjust those and then from that landscape for now i think i'm going to leave it the the height usually once i get this orientation in landscape and i take that default value that 1185 by 790 most of the time what i have to do is cheat this height a little bit more just so that i get a little bit more breathing room for that keep in mind when you're building that custom form you do not want a double scroll and the double scroll is the is the scenario that you get when let me just flash over to one of these so let me go to clients here the double scroll is going to be where you have the scroll bar from the browser and you also have an inner scroll for your form component because there's not enough height on your screen to allow the form to stretch all the way out without having to scroll that's that double scroll is the scenario you want to avoid when you're using a custom form scenario now if you're doing the canvas app you're kind of locked in because the canvas at the the landscape tablet mode is going to lock you in on the hype because you know that's the optimum height for ipads and for desktop so you're going to have play within that limited space for canvas but it's only with the custom form for power apps do you want to avoid that that double scroll and this is where i'm gonna play with the height so for right now i don't have a need to do that i can always come and touch this later so at for now i think i'm good to go so let me just go back to this screen and the other things that i do and this is really really important especially when you start writing formulas i rename always rename my screen and my form component so here i'm just go ahead and i just rename this with screen main and i prefix these and these really help you when it comes to intellisense right because when you're writing your formulas it's going to try to help find what you're looking for and you know my variable names you know i have a naming convention for that my screen names and form names from any component that i use i have a naming convention of that because at any time that i do like a navigate and i want to find the form i'm gonna just start typing the word form and then that's gonna help my intellisense filter down to all the forms are available to me and my solution so very large solutions you want to come up with a naming convention game plan and kind of stick to it okay so now that we have that the other thing i want to do is really start to shape um this form component uh in this way to really kind of move this in the way uh to where it needs to be moved now one of the things that i i usually have that i usually have to pay for with changing the size is that my font size and this really seems small that's why i was zooming in because i was like is this that standard size or is that zoomed in so it looks like this was zoomed in because i changed my my screen size and i don't want to play with this i don't want to get into a situation where i'm selecting each one of these trying to cheat these back to because 10.5 i think is the the default size not 105 or 10.5 and i think i think that's right so the good way the best way to check and see if your font size is the standard font size is to select your form component go into edit mode and then select another field from here it could be random right and i'm gonna select that and if that comes in with the standard size i think we're good to go this does really seem small but i think it's just because i'm zoomed out all right so i think i'm good to go i got a little antsy there but yeah i think i'm good to go all right so now what we want to do is to start layering in our major areas of the screen so again if i flash over to my wireframe this is a label that's a rectangle and that's the logo and then i have this site guided navigation or breadcrumb navigation and then i'm gonna have my form in the middle so let's just go ahead and drop in those components so we know what type of spacing we're working with so let's just go ahead and bring in the rectangle and that's gonna be this guy here uh nope i shouldn't be prompted to unlock i didn't have my screen selected so let's try that again so now i have the screen selected let's go ahead and stretch this out i usually go with a probably like a three or four height um on the width of my rectangle and then just arrow this down and the rectangle is tricky right the rectangle you have to be careful with this because you notice that these hover colors and if i click on there each one of these the hover color and the press color they they have the same value but i want them to be dynamic based on my fill color which is going to be this color code here so every time i drop a rectangle in or i copy an existing one because it's going to be peppered in with this formula here's the strategy the strategy is always for the hover color select that uh explicit value here or hard coded value and go with a formula and the formula is going to be self which is uh look at the current component look at myself dot field and that's going to be the property of the field value and i'm going to just copy that and then go into the press color and then paste that in and that's just going to allow me any time that i change this fill color right so if i go with this red notice how these were dynamically updated for the disable i don't plan to disable my my rectangle so i'm okay with leaving that as is or just for the sake of consistency i can go ahead and drop in that formula for all three so that's one of those gotchas that you kind of run into and you know that's a thing right because usually what happens if the hover is a different color you mouse over it and you start to see this flicker effect which is very irritating and annoying at times okay so that's going to be my my border that feels a little too thick to me so maybe let's do a three and i think i'm okay with that the other thing i want to do is just go ahead and drop in my text label and this is just going to be the title of my form and i usually notice what i'm doing i'm taking that zero zero coordinate so zero y that's going to be that top left corner right and for here i'm gonna just probably punch it up to a 24 yeah that doesn't seem too boxy and i'm just go ahead and type in my title so this is going to be client details which is going to be our first screen now the question is is that butted up too far left that i easily adjust that by using the padding i don't use an uh the xy coordinate to try to move it i do the zero zero do a 20 padding which is pretty standard for me and that's going to pump bump that over where it needs to be so now for the far right all i do now is just drop in my image component let's go ahead and get that on the board scooch that over to uh the far left now this one i will cheat over only because i need to make room for the scroll right again so if i if i'm looking at this from the client view i'm going to get this scroll bar and that's going to take up probably about seven pixels left to right um so i always have to allow for this bleed just so that the scroll bar is not covering up the component and you won't notice this until you publish that form and you can really start seeing it so just rule of thumb and from experience i always just kind of leave a little gutter here and i never try to do anything on the edge on the far right the the rectangle border for the border i'm not concerned with it's really like text copy or anything else that i know may get cut off through that scroll bar so i always leave myself enough gutter uh or our whale on the on the right hand side so now let's just go ahead and bring in our logo so i should have a folder for all my tesla stuff my tesla logo is going to be there hot and heavy ready to rock i can fill this in or fit i think i'm closer with the fit and just i mean this is really just eyeball the big takeaway here just leave enough room for the scroll bar this is an extra image component that came on we don't need that so we delete it and notice that i'm not going to go through and name every component on the board i think that's just a waste of time any component the rule of thumb is any component or value that you use in an expression you want to give it a meaningful name you should not emphasize not writing expressions with these default values right data card value 4 means nothing in an expression and when you're troubleshooting that's when you kick yourself because you took some shortcuts and you tried to take the easy way out and did not spend the 15 seconds needed to rename this and it would save you a ton of time in the future right okay so once we have that the other again i'm looking at my wireframe here in the separate screen let's go ahead and build out this left area on the side so to build that out again we talked about we want to use a reusable component because we are are a custom component we are going to use multiple screens for for this layout for this solution what i do what i normally do i go ahead and build at least the baseline of this on the default screen and then i copy those and then create my custom component so let's do that so for this uh to create that nav you just start with a circle and you want to keep this pretty tight so let's just go with a 40 40 circle that looks good and we want to go with our branded color and this is not i i'm just selecting the default rate this is not the branded rare but i can find that somewhere um hold on let let me find okay so i will tell you where to pull up the brand guidelines for tesla it seems like for the web this red color is going to be that e 31937 so what i'm going to do now is if i select this circle go into my fill color go into custom there you just paste it in there that's going to be the custom red again the same effect that i have with my rectangle notice that my disable hover and press colors are going to be the blue i want to go ahead and pepper this in with the right of color based on uh feel so i'm going to use my formula so let me if i do this in preview notice this is the impact that you have see notice how my mouse mouse over there and it's flashing that color dropping in this formula will help combat that so i actually have let me save something off here i actually have that hex color on my clipboard so i want to save that off and then i'll just come in here do myself dot feel select this and copy go into the hex color paste that in press color paste that in and now we should be able to rock and roll okay so now that i have that piece the next thing i want to do is to continue with my circles and then i also want to put these labels and then we have to get that line there in the background so um the easiest way that i've i've known to do this is to go ahead and position your circle copy and paste this again this is going to give me the formulas uh that's part of my coloring scheme and then i'm going to go ahead and put these on the board here and i'm going to select these all and then there is a very handy alignment and you can distribute the spacing vertically between the first item and the last item of that selection and that's going to even space everything out once that's done i use this as my guide to kind of build everything else so now if i go into uh my text label the text label for this one this one i will have to eyeball i do want to bump this up maybe bump this up to what's the next one maybe a 12 right and then maybe do a semi bold on this one and then this is going to be client details so double click call it client details and then i paste this copy and paste that one and then this one's going to be engagement that's the name of that step and paste it again and this is going to be uh vehicles okay so now that i have all of these in let me just zoom in and then just feel like uh these are center with the circle there's an extra padding here that i want to zero out and that's going to align this text within these uh the text box and now i can use the text box to center with the circle which would in turn make the text center with a circle okay so i feel good uh with with the alignment of my my text the next thing i want to do is to drop in a vertical another rectangle to serve as my vertical line and with this one i i'm just going to just draw that as a line there so the width of that one i'll probably go with a three and then use the eyeball to center this now i'm using the arrow keys on the keyboard i can't quite get it centered it seems like it's jumpable the arrow keys are jumping a few pixels between so now i just use my xy corner to kind of fine tune it all right so the goal is to hide the the rectangle behind the circles so now i'm just going to go to my alignment go ahead and drop this to the back i'm sorry there reorder send it to back and then drop a nice brush it with a nice little gray or charcoal gray and the same as we did with the other ones we just do a self-feel formula and that's going to get all my other color placeholders to match my feel now if i flash this over back to my wireframe a couple things to note the only the bold and the darker colors for the active screen everything else is going to have that muted gray color and we want to replicate that effect here okay so that's kind of the impact that we wanted to the effect we kind of wanted to have the the last thing we want to do is to have a pinch strike a nice pinstripe rectangle right here to separate the navigation from the form so let's just go ahead and drop that in okay so now that i have this in i probably want to touch this a little bit and probably just a lighter gray just so that it's more of a a pin stripe than it is um a thick defining border or separator between the two okay so now that i have this piece down this is one of the pieces i this is one of the steps i should have done much earlier in the process and that is to set my theme now what i'm going to do with the form component selected you would see this theme drop down here i always go under the office and then select the office grade all right so now that i have my theme there i can reposition my form on the field and here's the other trick that i do when dealing with the form component notice that in our wireframe some rows will have a two column layout some rows will span across the two columns so any if i have any scenario where i need to have a two column layout i must set my grid or my foreign control to display at least two columns so i'm gonna do that you know selecting that there the other thing i need to do if i need to span this across to a single row then i would just double the the width size in order to to force that to span now once i have the two column layout now i can go ahead and add in all my needed fields to my form component so i just select my form component go to edit and again this is what makes this really works because this this field this form component will be flexible enough and give us a lot of capabilities and flexibility of in our layout and not cost us a lot of time with chasing x y coordinates throughout the screen so here i can go ahead and select my first name last name i need my address address 2 and then i need city country state and zip and i i need full name but i don't need to display full name and here's a tip because my full name is going to be required um a required field so what i'm going to do is let wait let me just drop in the the missing field so i need city state country i need them to select the country first i also need the zip code and i also need i think that's it now notice how i did that i selected these in the order that i need them to display on the form and i i use this x in the search box to reset it so that way i can find other items to filter once i'm done i click add and based on the order that i selected them in is the order that they will be added to my form very very convenient so now i'm gonna do a collapse all here's another pro tip anytime that you're hiding a field in in this scenario we're gonna hide the full name you want that to be the bottom of your collection because when this thing builds his grid it really looks at the order behind the scenes of what these fields are in and that saves you from trying to order something and because you have a hidden field in the middle it actually makes room for that hidden field on your form component so what we tend to do anything that we're hiding we always make sure that's at the end of the list and make sure that whatever we're displaying to the users are going to be in the same order consistently consecutively in these ordering lists anything that we're hiding even though it was originally at the top we're going to stack all of those at the end of the list it will save you a ton of time when you try to order uh reorder some of these items so now that we have full name what we're going to do we're going to hide this actually let's just leave it display until we pepper in the formula needed for that and now we need to uh reposition all of our fields based on if they're single row or they if they're going to share the row with another uh component and we have a few uh tricky things that we have to account for but look i think it's not going to be that bad so let's see so the first thing we want to do is address needs to have its own row so we're just going to double the width right so this is going to be 6 14 and then same way address 2 just double the width 614. uh city has its own row a country a country is actually above oh this is interesting so i need to sell i need to do a drop down for country but i do not have a separate drop down i do not have a separate country column let's look at this this is actually pretty interesting so what's happening if you look at my country state i actually have a a key value payroll really just you know the the the country the the state full name and then the state abbreviation or state code so i have that for both united states and canada now in my client list i only reference one one of those and that's going to be the actual state drop down and it's going to i'm using projected columns that actually brings in other columns from that country state list right so any one of these i can if it's a valid column type that allows it to be projected any valid column type from this lookup list i can project on here on my my client list and anytime there is a change in the state this will automatically update to reflect that now notice that in powerapps that those projected columns are read only and i really need a drop-down list for them to select the country so in order to do that what we want to do is to and i didn't anticipate this so this would be fun to walk through without what we need to do is create a custom column of create our own drop down within this is going to be interesting create our own drop down for for country right so first things first let's do this i think i have a way i'm i'm designing the solution in my head that's why i'm hesitating a little bit because i'm running through several different ways that we can solve for this let's do this let's solve for because i love reusing data cards um and i think that's what we need to do here so let's do this let's position this first off in the right position so country needs to go above the state because i need them to select the country first that's going to be a filter on the state zip code doesn't have any logic and then full name eventually we're going to hide so i'm going to have this country selected and this is going to come in read only so there's a couple things i do want to do here i don't want that state colon country so i want to rename that and let's do let's just change the display name for that on the data card and because we're changing the display name we have to unlock it so let's just call this country the next thing we want to do is this is going to be conditional we only want to show the select and this is going to do its thing based on the state right so we only want to show this in view mode but for new and edit we want to show a drop down so the first thing we want so now what we want to do is go into the visible property and say um only in in new mode that we wanted to do that now one of the things i always do and i haven't done this yet is in my sharepoint integration and this is this only applies for custom forms custom forms actually in some scenarios more complex than canvas app forms because you have these different uh scenarios that you you have to account for with the form interacting with the sharepoint list what do i mean so here i have a sharepoint list and i have three scenarios that my form state will fall into the one scenario is when i'm creating a new item this is called the new form mode right our new mode the other one is that i'm viewing an existing item i'm just clicking on it notice how everything is in the read only state and then when i click edit this is edit mode so i really have these three modes that i need to account for now here's here this is what gets a lot of people tripped up the sharepoint integration is going to account for those three scenarios right so there's my new there's my view there's my edit it also has some other things that you can do like once when you click the save button and when you click the cancel button that's going to be these guys here so when if i'm edit if i click on save you can do some unsaved action and if i click on edit it can interpret that event or get fired on that event so you can do it on cancel action that's what the other ones are for now when if i click into new basically what it does it looks at my main form and it makes that into new mode meaning that it primes it that says okay you're going to collect some information and you're going to create a record whereas if i go into edit notice what it's doing to my form main it it calls this special method and throw that into edit mode meaning that it's going to prime it says okay you exist already we're going to make some changes so when you do a submit form i'm just going to update this record and that's going to save you a ton of time compared to the patch statement that a lot of other people are using right i'm telling you the form component saves you a ton of time you just have to understand it's nuances and some of the the trickery behind the scene and the same is for view so it's going to mark this form into view only mode which means that most of the things are going to be read only just understand what it's doing so with all of that said what i love to do is to set a global variable and i do a set and here's another thing always use set when you're setting your variable don't do update context it locks you in update context is supposed to be a quote unquote local variable but when you're doing a multi-screen scenario or when you're setting a variable at the sharepoint integration update context does not apply because those do not bleed across the different screens or components outside of that screen and sharepoint integration is going to be key so to avoid i'm telling you because you're going to be chasing your your your tail on trying to debug these things because some cases you use update context in some cases you use i always use global variables right i haven't seen a strong enough use case to say dang i wish i didn't use a global variable in that name and if you're not using global variables because you want to use the same variable name in different scenarios that's a recipe for disaster right keep your if your components are global right and you need you need unique component names throughout your entire solution which spans across forms across screens everything within that solution your variables should follow the same format right and you in that variable should be responsible for those values understanding that it can be set in many different scenarios so these are just some techniques and practices that i see in a lot of training videos that could potentially have a very negative impact especially when you're troubleshooting because you know some of the decisions that we make now makes the maintenance and troubleshooting that much more better or worse right so here what i do i just do a four main i'm sorry a form mode and i know i'm in the new mode event executed so my form mode is going to be form mode i'm going to use this enum here and create this to new right and that's going to go ahead and set that up now notice i do the trailing semicolon that's not necessary that's a preference i just like it because just from other dev languages it just feels right okay so here i'm gonna do uh one new again same deal i'm sorry view same deal but i'm gonna just do the view enum value and then this one on edit same deal and then just do edit right now this is beautiful because now i have a variable in any scenario where i say oh i want to do this when the mode is view oh i want to do this when the mode is new i i don't want to do this if the mode is any other mode except for new i have this one variable that's set um in real time right that i can leverage and make different local decisions based on those those different components and that's exactly what we're going to do here so on this country mode i only want this to be read only in view mode when my forum mode is viewed so i'm gonna tell it to only show itself if var formo equals form mode notice the enum right view now i could have put in a hard-coded value and i have to be disciplined enough to remember what i call that value but there's already an e-nom system available to me i'm just leveraging that eating um the enumeration system right and this is more readable and and so on and so forth and i don't mix up you know synonyms right so is it view or read-only or viewing or views or whatever those different variations can be that i can really create bugs because i'm having one variable but multiple values and variation of the same state i'm trying to test against you know i'm telling you little things like this makes a huge difference when coming to debug and now if you practice them re you know small solutions large solutions you're going to be covered because you have a best practice that you're you're used to and that's your your natural way of doing things okay so now that this is going to be here then in the right scenario now what we want to do is leverage this data card and then inside of here drop in our drop down right so here let me just bring in a drop down component and this this doesn't have to be a combo box this is going to be a simple drop down because we're you know we're just expecting one you know a list of values and in here i need to bring in i actually probably need to bring in a bunch of data sources but we're going to bring them in just in time like exactly when we need them so for here i'm a let me search on sharepoint i'm sorry add a data source search on sharepoint connector the sharepoint data connect and then here just select one of these and then recent you know we've been in this um client site all day so everything should be available to us and what i want to bring in is my country states and let's just go ahead and bring this in now this is going to be a little bit tricky i'm going to warn you now uh only because i need to do a distinct value list right so if i'm looking at this country um states list i need a unique uh list of countries right distinct list of countries so easy enough i can bring in country states right and that's going to be my source and this is interesting how come this my hold on one second it's probably hiding behind that hidden label right oh it wants me to because i'm bringing in everything it wants me to know uh it wants me to specify what am i showing for the value so for value i want to sell country and that's going to be the country i'm just not a hundred percent on why i don't see a drop down all right i have no idea why i don't see my drop down handle for this drop down component so let's just do this let's just go ahead and save off what we have and that's the thing i mean we haven't saved in a while and let's just go ahead and publish this to uh sharepoint now what i'm gonna do i'm gonna go back i'm gonna click refresh here usually if you reach refresh power power ad studio there's no way to get back in and you can't uh really um savage that session so you you're gonna find yourself fine starting a new session anyway so here i'm going to do my control f5 i'm expecting to see my new form pop up here okay so that's my form now if i go into edit mode i see this and again that carried over here i have no idea why that maybe is the data card yeah maybe it's that data card because i reused the data card that was um read only so what was yeah i used the data card as read only and that's not that's not helpful at all okay so let me i have to scrap this a little bit yeah i'm gonna have to scrap this all right so let's do this let's go back to let's see let's cancel this let's go back to our power animate studio and let's um i know it's still recognizing the old session let's use a data card that's that's custom i guess yeah let's just use a custom data card all right yeah that was uh that was not pretty at all all right so let's let's go ahead and drop this one so let's just remove it and let's add in a custom card and let's drive that up into position that's going to be our custom card and then over here on the left i want to rename that so let's rename this let's just call this dc country and now we have this here i'm gonna have to bring in both my country uh text label right and then i also need to bring in my drop down and then we really have to eyeball this to kind of get it to feel and look like a one of the out-of-the-box ones right so the first thing i want to do is to position this the same way that we have these labels and they their xy coordinate is going to be 3210 and that's going to be contextual to the data card right so if i put this in and i do 32 here and then 10 that should be spot on they they're using the 10.5 and i semi bolt so i want to mimic that 10.5 all i need is a semi bowl okay so we're spot there and then for their input they are using what are we doing out of the box 32 by 43 so let me just do this 32 by 43 does that feel right 32 you know 32 by 43 the width is 247 the height is 32 width is 247 height 32 i feel this is not right oh wait oh my height is off so the height here should be 28 so let's do let's match the height there we go so now now i'm in the game so and that's the thing like the whole point of this is to be consistent in the field out of the box when anywhere possible so now that i have this there i can now let's try my country states drop down and then if you put a single quote and then it starts typing in countries it will help you out so now i have this feels a lot better and that's going to be blank because it is bringing in a lot of columns and i need to specify which one to display so we're going to say country and this is what i was expecting right so i'm showing the country for every uh entry of state or province so now i need the filters out to get a unique list now in order to do that you have to use this distinct and then that's going to get a distinct um so it as the source and then it's going to ask which column do you want to make distinct in our case it's going to be country and this is the part yeah and then if i preview this everything i have is going to be in that result list so now i have to do a dot results to kind of to kind of bring that forward and now if i look at my drop down there's my distinct list and then when it comes to my state what i need to do i love this choice option but i don't love this choice option so for here i'm gonna scrap this because i don't think i'm gonna scrap this i have to unlock it first and then i'm gonna do a filter to where yeah this is just to look up with the id so i want to do a filter actually get rid of this entirely do a filter on my country list based on where the country equals the selected value from this guy now this is where i do my renaming because anytime i'm going to use this in the component or in the formula i need to rename it so let's just so each one of these i have like a prefix so i have a prefix or drop down that's going to be dd and then the name of the field that that drop down represent in this case is going to be country and now if i go here it's going to be dd country right dot selected text right and i think there's another property there the value and then that's going to be here and this is going to be filtered based on the selected text and now what i can do i can do one or two things i can specify only bring back the territory or the state and then that's going to narrow you know take out all the other columns because i really need to only consider that one column and now if i select this let me go to properties select this drop down i only have one record so i should be good so now if i select canada hit the drop down those are all my problems for canada and you can do some other you know ux things as far as clear this out like any time there's a change here you can reset this all right so now let's do our full name so with the full name this is where we want to set the default value based on first name last name of the um of the uh the text that's typed in right so here let's just grab first name give this a value so here i'm just representing the value so let's just select i prefix this with a v and then just call this uh first name and then the set the same with this one this is going to be last name i just put uh prefix of v just call this last name and now when it comes to the full name the default value um is going to be i'm trying to think here because do we really need this or do we just display the default value every time and i think that's i think that's going to be the best approach the less buggy approach so let's just let's just wipe this out and for full name the default value will always be the first name and here's the concatenator space ampersand v last name and i think i need a dot text here to actually get the string out of the text box right so that's going to give that and now what this is going to grant me if i look at this in preview so now if i type whatever here it's going to automatically reflect it and then it's going to automatically be saved to the sharepoint list right and because this is a required value you want to absolutely make sure this is safe now let's talk about require fields i do not set and again when you get to power automate this is why you do not want to do this i do not set the required fields on the sharepoint list if you watch any of my videos you keep hearing me say this time and time again in respect to list schemas and powerapp solutions and the number one reason for that is that um we're gonna process this data we're gonna collect it using power for power app forms and we're probably eventually gonna trigger a power automate and usually in that scenario there's a status field right so once the power automate does its thing uh maybe there's an approval process and once it's approved we change the status and so we have to update this this this record if you make the required field on the data source versus in the power app because really the required means that when i'm gathering this data i need to ensure that they populate this field from a user perspective if i put this on the data source then everything i do to manipulate that i have to account for all of those required fields so to update for example to update this simple status and if i made five of these or 12 of these required i would have to specify a value for all 12 in addition to that status value but if you do not update or put the required field on the data source you can still make it require you just put the required on the powerapp form itself and that's what we're going to do here so i'm going to do is just go here unlock each one of these and then go to require now let me let me let me show you another trick the other trick is notice that i i flip flip-flop between setting values here in formulas or setting values here uh over then there's a property pane on the right the reason why i use the property pane on the right is extremely useful is that for this very scenario i need to touch a few of these fields and then just make this required all i have to do is flip over to um that field and these become required you know and then the the property that i need to change is right here available to me as i bounce between all of these this scroll bar is going to stay fixed in that area and that way i can easily do you know these these quick these quick touches to uh update the the value and notice even if i scrolled all the way down here like i need to change the height for all of these uh i can just bounce between these various data cards and notice how it stays on this property whereas in contrary if i go to this drop down here at the top and let's say if i'm changing the xy coordinate i i i don't see right i would have it just cost me so many double touches to get that over there so that's the reason why we use this uh property uh paint on the on the left so here let me just go and update all of these um to be required i have to unlock them that's that's a pain especially for the first time and then for city can i click on this nope you have to keep scrolling up oh i didn't rename this so let's rename this to country okay so now i have everything i needed to be set to require now i can hide this full name because i don't need the user to interact with it we're going to capture that and concatenate formulate a full name behind the scenes and if i zoom out of this just a little bit i think we're we're good to go so i'm gonna go ahead and save this and publish it out the next thing i want to do is one we need to confirm that this this whole combination with this cascading drop down is working as expected especially with resetting this and changing ohio then we need to go ahead and pull this out to its own component and that's where we're going to jump into you know custom components within powerapps in our next video and really try to get this working and then start building out our other screens so a lot to unpack here uh any questions go ahead and leave it in the comment section until then i'll see you in the next video [Music] you

Channel: DeShon Clark

Views: 1,192

Rating: 5 out of 5

Keywords: spEasyDev, odata, sharepointlargelists, office 365, o365, share point, sharepoint 2013, ofice 365, power platform, power automate, modern sharepoint, power apps

Id: JcfcROYIILw

Length: 63min 22sec (3802 seconds)

Published: Tue Sep 14 2021