Simple Search in FlutterFlow and Supabase

[Music] welcome to this tutorial where we will be implementing a simple search in flat flow when we have a super based database so as you can see here I have a table in super base of user data of randomly generated user data which has first name last name email and number columns so let's say I want to implement a search for function in my flut Flow app which allows the users to search for a first name of other people of other users and it will return all users the information of users which have the same first name that they have searched so how can we do that well we will need to create an API in flutter flow so on this left hand column here you can just go to API calls and you can define an API we can just press add and we can create an API call for the API call name we can just name it as search users and for the API URL we'll just go back to our super base and we'll go to this fun to this menu API docs under tables and Views we'll click on user data and we'll scroll down all the way to filter we can click on bash and under filtering we will copy and paste this so we copy and paste this don't include the open and close quotations and we'll copy and paste this into our API Ur right here for the headers we need to add some heads we need to add two heads which are our API key and our authorization so to show the API Keys we can just click on this and we can click on public so it's right over here just copied all the way from here for the API key don't include the quotations and we'll copy the authorization as well and paste it into this one all right and now for the actual API URL we want to filter our table by our first name so in order to do that we have to change this ID to first name and is equal to I like Dot and then it'll be equal to the thing that we want to search form so we'll just do an Asis a bracket and then we'll say search string and this will be the param parameter that we will pass into our API query and then we'll just say and select the whole row which matches this so one last thing we just have to add some variables we have to add our search string variable so under variables we just Define a search string Str it'll be of type string and it can have a default value of a space and we can just add the call all right so a little bit more explanation into how the API URL works so this part sorry this part references your super base table and that will be taken from your super based API documentations it'll be custom to your own super base table so that shouldn't change this part over here references your table name and your specific table in your super base project so this user data is the name of my table user data it will be the same and this part is where the filtering takes place so this is the column name and this is the equal to so this will be the column name that you want to search in my case it will be we searching on the first name so it's first name over here and this I like is actually a specific uh post grass filter so there are all these different filters which there's equals to greater than greater than or equal to and for I like is over here is an operator it takes in the search string that we passed into to it and it sees if the search string is contained in the first name over here and these two ASCS over here these asteris are to uh remove the case sensitiveness of the search string and these the bracket over here is to tell the API URL that is a variable that we have defined and this select all it just means to select the whole row the entire row that and all the data in the row itself we can try testing out our API so under the value for the search string Let's see we can try to search for this first name alaster so we can just type elas and we can test the API [Music] call yeah and it does re it does return the correct uh thing that we are looking for the correct user that we have searched for we can also try searching for a short form of the name Alas and it should return the same thing yeah it does return the same thing we can try using a lowercase [Music] letters and it still returns elastic which is what you want let's say we searched for a random thing a random search string and it should return now yep that's correct so that is our API done you can click on Save and we can go back into our flutter Flow app so now we want to link our API call to our UI and our flut Flow app so to do that I have a list view here which is already done I'll just click on the list View and I'll add a query on the list view itself it will be of type API call not super based query because we want to we want to call the API that we have just made and there'll be this search users API that we have just mean for variables you want to set the variable to of the search string to our widget State our text field uh input that the user will input just click on confir and then now we have to click on this we can give it a name of user items and this is where the this is the variable that will return the data from the API call and as for the value we'll click on this search users response and we only want the Json body so for the available options we'll just say no for further changes and click on confirm and then we save this click on okay so to link the UI itself we'll first start with the name we'll just give the first name for this text over here so we change the text we click on user items and for the default variable we'll click on the space for the default variable and for the actual variable we want it to be a Json path and the Json path will be dots and whatever column you want so for this I want it to be the first name so we copy and paste this column heading into this Json path so B first uncore name now you can click on confirm you can do the same for the number as well we'll change the text click on user items click on this it'll choose Json path and for this it will be Dot and the number since this is the column name for the number of our users for the phone number of our users the default variable can be [Music] zero yep and lastly the email is also exactly the same thing click on user items item click on Json path and the Json path will be dots and whatever the title of the column in your super base table is so it'll be email default variable can just be a space and the last thing is that whenever the user types in an input or changes the input you want to update the whole page in query so that the user user Tils here in the list view also get updated whenever we change our search string in the user input so we click on the text view we'll scroll down all the way down to additional properties and we want to update the page on text change so that will refresh the you the API call as well as the UI to show only the most current users that the user wishes to search for all right so that's it for our simple search it should all be done now and we can try testing it out in the test [Music] note okay so now it is returning all of the users since the initial search is a is n so it will return all the users now when me try to search let's say B you can see there is updated to ball which is the person that we are trying to search for let's try let's try to search for Cho you can search C hu [Music] [Music] o yep and you we we can see that chco has indeed shown up over here and we can see that the number the chco number 886 428 86428 as well as the email is reflected there as well so thank you for watching that wraps up this simple tutorial of how to implement a simple search in flut flow when you have a super based table base when you have a super based database I hope to see you around again and thank you and [Music] [Music] [Music] goodbye

Channel: just xolotl

Views: 1,544

Keywords: flutterflow, flutterflow supabase, flutterflow tutorial, supabase, supabase flutterflow, supabase tutorial

Id: yExwJg1Kz0s

Length: 12min 22sec (742 seconds)

Published: Tue Feb 20 2024