Microsoft Power Apps Hidden Gems Series #7

[Music] everyone this is Daniel and today is the continuation of my power-ups hidden gem series and this is video number seven so in this video I'm gonna be talking about these T these five different inputs over here these five hidden gems and it's in this particular order some of these you might not be familiar with for some they are completely brand new but they're hidden you're inside power apps so I'm gonna be talking about those so I'll kind of go through that in this order because then I have an app to build and I kind of walk you through all of that but these truly are gems because they actually help you either help you as a maker to make the app much more efficiently or easily or they can even improve your apps performance over there all right so enough for the introduction let's jump into the demo so from here I'm going to now go straight into the demo piece and the first one we're going to look at is the run on start so I'm gonna do is I'm gonna create a new app create a new canvas app and the app is opening up I think I'll create a tablet layout today so the tablet layout is tablet layout but you can use that for your desktop as well so this opening is loading and first things first always save so I'll call this as hidden gems geez set bed and I think I always give it this color and I always give it that one and then save it yeah you you always hear that one there okay so let's not focus on the run on start so what does the running start do is actually helps you to run something on start but but the fact is the one I'm gonna show you is that over here on power laps now if you right-click there is the option to do a run on start and I didn't know about this till I actually accidentally write into it then it was a game-changer for me cuz let me show you how that makes a difference so take for example on power laps on start I actually put in a variable and I'm gonna say set past a stain variable and I'm gonna call that as I let's say happy alright happy so that's what I'm doing over here I'm creating a variable and now the next thing I wanna do is I'm gonna go ahead and drop say a text input nice and big alright create a text input nice big font size so we can see it and the default of this I'm on default here I'm gonna say test variable and there you go so initially what I would have to do before is in order for that variable because I'm actually assigned a variable on start to I mean I've signed up valuable to that variable on start and in order for me to see that variable displayed in my control over that here's what I had to do I had to first go to file I would save it I would publish it and then I'll close the app and open it so let me just show you what it is that I still do right saved it published it I'm gonna close the app I'm gonna open it and now I'm gonna open it it's gonna behave as though that's number seven it's gonna behave like this is now app on start so I gotta recreate that scenario and once I've recreated that scenario the literal way literally about closing saving publishing closing opening again the the global variable or the set variable takes effect it actually gets the very happy and then it shows it on the app on start okay so it's not that difficult but it is a little bit tedious alright let me show you how I was able to not get that proved especially for all the makers so I'm going to come up with another scenario I'll do here and I'm gonna now on start I'm gonna set another value here and a set new testing available so very happy close that in here it's default is variable there's two new testing variable now watch I create a new variable assign the value to it but it didn't show up over here and now instead of me going and opening up the app all over again all I gotta do is come over here to the app right click on it and watch what happened it's gonna say it run on start and it shows up all that no longer do I have to save the abogado open it up again publish it close it open it up again that on start over here really was a game-changer for me and it really helped you know kind of saving the app and opening it up again it's making the whole process of making the avid testing the variables so much more faster because it's it's in some part when you're so deep in building a nice solution that you might have worked on this one control and you haven't finished that yet but he went ahead and you know to finish that you have to apply available and you want that variable to take effect and in order to do that you got to close the app and open it again and you know it kind of gets you a little bit more crazy over there let's get a little bit more confused because you might not remember where he left off this allows me now to just set the valuable to the variable on start and I don't even have to close the app anymore that's really neat all right so that's one all right - let's go ahead and show you how to add a 3d effect to the buttons so many other the workshops that I've done I've actually shown my students how to do this but I'll show it to you are as well so I'm gonna come over here and I'm going to now add a button click right here on the button make a nice big button if you all know the tricks that I've shown you before if you do the size the height and the the radius has the exact same one it turns out to be a circle one so watch this I'm going to say hundred four hundred and if I do the radius also as four hundred it becomes a circle I know it's crazy well if that's that's the best formula to do it remember if you do the the width the height and the border radius is the exact one it gives you a nice circle over there all right but huh what I want to do is I want to give it a 3d effect cuz this looks like 2d it's flat you know x and y flat but i want to give it a little bit of the three almost like a depth of focus type of things all of you in photography know that feature over here so what I'm gonna do is I'm gonna actually now play around with the border so the border by default over here is that too let's bump that up to something crazy and you see that that almost gives a little bit of a depth of focus over here many people have talked about this and I've shown this they besides the fact that they've had a big worm moment over there this said that Han I've actually done this the elevator at home they've gone to that border over there and they've made it zero over here they actually went ahead and made that a zero and then they also go ahead and change that to none now the reason they did that was a legitimate reason because from the back if you had a different color then that little border would actually you know stick me and make me kind of stick out a little bit so I understand what that's what you would do but now if you actually go in the technique that I showed and I'll bring it down to say 50 and if I do it over here solid you see it gives you that 3d effect this kind of a thing so it's a very simple trick you know go ahead and you know give it that extra border you can actually plan on with the colors over there a little bit make it a little in the border is darker maybe make it a little bit lighter you know just play around with it but almost gives you that that 3d kind of depth of focus to thing or them alright so now that was to let's jump into the third one and that is the a eyes text recognizer so for the text recognize a piece I make sure I got it over here nope it's not on this tenon so I gotta jump over to the next tenant so I'll go over here and I'm gonna have to create a new app and in this app I go back because for some reason rather my other tenant doesn't have the AI pieces coming into it over here so I'll just create that quickly over here let me just call this something hidden seven try to maintain consistency always always good practice save it first time save it okay so I'm gonna come in over here and now I'm going to go into the insert and then the AI builder there is the text recognizer okay so in the text recognize a piece I'm gonna drop this one a little bit over here and as a test what we can do is we'll you know just go ahead and run it I actually have some demos already ready let me see if it shows up yep I'm gonna first start with some nice image just to kind of really show you how well it works so let's let's actually start with this one because alright let's start with this one this is a simple one it's just a simple thing so I do that and it seems to run but that's that's great how do I see all these images because what it did do is it meant that I highlighted all the text ones which is great because it said eight lines of text recognize click or tap to choose the image for the text recognition so it told me a high highlights that these are all the texts over here but how do I actually see all the text separate from the image and the great trick was there is actually using the gallery you know that's what I say empower us when in doubt use a gallery it literally gallery can solve all your problems so I'm gonna drop this over here I'm gonna change that to this one bat here for the gallery items I'm going to now say text recognizer click on dot there is something called OCR objects okay when I did that if you notice it takes all of this information and it dumps it directly into the gallery as different sections but here's the cool thing all right see if you just medal and rahmat a little bit even go ahead and play around there take that separator out delete that go ahead and take this out it literally looks like you've got the full text from over there right over here so you actually successfully now went ahead and did the OCR went ahead and ran that through that through the dai builders text recognizer and when you dropped into a gallery and you cleaned up the gallery gallery it literally looks like all the text is over here so it really functions really well let me push the limits of the text recognize it just a little bit more I want to click on new image and let's go to this one right this one it is going pushing it through AI which in the backend is cognitive services and check this out I was very interesting because I want to see that this is what happens is the way it's moving away and you can see says did you know on March which means advance through the topmost line so did you know on March 26 2014 so it went through that one the next line is it actually started from the left so just based on my observations and again I may be wrong but based on these observations it looks like it always starts on the top right and then it goes to the top left for the next line works all the way around again next line there works this way around and that's how it's getting the information or that that's what it seems to work and we'll do another test come back over here you see the first one is are you so that's what it does top line was are you then it came down again to the bottom left concerned about no I am NOT so it kind of works to that bit top go back to the left as if you were riding you know from the left side writing English that is go all the way to the right and then come back from left all the way to the right it works so well like the text recognition is so cool and it's okay an out of the box no coding whatsoever the two tricks was you go ahead and first add it in the gallery take out all those you know horizontal lines or separated lines and icons and everything and then use the text recognizes dot OCR objects and that's how it was able to get that information so - that was how it was is using the the AI by text recognizer all right so I'm gonna jump over and now show you the gallery navigation because there's two really neat things over there so for that I need to do a little bit more work I will go ahead and create another one and I'd actually add some data so I'll come over here in the connector I'm going to say Excel import from Excel I'm going to actually get some data come on data let me get that data yeah file so I'm gonna select a spreadsheet to get the data I'll select the table and I'm gonna go ahead and get a gallery let's create a nice gallery and I'm gonna use be use this for the next one as well the delay output so I'm gonna need that so I'll delete this I'm gonna go ahead and delete that one as well you know what I should have done was click on the gallery and change that to only one title that makes it easier now it will quit that's the data is coming in and I'll go ahead and you know add some more data I mean basically there's more data in the table so let me kind of make it as a nice title of you even though it's a gallery make it look like a data table boy status say full-time I am user I'm just going to keep adding a few more manufacturer let's say memory is good and then we'll end with CPU CPU is a nice long big data were there so it really helps processor actually get it up back let me be tired I'll go ahead and increase that a little bit and this one actually has a lot more data so that's good okay so in this now in the gallery there's something cool that I want to show you is the gallery navigation alright so you click over here and in the navigation place over here there's two types of navigation there is the show navigation and then there's a navigation scroll bar all right so what I can do is in the navigation if I want to show it by default is false I can do it as true if I play with it this shows up over here but there's something key about that one watch out if I click on it it knows how many I have over here and it's gonna go and get the second batch of the data watch what happens you know it's like over here now now since I know that there's something on the top the top out also showed up showed up here keep going keep going and it really gets you in chunks so it really helps right because instead of you scrolling one by one and then trying to figure out was that the last one that I saw or did I miss that one on the top or something like that this scrolling bar functionality really helps you to automatically scrolling chunk so that really works well on that and then the other on the same part over here for the gallery navigation there is the option to go ahead and even in the show scroll bar by default it is true you can go ahead and make that false so watch what happens I can now only use the scroll bar and I can even eliminate that option for the end users I think I mean you can still with your mouse scroll it that way that works you can't stop that but the scrolling bar section over there that disappears so all you can do is use this growth so this combination actually helps because I've seen really you know neat apps out there you know non-power apps you know use Bill for a while they've got this functionality to really save the end user from scrolling put that scroll bar over there and just click on the top but click on the you know the bottom one click on the top and gives you the end user the functionality to all might be scores scroll and chime so that saving the user the the heartache of scrolling and then trying to remember was this the next batch that came through or did is miss one and things like that it's really a neat functionality over there so that was for was the navigation gallery now let me show you the last one which is a delay output now the delay output is a very important piece over here I'll show you why so in order to really show you the effect of it I'm gonna create a text bar over here and what that text bar is gonna do is I'm gonna put in something to search right so if you want to search anything within this gallery you basically put that item over here and it'll search so let me actually go ahead and get some more data coming through so you can actually see a lot more here but I'm gonna change the gallery item just a little bit alright little items I'm gonna do a search command and since it's coming from all of these data into from Excel over here you don't have any delegation problems it directly just pulls into all the data over here plus it's less than 500 so any delegation is not the whole reason for this video over here I want to show you the delayed output so for the delay output now what I'm gonna do is I'm gonna say whatever is searched from this column so that's the text one dot text and then comma and now I'm just gonna start getting in some information side I know I had the employee were here was it a full time I got the full name I think as well let's just click on these and see what I got device i got i got employee status i am alright so that's what it is i didn't get the full name I got the I am I am what else do they get over here let's see and the manufacturer was there and I also remember getting the processor yeah so we are good over here I should actually start seeing again in the text over here I'm going to delete the default I'm gonna say a search here so now one of the things is then I'm doing a search okay what it does is every single time I put an a-type I'm just typing something what power-ups does is it goes ahead and takes that and it is doing a search based on the data you have that every single time you do a click I know power axe has become a lot more you know that's in performance has improved but you as the developer as the maker needs to know how you can do your own part to improve that performance and what I'm gonna show you is that delay output is actually one way because right now watch if I go ahead and in the search I've got you know and I've got the search function over here using the search data every single time I type in anything one click one click one click it is actually doing a search so if I do full dot time see if I just did full it is getting me all the full times a good time it is getting me only those full time so that but it does it every single time I type in over here and that means I'm doing a lot of calls to that data regardless of everyone bringing directly on the data storage over there better wait is in the backend data source or even if it is cached data in the app and you're still calling the data which means the app is really performing it's really running just for that one sake of data with it and right now it is the the search is running based on every single time I type in over here every single time what you want to do is actually use the delay output function and the delay output function is for that text so watch this go here and I search for delay output by for it is false I want to change the false to true and watch now what happens what it does is every time I start typing in something it actually gives that few seconds extra time for you to type something then it takes whatever is the data you've got in that search text and it searches with that it really really helps with the app performance because then it already has more data more information to search with and it doesn't keep hitting it in lot in constant interims over there every time you type in it takes someone of data waits til you've got a few characters over there then it goes ahead and does the search really helps with the performance on that so let me do a test over here I'm gonna now type in the core i5 and when I dates for the i5 that's when it has gone ahead and done the entire search well you see didn't keep clicking on that if I go ahead and type in the laptop it waited till I have the entire laptop and then it does a search in case guess I wasn't doing search over there so but if I did the full time it faded till I had full time written over that and then it went and did a search I want to show you another example though watch this I come over here and right now I'm doing a very simple example it's just a proof of concept I've got a text over here I'm going on using the text control and over here it's a there's a label what I'm showing is if I type in hi there this is a demo to show something then I start typing it in this one is immediately taking the information from here and putting it over here which is great from an app standpoint but again let's think about it from a performance standpoint every single time I click something over here this control is referencing that control over there and saying oh there's a new letter let me go and have the letter here there's not another letter I'll be going out late over here every time there is a click it goes and gets this information this is what I was trying to show in the gallery side because on the gallery side research and that search is constantly running every click I do this is a great demo of what's going on over here but instead what you go to the delay output piece over here and the delay output and you turn that falls to true such a simple change to make and let's now let me show you this okay all right watch what happens is hi there this is a great example off and I stopped and it didn't populate it is it clicking now is it clicking how this example shows you how I would have saved it in the previous app because in the app I was doing a search but now on this text over here I intend to turn that the way output that's true which means it waits till I have a good amount of text over here takes all that text together and it searches with that really really helps with the performance of the app or there and here's this something that another example if I do sad and that's that but if I stop even if I don't have the full thing it goes to Justin normal um and then after that it goes to happy but if I were to go ahead and do the exact same thing I changed that to delay output change it to true same thing put that over here by default it is happy if I change that to happy it waits does it match great then it change the side but if I want change from sad to happy it waits the left typed everything in and switches straight over from my side to happy which means it's waiting for enough data over here then sending it to the app for the app to figure out okay now I've got happy which means an image change icon over there this really helps with the performance of the app because now it's not constantly pinging the app to perform it's waiting for a few chunk I mean for enough data coming in in kind of small bites and then sends it for the app to perform delay output really helps in the performance of the app so all in all those are the five things I showed you today I showed you how that run on start works great way cuz now I didn't have to stop the app and reopen it again and let's see the variable take effect I showed you that nice 3d effect of the button right such a simple thing you just give the border-radius number and it works showed you the AI text recognizer over there and how are you inspired now just gradient putting in images it takes the text but then using the magic of a gallery you're able to see all the text over here show you that little things which I notice that it always starts from the top works some from the left and then all the way to the right gallery navigation was amazing how you can merge the constants just scrolling you've got the two navigation bars on the on the top you can even hide that navigation only to use those two clicks over there and then finally the delay output because even though it's such a simple thing how much this can improve in the performance that we have so these were the five hidden gems I had for this video and as always keep power up in thanks [Music]

Channel: Daniel Christian

Views: 1,376

Rating: 5 out of 5

Keywords: powerapps tutorial, powerapps hidden gems, learn microsoft powerapps, microsoft powerapps examples, powerapps tutorial for beginners, microsoft powerapps, powerapps tutorial step by step, Power Apps tutorial daniel christian, Power Apps hidden gems series, powerapps delay output, Power Apps AI text recognizer, Power Apps App Run Onstart, Power Apps Circular button, Power Apps Gallery Show Navigation, Power Apps Gallery Add Navigation, microsoft powerapps tutorial video

Id: DcN86ZWVesk

Length: 25min 35sec (1535 seconds)

Published: Mon Feb 24 2020