Creating Search Boxes in Power Apps

hey everyone April Dunham here this video is all about search boxes for power apps I'll take you through step by step how to create search boxes for your power-ups calories but first here's the intro alright so here I have a power app that I'm building so that I can look for training and add training to my schedule now in this use case I have a gallery that I've surfaced up here and this just points to a SharePoint list that has different information about the trainings that I offer so what I'd like to happen is this is the home screen of my app so like to be able to log in here and not only see training that I've signed up for that I completed but also find a training that I could take when I click that find training is gonna take me to this screen where I have my gallery now rather than scrolling through all of this and trying to find the the classes that I want to take I want to be able to search for this list because it's going to get fairly big and I want to be able to search based on topic speaker things like that so let's walk through how to add in search functionality here now the first piece of this is to add in the gallery that you're going to want to search on which I've already done here but now how do we implement these search functionality first thing we're going to want to do is insert a text input control so this is where we'll actually type in our search query and we'll use whatever we type in here to filter the results in the gallery so I added in the text input and I'm just going to do a little bit of tweaking here to make it look how I want now first thing you're going to want to do is click on your text input and remove that default text because we want that to be empty by default now the next thing that I always do for all of my search boxes is I utilize this hint text property and then here I'm going to type search for training so you could keep it simple and just put in search or put in luckily what you're wanting them to search for so that's gonna have that help tech so that the user knows that this is a search box the next thing I'm going to do is just make this a little bit bigger and wider and now I want to change the border I don't want that blue I want like a nice gray border here so I'm just gonna click on the border color and change that to gray if you've looked at search boxes before on different sites you notice that they all have that kind of magnifying glass icon so it's pretty standard so we're gonna go here into icons and we'll insert this search icon so I'm just going to drag that and kind of put it in the right-hand side of the search box and then I change the color of this as well to be kind of a gray so I'm going to click on the color property I select one of these great colors here and then I will just kind of shrink the size down a bit by you're adjusting the width and height and drag it back into proportion there and another thing that you can do with this search icon if you want the magnifying glass to be facing a different direction if you click on the icon here you can change the rotation so you see there I just change the rotation to 90 degrees so now it's spacing the other way it's just another nice little touch that you can do all right so now if we play this we see now we have a text box that we can type into that looks pretty nice now how do we make what we type in here filter the results in the gallery right so before I show that at first I'm going to rename this search box so that we give it a relevant name so I'm going to call this text box search input and now if we click on our gallery here I'll show you one way that we can filter this information so but one of the ways that you can filter data in a gallery is with this filter function so you type in filter you point it to your data source which in my case is list called training and now if we do a comma we can do a logical test so one of the things that we can do is we can use a the function starts with now this is going to ask you okay what text do you want to check so you can take any column in your data source so for example maybe the title because that's where these session name is stored here and then do a comma and then now you put in the text that you're going to search so your search box text here so we could just point this directly to our text box search input and then do the dot to get its text value close out those parentheses there all right so that's this is the most basic way to do some searching here so if we click play we can click into our text box and if I start typing creating see that it's filtering as I type the results here sometimes though you don't want that real-time filtering or searching as you type sometimes you want a classic search experience where you would type in something like power apps for example press ENTER and have it do the search for you so now let's take a look at how to do that kind of searching if you want to search that way we're going to need to utilize variables to be able to take whatever our text input is and output that to a variable to filter based off now first thing we need to do if we want to do it that way is we have to click on our search box and change a few properties here the first thing we want to change we click on the properties pane is this delay output setting by default this is set to false what this means is each time that we type something in here it's going to evaluate and get the keystroke that we just made which is useful if you want to filter it Howie just had it as we start typing because it's going to evaluate each time we type and it's going to filter the results but if we don't want that if we want to just type something and press Enter and then have it do that we need to set that property to true so that I've delays and waits until we're done typing to do anything now we need a way now that we have that we need a way to be able to get whatever we typed after we're done typing it that's where a variable comes into play if we click on the drop down for our text input box you'll see a property for on change so each time we change the value in this text box we want to set that out to a variable that we'll use for filtering in our list here so on the on change I'm going to a variable using the set command called search query and I'll just set that to our text box search input text and when you're working with variables I always recommend going in and adding a label and setting it to your variable the text property of that to your variable here so search query just to make sure that it's being filled out correctly so I haven't updated the query yet for a gallery but let's just test this out and make sure that that variable is being set so if I type in power and enter notice how its set our variable to power so what I can do if this is unchanged will evaluate anytime I type something and press Enter into that now the other way we probably want to allow people to search with the inner but also search if they click on that little magnifying glass so we can use that same variable that we set here on the on change so we can copy that and put that into the on select of our magnifying glass icon so that now if I were to go in type in something and click the magnifying glass it also sets that variable all right so we're going to update our items property and change this filter a bit so that I doesn't do that real-time search and waits for us to press ENTER there on the search so what we can do is we can just change this starts with and instead of pointing that directly to our text box search input set that to our variable that we just created so you see like we were removing what we just typed there and nothing's happening in our list right now so if I were to come in here type in intro and do an inter now it filters all my items it's not filtering it as I type it waits for me to type in something to search for either enter or click are magnifying glass and then it filters our list accordingly this is actually my preferred way of searching is having it be delayed on either pressing enter in the box or clicking an icon here and then filtering it I think this way really helps performance and is a better experience in my opinion another thing that I like to do with the search boxes here so say I type in a search it's usually helpful to have an easy way to clear out your search so instead of having to come in here and backspace and enter kind of clear out your search one thing that I'll do is I'll add another icon which is this X icon and I'll put it right where I have my magnifying glass and we'll just kind of make it match the colors and everything I'm just going to rename the icon so I know which one this is and if we click on this new X icon we can set its on select and we'll have it update that same variable but instead of making the value whatever we have in this text box we'll just put two quotes right there so that it's an empty value so this will essentially clear out our search and then now all we need to do is we only want to show the X icon if we have something typed into our search box otherwise we want to hide it so we can click on the icon go to its visible property and we can say if the text box search input text and we'll use the is blank function which can evaluate if an object is blank so if it is blank then we want it to not show so we'll set the visibility to false but if it's not blank we want to set it to true so let's just run this in and see how it works so right now I have no value in there so we just see our magnifying glass like we want now if I type something you see the X is showing here now we do have an issue where the magnifying glass is still showing so what we need to do is go into that icon for the magnifying glass go to its visible property and do the opposite of what we just typed so if that text box is blank then we do want it to show otherwise we want to hide that so now if we play this again you see our magnifying glass is hidden but we see the X and if I click that X you can see that the variable was set back to empty but you'll notice we still have a value in our search box so we need to do one more thing on the on select of that icon after we set our variable will do a semicolon and then we are going to empty out the text box so we can do that with the reset function so we can reset our text box search and let's play this again click our X now you can see the values emptied out the X goes away since it's empty now and our magnifying glass shows let's just walk through again let's search we'll search on power so it's filtering our list we can see the variables set correctly we have our X can click that empties everything out and all the results are showing again that's really all there is to it to adding in a search box and there is obviously when you're doing this you need to keep in mind delegation so you'll notice the way that I was implementing the search in my gallery I was using the filter and these starts with functions that's because these are delegate functions so they'll work no matter how many records that you have in your data source another way that you could do this is with the search function however that is not delegate so if you have more than 2,000 items in your data source it's not going to query all of your items and those search isn't going to work how you would expect it I'm not going to go too deep into delegation in this video because this was just showing how to implement the search functionality I will put a link to some delegation information in the video notes though so you can take a look at that and get familiar with delegation that's all I have for this video if you liked please like it subscribe and we'll catch you in the next video

Channel: April Dunnam

Views: 51,732

Keywords: powerapps search items, powerapps search function, powerapps search box, powerapps search sharepoint list, powerapps search button, shane young powerapps, shane young, bold zebras, bold zebras powerapps, learn powerapps, powerapps, search, filter, microsoft powerapps, powerapps tutorial, powerapps in office 365, powerapps sharepoint, search powerapps, powerapps search multiple fields, powerapps search not working, April Dunnam

Id: f-D99120E8Y

Length: 12min 8sec (728 seconds)

Published: Mon May 18 2020