Power Apps Advanced Components - Demo

Key Takeaways

[Music] hello everybody and uh thanks for having me on the on the call today todd thanks for putting all of this together like usual so let me get my screen sharing going so i just have to come clean with you guys i'm not as brave as matt um so i'm not going to try and build a component on the call so i'm just going to show you a pre-built one right so i hate doing the same thing twice especially if that same thing is is quite a complex thing and um and i think that if you can save the effort into a component and then reuse it it just makes so much more sense and what it also gives you is it gives you the opportunity to really make the piece of functionality bulletproof so you'll spend a lot of time on it once and then you get to reuse it multiple times without having to rebuild it every time so just as it is about time for a time picker on powerapps a couple of months about a year ago we felt that it was really time for a model dialogue or a pop-up or whatever you want to want to call that so we've built the pop-up component and this is not the first time that we've had it on the show so we've we've been here before but today we're going to show you a little bit more about how it works in the back end and to show you how to how to typically build something like this so for those of you who haven't seen it you can go and grab it at aka.ms4 slash powerapps dash popup and there's a whole document on how to get up and running with it and it explains it in great detail so i'm not going to bore you with those those installation steps today but what i'm going to show you is just on a very high level what it is that it what it does and typically if you don't have something like a pop-up component every time you want to have interaction with the user whether it's a confirmation or just a simple message that you want to display to the user you typically have to go and create controls on the screen you have to group them you have to hide them based on certain conditions and all of that works pretty well until you have 30 pop-ups in your application and now half of your application is just made up out of pop-up components and all of that is doable but the problem is at the end of the project when the client says we love this app but can you change something in the pop-up so let's change a color for an example which means you're going to go back and do it 30 times now i'm just way too lazy for that and that's that's the reason for this pop-up component so what it is that i'm on about is if you go and have a look at this app this is just a demo app that displays all of the different methods that you can interact with the pop-up and you'll see that this is version 15 draft for those of you who have used this the latest version that's published is version 14 so this one includes a few nicely enhancements which i'll show to you enough in a few minutes as well first of all you'll if you click on the ok button over here it'll just give you a very basic pop-up it'll tell you the quick brown fox jumps over the lazy dog and if you click on okay you'll see that it actually writes that feedback back into the application it's very important to understand that a component is actually outside of the application so you have to manage the way that you get the responses back into it so similarly you can do a simple yes no component so this is good for confirmation so are you sure you want to delete this record yes no and the same you'll see that it writes the response back into the app similarly you can have a yes no cancel and in this app we'd also do pop-ups with a little bit longer messages just to show and we also use this to test the pop-up while we develop on it so text input so all of these are just basic pop-ups that will give you information the next ones actually require you to gather information from the user so they will see a text input and they it says we are looking for the fox's name so let's call it foxy and if you update that it writes it back into the app similarly you could do a text array so you can actually have a list of for the user to choose from so they can go and choose mickey or donald and then click on ok you could also do office 365 users look up so typically this is good for people picker so if you go and say i'm looking for myself if you're going to write that in it'll actually stamp that data back into the into the app similarly we have a writing control a slicer so we can actually go and get some slicing going and this is these are two of the newer inputs in addition to the family first is a pen input so this allows you to just write on the screen click on ok and then you'll see the little image that it wrote back into the application now in a production environment you'll typically take that and write that into sharepoint or or in a blob storage or wherever you want to put it but for this it's just showing that it got it back into the application and then these are the brand new piece of functionality is attachments so if you click on attachments it's going to ask you for to select multiple attachments so in this case we're going to select a file so let's do an image if we select it it's going to ask us to do a caption on the image so this is a pic and we can attach another one as well so let's go and do a i don't know an excel file and because it can't preview the file it'll just give you an excel and excel icon so this is my file and then it allows you to specify categories and all of these you can pause dynamically to the pop-up to the user and if you click on ok it's just going to show you the first file because of the controller we're using over there but this is the the functionality that we're actually busy with right now we're busy testing it making sure it works well and then we'll release the latest version to the community all right so um sorry there is one thing more it's the the load spinner so this will allow you to just call a load spinner from with anywhere in the app you don't have to every time go and create those controls in order to to get it done so if you go and set a variable you can get the load spinner going right so what does this thing look like in the background so if you're going to look at all of these buttons you'll see that the weather we call them we're just writing a basic instruction into a collection and then the component reads that instruction and then understands what it is that you expect from it so you'll see it's an it's okay pop-up there's the message you can have the kind of icon you want to display as well as the icon color and then also if you want to get a response back from it you can go and give it a a logical name which you could then catch with a toggle in which and and then actually write logic to go and fire off or trigger when that logical name is received back so that's for a normal okay let's go look at something like a slider we again we're just parsing some of the parameters into the collection and this time we're telling it's an input and it's a slider in this case message and then the specific configurations relating to the slider so in other words what is the default what is the tooltip and the minimum and maximum values and that's what gives you the functionality now what happens on the on the component side if i go into the component screen you'll see that i'm just grouping all of these things together so the real good stuff is is in the component a bit so if we go and have a look at the gallery you'll see that the gallery is simply just reading the first item in that collection this is a flexible height gallery and and that's why we use it it makes all of this a lot easier so even though we're only showing one item at a time it still makes sense to you to use the the gallery for that and then inside of this gallery we've got all of the different controls and you'll see that's the slider as an example if you're going to click on the slider you'll see that that now reads all of the parameters from that collection and then it knows whether it should be visible what size it should be what color it should be and and so on and so forth and then this entire component is just built with normal canvas apps components there's no development done here and this is a great example of a component that really will save you a lot of time instead of having to go and develop this every time you're looking to generate a pop-up to the users right so in a nutshell that's that's what i'm going to show you today are there any questions anything in particular that you guys would like to see so david i've heard that you're basically a lazy guy that's all i heard that's that's not unchew that's not that i love that oh this is awesome thank you yeah it's amazing right so i've posted a link in in the the chat so please go and check it out um there's some very in-depth instructions on how to get up and running with it with all of the different methods that you can use in order to call it there's also been some great feedback from the community and people who recommended enhancements to it so if you have any suggestions please send it through to us we'll definitely review and implement that a lot of good feedback really nice yeah thanks david