PowerApps Design Ideas, IsEmpty, and making pretty galleries

in today's show i'm talking about powerapps design ideas and the is empty function so i set out to make you a video about doing validation stuff and in the process i made this beautiful gallery and all the fun little things that go with it so i thought instead of focusing on the validation side we just focus on making a kind of nice little design here and kind of give you guys some little tips little ideas so we'll do some fly outs and different types of sorting and error messages just to make a nice app but before we do any of that first here's our intro hi my name is shane young with powerapps911 those guys in today's show we're doing some powerapps design ideas and mostly focused around the gallery but really just kind of working on making a really nice screen for your users to have ability to see data search the data sort the data and just a good design experience some error messages if they search for things that aren't found just a bunch of little things and one of the functions we're going to use along the way is we're going to use the is empty function which is kind of what started me down this road what my intention was to make a video about is empty but i got kind of sidetracked and i decided that what i came up with was better than my original idea so i pivoted who knew all right who cares right blah blah blah show me the app fair enough let's switch over to my desktop and see the app over here on my desktop you can see i've got the app and running and so you see things like i added a background image in the background to kind of give the screen some texture right i found a lot of people want to do things like that they're enjoying this idea of just kind of some type of non-descript image but just something that gives it the app will texture so we threw one of those in there we added the ability to sort our data so we're like hey i want to sort on department and so i can click on the little thing which you've probably done before we'll talk about how that works but i also wanted an extra step instead of what if you click on the word department why not make that work cool so then same with all these different fields and then the one that i had the most fun with over here into my little search icon if you click on this watch my thing whoop oh fancy if i type in shane there i am yay but if i type in shaney like my mommy used to call me look at that no records found please retry your search so pretty cool if we can either say try again and watch this it put my cursor back up here oh and we can of course just x out of here at any point so we also i went ahead and did these little unicode uh faces because it turns out that it's not super obvious that everyone how you do that so i'll make sure you understand how that works there's so many little fun things in here um so yeah let's just kind of tear this thing apart remember if you're like oh wow i want this app well i've made this app completely self-contained so then that way you could just download it so if you're a subscriber over at training.powerapps911.com to the curated library then you have access to just download this fully functional app because one of the things i did was if we look for view data sources i did an import from excel to pull the data in so i just have static data in the app but you guys could replace this with your sharepoint your sql your cds whatever data source you have but when i package it up this way when i share the zip file out then you get all the data as well so you can play with it all right so it's a one screen app clearly we could make it do more things but that wasn't the purpose really it was about the design so let's start a new screen and let's recreate recreate some of these concepts and some of the other ones i'll just kind of show you what i did but so i'm going to say insert a new screen and so the first thing i wanted to do was i wanted that header bar at the top and if you haven't watched the video before i have made a component with that right and it's in my component library so i just said hey uh go get more components and so in this shows all the different component libraries and i have one called real library with the stuff i actually use and so in there was my header and so now that i've added that which you're not going to see because it's already added right but when i added it over here in library components there's my header and so then i pulled that over and look at that i get all that design and i've made that really functional right i'll put a link to the video i don't know somewhere up there if you guys want to see the one about making that component but it's not the purpose of here but that was the first piece so the next what i had to do was i wanted to set that background give it a little bit of texture so actually if you just click on your screen over here you have the ability to add a background image and so i uploaded a uh this one called gears put it on there my god that's not bad and then i just changed it to fill and it took up the whole screen now you can see that that is a pretty vibrant image i mean it's for for gray right since vibrance gray can be so if you're like you know i don't like my image then you could go into an image editing tool and soften it or you know one of the other ideas i didn't do in the my app i thought about i forgot is you'd also just grab like a rectangle and i take this and so then if you change it and you use kind of like we do with our pop-ups you can just put this gray film over the top of it but maybe we just won't do it as intensely so we'll say 169 169 and then 0.5 and see so that just put that gray rectangle over top of it and it just softened the image and then remember the 169 169 169 that gets the color that's what produced the gray this point five is the transparency so if you wanted it darker 0.75 if you wanted to just just a touch lighter we could do like a point two and it's just barely got a little bit over it so it kind of gives you a nice way to control and get those in there so if you're not an image editor just put a little film over the top of it look at that so now we've got a nicer looking screen with literally no work and remember i am famous for making really ugly hats so the fact that i made this was pretty shocking i know so the next thing i want to do is i threw a gallery on here and so with your gallery you know just kind of pull this i will change it to be a title subtitle on body i think it's what i did something like this and then um i'm going to set the oh i'm going to click on the gallery i'm going to set the data source to that employee table data so then that way it has something to show and so then for the fields and bk i want you to show my fields why are you being rude oh because all my other stuff's on top i was pull the gallery to the front reorder bring to front there we go and so with the gallery then what i started to do was i'm like all right well that first thing if you notice over here my gallery kind of has this transparency to it it was actually the same concept so i went to the gallery and i said hey gallery your fill actually will go the template fill your template fill instead of being clear which is what that is i did 255 255 250 oh 255. oh my goodness typing is hard people and then i did a one and so that is white okay like all right and then i just got in here and i just started playing with the transparency level of it that's whole two so kind of go back a little bit more how about we go to point five and basically over there i kind of just played with it until i got the right amount of white for the screen image i had because it's not a set number right over here i had a more vibrant image i didn't do that gray overlay over it so i was able to use a much heavier white right i think the template fill here oh i didn't do i did gallery fill not template fill so i did 255 255.9 but if we bring that over to here and if i put that in then because my other one is so bored out then it doesn't have anything to leak through so you just have to kind of mess with it a little bit until i got the right the right feeling okay so once again not a not a set way you do it i'm just giving you the idea so you can play until you find it that's still just too much 0.5 okay and so then over here as well you notice that my gallery um was wide i didn't do anything fancy right people kind of get scared of this i just grabbed these columns i'm going to delete this icon and i just made them smaller and then i just move them to kind of sit beside each other there there's no specialty to what i did there i just kind of rearranged that's probably way too big i just kind of started dragging these around and then i could pull this up and so then that starts to build that same design right and this one here um is not cooperating so we'll pull them down there we go and so i just kind of drug these pieces around until i got them to look the way i wanted um now over here as well if we change this from title to first name so that was how i did that right and then i had last name so i did a little i did my most famous formula i don't know how many times in my life i have typed this formula but it's a lot this and the currency formula and so the notice over here though i then had this idea of the the the smiley face or the um so what that's really tied to is in my data set there is a field called um good at their job and so good at their job is a boolean field it's a true false which was perfect for me so what i did was i said right so i'm going to put your name your this see this and then i said and if this item got good at their job so if you're good at your job then i'm going to put in a smiley face well so it's a string and so then i needed a space and so then if you don't know this right one of the things you can do in windows is you can hold down the windows key and hit windows dot or period and you get this fun little board and so then now you can you know start to type in things like shrug and you can see what shows up for it it'll auto suggest or you can just use your mouse and scroll through all these and be like oh well if they're good at their job i want to i don't know what i want to use we use a monkey we use this dog face there we go chewy i appreciate that and so then we just close it out and if they're not good at their job then we'll do a quote and a thing and then we'll hit the windows period again and then i'll type in cat right because if dogs are good at their jobs and cats are bad at their jobs and so then we close out and look at that now automatically we've got in our app all the little uh unicode icons and that's that's it right i mean there's other ways of going out there's other ways to solve do this but for me i'm an emoji person right if you ever email with me i like i every business email i send ends up with an emoji and i always feel like people probably think he's dumb whatever right i like emojis in my emails and so ever since i was able to do this window uh button in the dot i've done a lot more of those all right so that is um how i solve that side of it all right so then up here at the top i'm like all right i want this header bar so for my header bar kind of pull this down a little bit and what i'm going to do the first thing i did and remember there's like 12 ways to build something like this right if i could pull this in here and then um do something like this so i kind of made my header bar and i wanted to be the same purple as the header so one of the things that i've done that was not in the original header video was i've added for my header there is now a property called header fill color and so that is actually my powerapps 911 purple so what i do for this bar is i'm just going to say hey you you know what color your fill is your fill is header underscore 2 dot header fill color and so that way i get my purple i'm not saying them in any way that's the best practice but for me right remember this is all about me not you it's about me for me a lot of times i want a quick way to reference the color can i use it in all these different videos and stuff so i pull it in that way so that's one of the interesting ideas that i've not explored a lot but at some point i'd like to wrap my brain around is you know could i just make this standard company header kind of have a bunch of the different properties so then that way when people use my company header they could just pull that in i don't know i haven't i haven't went down that rabbit hole but there's an idea for you guys to think about because for me it's super great now that i got my purple and so then i'm like all right now we need a label and we're not going to do all of them right but we're going to just do this one i typed in name and i just jumped over here and said you know what you're probably more like a 20 font and a bold and then we will change your color to white and so now i got name and so then i would then just copy this label ctrl c ctrl v pull it over here and then this would be email okay so that was how i built out the header that we see now oh i also underlined them oops well slacker me there you go underline underline yay um so then i wanted to do the um the sorting and now you know what we'll do in the order that i did things so i will do the sorting next um what i then did so right this is where i got a little crazy this was this whole idea that if you notice with my title you know or my search box right it goes in and out it's this nice smooth navigation and so this is another concept that i've covered before probably like two years ago at this point it was a fly out menu and so what's really happening is when i press this icon it is starting a timer and that timer is controlling the width of how this is going in and out so what we can do is go over here and let's uh let's just make another new screen for a moment so we just kind of play with this we're going to throw a timer on the screen because we're going to need that and then we're going to throw a text input on the screen because we're going to need that and so what i wanted to be able to do here was say all right your width is going to be dependent on um this timer's value and so i looked at this i got it all designed like all right i want you to be about that size right that was the size i needed to fit so i looked over here and i'm like all right what is its current width its current width is 200 dumb luck awesome so what i'm going to do is i'm going to say hey your width really what i want your width to be is i want it to be 200 yes but instead of just 200 i want you to be 200 times timer 1 dot value divided by timer 1 dot duration and so right now it's a whole bunch of zero so that's why it's going to do that and so we're just doing another variable over here and we're just going to say hey you you show me the timer value just so we can kind of see what it is at any point timer1.value and so now when i start the timer right it's currently zero when i start the timer oh it's going to take a really long time because it's set to take 10 minutes to expand that's probably dumb so go back to my timer and we're going to tell my timer to run in these are milliseconds remember so we're gonna do one for a thousand so one second to make this thing expand so that was how we were able to um to to make that thing expand out right so because we're just saying that your width is tied to um the percentage that the timers complete and so when the timer is full it's at once that's how it gets to be 200 maybe another handy label to put on the screen right here so this one would be um width just so you can see it and so then this would be in timer 1 dot width one of the great things about powerapps right we have that ability to see so we can press this oh not timer ones with shane it is text input one's width i was like that's not changing that doesn't seem right there we go let's try skin so you can see the number built out and that's how it's going and growing so that was how i increased the width now i also don't want to be able to decrease the width and i didn't want to have a whole bunch of different timers and such for this so what i really did was i ended up saying okay well i want my button and or well we want to use a button we'll use the the search icon that's what i used over there so i said hey search icon what i want you to do is trigger this timer to start so the way you do that is you say set um and we make a variable say var start timer but we don't want to use that one that's what i used earlier so var start i'm going to set that to false and then you have to set it back to true var start to true so the the variable flipping is kind of what causes the timer to run and then the other thing i want to do here is i'm going to say set var um expand to true okay so let's just make sure then then we'll go over here our timer and we're going to say hey timer so your start is now going to be the variable called var start and so let's just make sure that this works by clicking this it starts my timer and every time i click it it starts it okay so that was the first part of this equation so then the other part of this equation then is i want to have different behavior when you click the search button versus when you unclick the search button and so what we can do here or to make this easier we're just going to have a second icon that's actually what i did over there because i wanted for the canceling oh not adding i wanted it for the canceling and so if we take the cancel here what we're going to do is we're going to say um when you click the cancel we want to run the timer again but what i want to also do is set var expand to false so i want to de-expand it so then with this we're going to click in here again we're going to click on the text input if i can there we go so then now for the width for here what i needed was an if formula so if um var expand is true do that and if it's not what do we want to do well i want it to be 200 minus 200 times all this mess and so what should happen is that the number that so it's gonna the width will be at 200 and it's going to slowly increase the timer's percentage right which will slowly increase this number and so it'll slow you to 200 which will then slowly shrink it back to zero so if i'm right that should expand it out and then that expands it in out in that's pretty fun um and now you notice that there's some weird flashing over here um and that's because i'm guessing that if we go look over here and so if we click on this thing now and you'll notice that when you're in the preview modes remember timers don't trigger when you're in this interface and so when we switch back and forth the timer gets confused so this app behaves poorly in its published version or sorry in the edited version but not in the published version so that's the other hard problem i had was kind of working with this was trying to work out all the little extra flashes and stuff i had to like go publish the app and run it to see what was happening to think about it but you notice over here we do not get any of those weird flashes because i finally worked out all the mechanics for that and so the way that those work see and like the timer just shows up also because it's confused what it should do so i needed to name all my icons but if we look at icon search you can see that i reset my timer back to zero that's what it did i did to avoid the flash and then i started the timer stopped it so toggle the variable to actually cause the timer to start i set var so shirt so bar show search easy for me to say to true and then i also had this other problem that when i first opened the app right this is back to the app behaves differently when it's in the studio versus publish with these weird you know visual visualizations so what i had to do is i had to go over here on apple and start and make sure my timer was reset which i don't remember why i had to do that but i had to set this variable called var on start as true so then that way if you look at the formula for the width here you can see that it has special behavior if it's the very first time the app has ever opened so a lot and all these mechanics are in this app and working so you know you can grab it from there but but just know that if you see like weird flashes like when you run yours or it starts open even though it should start closed you just have to you have to put that little problem together piece by piece but when it's all said and done um you know we get all this beautiful behavior the other thing about this that was interesting so you noticed that right so i'm changing the width but i'm actually when i go when i expand out i am or so right now i'm gonna go left to right and now you're right to left so i'm actually going in and out and that was important to me because i wanted it to look actually nice and so the way that i had to do that was if we look at our input for our search down here we have um not only the width has this formula which we just talked about but we also had a more complex formula for the x and so the x is 1091 which is where i wanted it to be on the screen plus 160 which is the current width minus self which is its the controls width so this is this was the nice tight little formula i ended up coming up with but so all that you would really have to do right this would be the uh the x of you know or sorry this is gonna be your your actual width like that width you want it to be when it's fully expanded and then this one is the x like where how far to the left to the right do you want right so let's just go do this real quick over here so like right now let's expand this guy out oh see and i can't expand it by holding down the alt key like i want i got to expand it by doing this but then it's going to freak out when we go back in here that that's the nuance of working with made it really hard but so i'm all right be like hey you i want your x um to be 171 okay so then what i ended up doing was saying all right your x is going to be 171 plus we said the width of this one is 200 and then it is minus self dot width so then now when we expand and then when we contract what i know that was pretty fun i i really enjoyed uh the math it wasn't hard math but i had like stop and really think about managing that x to do that so whoa that was fun okay um one more important concept the whole concept that set us out on this path so in mind if i do a search and remember all this weirdness the icon is not showing up that's because you're in the studio and that's going to happen to you but it doesn't happen to my users when i use my app so here we're going to search for shaney so no records found please retry your search so what i did here this is just a label and so it's visible property is oh if image not found.visible ah i didn't want to write the formula more than once this image if we look at it's visible it's just if gallery one dot all items is empty so is empty right you guys probably use is blank all the time to check whether a field is blank right is blank is for checking an individual field is empty checks a table gallery one is my table so galleries have a special property called all items so all and then the beauty of this the simplicity of this is i don't have to worry about that complex if and filtering and sorting formula all this does it says hey if there's nothing in the gallery then all of these things are true and we show them if there are things in your gallery then don't show this stuff that is all i did to make this all happen right so when we do this and this um this image of this young lady going what um so this comes from a website called pixabay or i don't know how you say it it's probably not the right way to pronounce it whatever and so this is a site that has royalty-free images so i sign up for an account with them and i just get things and so i think for that one i just search for question [Music] question and so then i just kind of scroll through here oh there she is um so i i have no affiliation with this website i don't care if you use it but one of the things i try to remind at least myself is that you know you don't want to be using images that have royalties right if you go search the internet and search for your favorite star wars image and you put that in your app technically old disney can show up and shut you down and sue you for millions of dollars for stealing their image and using it right they don't but i try them or not try i always build all my apps all my demos with either images i've created and owned or i go out somewhere like this that has a royalty-free license that is free for commercial use so just be smart with um your images and stuff okay and there's a lot of fun stuff out here i search for weird things all the time that's how i find my images so so that's pixabay um and then finally the last little neat thing here is so like if i say try again what this is going to do is that resets the search i guess i can just show you the code that would make more sense wouldn't it i forget i can show you guys things um so i repo reset my input search text that puts it back to its default which makes it blank and then i set the focus to search text so set focus is not a command i've shown or function function that i show i've shown you guys before but that lets you put a cursor into a specific box right so this is a lot of fun if we go over here make a button um oh let's get a text input here so that is text input two and so let's um wipe out all this okay there's nothing in there and so then now what i can do is i can go hey when you press this button i want to set focus on text input 2. like that and so when i press this button you'll watch my cursor jumped over to there so that's a great way like if you have errors like hey this feels required and you show them a message and you want to send them somewhere so remember you can control the cursor finally now there are some weird rules like you can only like with forms and stuff about how that all works but overall set focus is a nice one if you're trying to help drive where the uh the cursor is and so in my case when i was over here you know when i say try again oh see and this is where mine is weird let's do this again so when i hit try again it put the cursor it cleared out the box but put the cursor back up there and so that was how i was able to get that okay one more topic real quick let's go back over to this screen and so the other thing you saw was i went ahead and put in this cute little sword icon you know and i brought it down here and i made it white obviously but so how did i make it sort so if we go back over here what i did i did two things so i say set var sort by so what column do i want to sort by and i set it to the name of the column that i wanted to sort by so this is the name of the column in my data source first name and then i also because i wanted to be able to toggle whether you sorted ascending or descending i also set a variable var sort order to the opposite right so if it's true said false if it's false set it to true that's what that formula says so that is all this little button does but you notice if i go over here and click this one which is tied to department look at that it's sorted by department if i hit it again it sorts by department the other way so this is how i built this sorting interface um so then what the formula here looks like if you look at your gallery and we say hey gallery show me your items property so i'm doing two things and you kind of work you know outside in so here's my root table that is that one we imported from excel so then i said search all of these so that's how the search functionality is working remember the way the search function works is if you're passing it nothing so if text if the uh input search text dot text is blank then the search function just doesn't do anything if it's not blank then that's where we saw it searching by shane or shaney right and so then finally if you go here i'm like all right now i want to sort by columns and so what table do i search i'm going to search or sorry sort i'm going to sort the table it was output by search cool comma and then what column do i want to sort by i'm going to sort by whatever column is in the variable var sort by so sort by columns unlike some of the other functions you can pass it information because in reality the column name is just a string so i just looked in employee info table and i'm like hey what's my first name column called it's first base name and that's how when we clicked on this one we set this to first name and that worked if we look at this one i set it to department this one the higher date it's just the column name from your actual data so then i did that and then i said hey if this is one of the first formulas i ever understood if var sort order if that variable is true then sort of sending if that variable is false sort descending and there you go you have now built a pretty cool little sorting functionality without a lot of work i also because i got super nerd on this i don't know why but i did um i wanted to be able to also click on the name and get the same effect right or higher date get the same effect so what i did is i looked went to the name right which is just a label and i said hey on select um oh that's right there the unselect select icon name so select your icon so that way i didn't have to write the formula twice now that is um that was how i did it there's interesting thoughts though you know you another thing that i'm just thinking of you guys want to see one more weird idea so right now if we um this we're going to kind of zoom in see if we make this easier to see okay so right now this icon is like this right and if you look over here you know its padding is zero so it is just size 40 by 20 with no padding but what i can do is i can add padding to the right of a hundred and so now it's moved everything over actually let's let's undo that let's go to a different screen and prove this out so let's go over to our screen too so let's add an icon and we use the sort one so let's just do that so right now the icon is um you know you have to click with inside that box to do it right but remember you can always take your icon and i can drag it like this and so then now if i click anywhere in this space even though it's not lit up right then we can kind of see this by hovering like look see how the the cursor is still changed if i go way over here it's not so all of that is triggering that icon right all this width but what i might want to do get back to that what i might want to do is i might want to make it so that hey i want to stay over on the left of this thing instead of moving it all the way over so what i might do if i get this right is set my padding over here and say hey you i want you some padding of let's do like 50. and see how that scooted it over so that was actually not what i wanted set the padding there to zero but we'll set this one to 75 oh we're not 775 that'd be too many 77 and see how it moved it over so we could move it over further be like all right maybe like 120. oh goodness this is a really big one i should have paid more attention up it was it's like let's do like 240. so then see now it's sitting way over here but all of this is clickable okay so this is a way for you guys to build it so that unlike me where i went to the effort of making this be one thing and this be one thing i could just grab this i'm gonna pull him over top a name okay so that way you can kind of click any in there and there and so then i'll just set the padding and let's see let's try 125. and so that moved it over there maybe that moved it too far so we'll try like just a hundred but so now everywhere and we'll kind of pull this up but i can start to really massage this thing i don't like the way that looks so i'll just add some top padding to kind of push it down a little bit make it a little smaller there you go and so now all of everything in between those dots is clickable and will all trigger this icon even though you're not actually clicking on the icon so i always wanted i don't typically do that because i'm i don't know this is not the way i build things but i thought that was a neat trick uh someone i think matthew was the one that did that where i was paying attention and saw but somewhere on twitter had put it out there and so i thought i would just show you guys how that worked um but yeah so with that i don't know hopefully this is kind of giving you guys some different ideas of how without a lot of work i made a more functional app i made it better for my users um you know just just works and so here let me show you also real quick let's take um let me open up the other one so here i launched the app in the player just so you guys can see that the whole experience is much nicer over here right so shane that works shaner try again that works right i don't get all of that weird it disappears and stuff that's one of the hard things about building this type of stuff in studio is studio behaves one way the player behaves the other way but i did all the things to make the player work not studio work so cool okay so with that i remind you guys if you go out to training.powerapps911.com you can download this app if you want us to build this app for you right hit us up at powerapps911 we do lots of things if you have questions comments ideas other things you want to share with people right write that great comment that i might turn into a pinned comment leave those down below i respond to all my comments sometimes i get a little behind i'm currently behind on a group it happens um but yeah this was this is just a fun one i'm gonna do some more stuff coming up on validation but i just thought i'd started out just cover validation like i said but once i started to make this nice design i really you know i was really just inspired by when i was like this this app has potential so that's why i did it this way all right and so i guess this is all that i'm gonna say thanks and have a great day before you go be sure to click on the subscribe button over here so that way you'll be notified when new videos come out if you need any help or you want to work together whether your problem is big or small check us out at powerapps911 we do it all i rhymed or if you're looking for more formal training offerings we have those linked up here somewhere so check them out thanks and have a great day

Channel: Shane Young

Views: 26,737

Rating: 4.9733334 out of 5

Keywords: Shane Young, powerapps911, PowerApps Design Ideas, IsEmpty, and making pretty galleries, Power Apps design ideas isempty and making pretty galleries, powerapps design examples, powerapps design tips, powerapps gallery control, powerapps gallery search box, powerapps dynamic menu, powerapps dynamic position, powerapps dynamic sorting, powerapps, power apps, powerapps isempty, powerapps sortbycolumns function, power apps search function, power apps search button

Id: vbRdFfq5tB8

Length: 36min 40sec (2200 seconds)

Published: Mon Sep 14 2020