Simple Search in FlutterFlow and Supabase
Vložit
- čas přidán 18. 02. 2024
- Welcome. In this video you learn how to implement simple search in Flutterflow a no code software running on FlutterFlow with a Supabase database. Learning to create mobile apps does not need to be hard nor stressful. It can be fast and simple with Flutterflow.
Currently, FlutterFlow has no straightforward way to implement a simple search using a Supabase database, so the creation of your own API in FlutterFlow is needed. Here, I will teach you the easiest way to do so.
#flutterflow #mobileapp #mobileappdev #supabase #search #nocode #nocodedevelopment #beginners - Věda a technologie
I really like the fact that you focus your channel's content on Supabase as a backend. And your examples are really relevant. Thank you very much for that. 😊
Thank you for the kind words! I will strive to put out more quality content regarding Supabase and Flutterflow!
@@just_xolotlagree the reason i subscribe is they focused on supabase
Yes. Please keep focus in FF + Supabase with more advanced app. Thanks
Excellent video, very useful and straight to the point. Thank you very much!!
Thanks! ❤️
Awesome! Great video! Thanks master!
Haha thanks! But I’m no master, I’m still forever learning 🙂
thx u
Thx brother
Thank you so much, very usefull video
Thank you brother
Hello everything is fine?
I really like your videos. I'm new to Flutterflow and I'm using this video to start an APP.
Could you make a video showing how to edit/delete the listview record with API.
Thank you😃
hello there! Are you storing your list view record in your app itself? Or is it linked to Supabase or Firebase?
@@just_xolotl Hello
I'm using Supabase.
The query that feeds the listview is via API
Thank you 🔥
😁
how can we make multiple search string like in this video you showed us about SEARCH STRING assigned to First Name but i wanna know how can search even the First Name and categories or by price
Hey there! Yup it’s possible to filter multiple conditions. You can just string conditions together with the ‘&’ operator. For example you could create an api call like this:
.supabase.co/rest/v1/?=eq.&=eq.&etc.
If you need help understanding the api call, do feel free to ask away! You can find me on instagram @just_xolotl . Hope this helps!
tnx
Thank you too!
What if I want to search the entire row. Say I enter in a searchfield for address where I might enter a street address (or part of it) or a city, or a state? All fields in the table basically. Also want to exclude returning rows that are archived=true.
Sorry I don’t really get your question. Do you mean searching for different columns in a table?
@@just_xolotl Yes, address, cty, state in one search.
Love it, but once again, I’m seeing the pasting of api keys into FF’s front end code. Wish that FF would implement the kind of easy secret manager that build ship has right in FF.
That’s true hopefully the FF team does something about this!
Thank you for the great video. I have a question about when I want to press the > button on the right side and switch pages with Navigate to. I don't know how to display each item in a single selected row to a text field or text widget.
You can do it by creating a page parameter in the new page and pass these parameters in your navigate to action
Since I am a non-engineer and not familiar with this, and the data was in JSON format, I had trouble setting the parameters. However, I could get the desired Row by specifying $.id in the JSON Path as a parameter and filtering Supabase Query with that id on a new page.Thank you !
@@TKG-sk8xt Awesome! Glad you found a way! 👍
Hi mate, I am becoming a BIG fan.. love your videos and really helping me a lot as I am a newbie no -coder. Just have a quick question, how can I pass the selected item to another screen? Just to give you more information about my app. I am building a staff database app part of a bigger app. I have a screen where I can filter the staff by department and when I click on one of them I pass the record to another details screen. After your video, I have created another screen where I can search for the staff and I want to pass the selected item to the same details screen.
Hey there. You could create a page parameter and pass your data from the first page to your second page under the navigate to action. If you still need help feel free to contact me either on Instagram @just_xolotl or email xolotlwastaken@gmail.com
I have a question: is it possible to have two types of filters on the same page?
I'm trying to create a social media feed, but I'd like to have a search field and a localization filter (to only show some events for the user's city)
btw, im using flutter and supabase too, you are helping a lot, it's my first year developing no-code
Hey there! Yup it’s possible to filter multiple conditions. You can just string conditions together with the ‘&’ operator. For example you could create an api call like this:
.supabase.co/rest/v1/?=eq.&=eq.&etc.
If you need help understanding the api call, do feel free to ask away! You can find me on instagram @just_xolotl . Hope this helps!
Thanks very much, glad I could help! I’m also learning everyday!
@@just_xolotl sure, i''ll text you about API!
Great video pal , I used to have issues with this . Whenever I searched the f it’s only one item the page crashes .
Great to hear that this video helped you!
Hello! Please tell me how to remove yourself from the search? The search searches for all authorized users in the number and account on which the search is performed.
Hi you can add an additional condition of not.eq.[user_id] where user_id is a variable to pass the current user’s id.
You can find the curl for a similar search here at around 7:12
czcams.com/video/dwx2pD2ifZI/video.htmlsi=95CXrS0FavCCQU1Y
OMG THANK YOU SIR, YOU SAVED MY FCKING LIFE!!!!!!!!
😎❤️
HI good video ...trying to use your method to search in a supabase table that contains a jsonb field in one column any hints??
Hi could you share with me what your json column contains, like what are the json headers? It would be good if you could send me some pics of your table on Instagram @just_xolotl Thanks!
Hey, great info!
I wonder if its possible to set up a column specific search function for a datatable which already has a backend supabase query list showing data rows?
Hi yes it is! You can make use of the already existing simple search action in flutterflow. Do connect with me on instagram @just_xolotl if you’d like me to guide you through the process!
@@just_xolotl Hey, i figured this one out as well ;D Added an additional dynamic variable in the API URL for columns and then set the dropdown values with json paths and viola.
@@artemgordon75 👍
thanks for the sharing!
but i had an error since my supabase row include few columns of boolean variables, what should I do to fix this? thanks in advance !
Hey there! Thanks for the kind words! If you're trying to filter your columns which have boolean variables, you can change your api to something like this:
.supabase.co/rest/v1/?[columnName]=eq.[trueOrFalse]&select=*
,where columnName is a string variable for the column you want to filter on and trueOrFalse is a boolean variable for whether you want to filter for true or false rows
For example,
aaaaaaaaaa.supabase.co/rest/v1/usersTable?[columnName]=eq.[trueOrFalse]&select=*
btw, 'eq.' here means 'equal to'
Hope this helps you with your error! If you still have problems/questions, feel free to continue asking in this thread! Or you can also connect with me on Instagram @just_xolotl
@@just_xolotl thanks for your kind sharing ! FYI I also found an alternative way that Flutterflow can parse api results to data type! So i match all api results and assign data type to each result, including the boolean (true/false). That works fine now !
@@asletic That’s awesome! Going through the process of problem solving and finally coming up with a solution is what learning is all about! The satisfaction that comes with finally finding a solution is also amazing 🤩 Keep grinding! 💪
hi, may i ask you a question which smiliar to your guideline. since your reference is first_name=ilike.*[searchString]*&select=*. which first_name is the specific column & searchString is base on the value.
For my scenario as below
[searchType]=ilike.*[searchString]*&select=*
searchType is the variable ( for input value to match the specific column ) and searchString same as yours. While now i want to change the searchString to be "is a list". i tried to remain the same curl or change to [searchType]=ilike.=in.(*[searchString]*)&select=* but it does not work on previous & test page. when i input ["XXX"] value which [" "] is the correct format for array i guess and error pop out. sorry if my curl has error as i never study any dart or anything related to this before.
can you guide me what is the correct curl to implement?
Hi! Glad to see your question! To understand your problem better, I need to ask you some questions:
1. What is the data type of your column? Is it just a string (e.g. “XXX”) or is it a list of strings (e.g. [“A”, “B”, “C”]) ?
2. What do you expect the outcome to be? For instance, if the search string is [“A”, “B”, “C”], do you want to return rows where the column is “A”, “B” or “C”? And what about rows where the column is “AB” or “BC”? Or do you want to return rows where the column is a subset of the searchString (e.g. [“A”], [“B”, “C”], [“C”, “A”])?
Sorry if the questions sound a little complicated but hopefully you can answer them and I can help you with your problem! :)
@@just_xolotl thank you for your replied.
1) that specific column is list ( array ) in supabase. so it is a list of strings (e.g. [“A”, “B”, “C”]), since there is many row. some may contain null values, some will be strings (e.g. [“A”, “C”]) etc. so i trying to create a text field in flutterflow to search for the string within the specific column, which contain for e.g ["B"] and retrieve the data for specific row to show in datatable. it will be good if i able to contact you through email / any social tool. appreciate
@@just_xolotl hi thank you for your replied.
1) the data type is string (array) in supbase column so it is a list of strings (e.g. [“A”, “B”, “C”])
2) my expectation of outcome will be
i created a text field in flutterflow, the action is to search the any values contains in specific column ( array ) that contain specific values. for example some row is null, some is [“A”, “B”, “C”], [“A”, “C”], [“B”, “C”]. so whichever row contain [“A”], i want to retrieve the data to datatable.
it will be good if u able to share your contact like email or other social tool. thank you and appreciate.
@@jovichow4494 ok I think I understand now! You can try changing the search api to something like this:
.supabase.co/rest/v1/?=ov.{[searchString]}&select=*
,where searchString should be a variable of type string and not an array as the curly brackets {} are used to represent an array and not the square brackets []. This is just a syntax for the postgrest api, which is what we are writing our curl in.
for example,
aaaaaaaaa.supabase.co/rest/v1/table?column=ov.{[searchString]}&select=*
To explain the curl more in detail, the ov operator compares any overlap between the two arrays and returns those that overlap. So if your searchString is "A", then it would return all rows where the column array contains "A".
If you would like to read up more on postgrest api comparison operators, you can find the resources that I use here: postgrest.org/en/v12/references/api/tables_views.html
Hope this helps! :) If you still have questions, you can connect with me on Instagram at @just_xolotl
@just_xolotl do I sent out the reply message yesterday?
if I needed to search 2 variables as “this and/or this” would I just create a second variable in the API call
Replied to u on insta :)
Just implemented this with a field input and choice chips and works a treat. 😊
Excellent video. I have a question, now Supabase doesn't allow to modify the auth.user, we need to create an additional table like public.user with custom field like phone, country, etc. How can I retrieve these custom fields one time for the logged user so I can display the user phone number in any page when I need it?. How to save those custom field in the app to use them when I need it ?
You could create persisted app state variables, which are saved even when the user closes the app, and set them to the user's information when they sign in/sign up. Then they can be used globally throughout your whole app, no need to do a query on every page.
Hope this helps! If you have more questions/need a short video tutorial, you can contact me on instagram @just_xolotl
Cheers! :)
Hi, Joel. Is it possible to achieve this with a custom function instead of an API call?
Yup definitely! I know Flutterflow (free version) has a limit on the number of apis you can use so it’s definitely a good idea to use a custom function too. Do let me know if you’d like a short tutorial on that!
@@just_xolotl Thx, Joel! Can I donate you a coffee? What's your donation link? I can only find your ins :)
@@starseedsdimension4093 Haha thanks! I haven't really set anything up yet, I've just been focusing on youtube and creating flutterflow tutorials for everyone to learn from and enjoy! The main reason for creating my channel was to share what I've learnt and also to learn even more while creating videos too! So thank you very much for your support!
That said, I do plan to create my own website as well in the future, so maybe you can support me there next time! Thanks!
😄
I implemented it and am a experiencing a bit of delay in getting back the results. Is there a way to get the results faster?
I also noticed that and have been trying to find solutions. I think the delay is due to needing to connect with supabase. So as of now I’ve just settled with the loading indicator before the result is returned
Hi. You helped me a lot. Thanks. A question: If I want to filter with more parameters, for example: first_name=like.*[variable]* OR last_name=like.*[variable]* how can i do it? I know & is AND, but I don´t know OR. Thanks!
Hi! Glad to hear it. For the OR condition, it would be like this:
or=(first_name=like.*[variable]*, last_name=like.*[variable]*)
I had the same question and got help from ChatGPT :)
Hi! Very interesting video, many thanks! I have question. Let's assume that I want to add the user's information in the list using the icone on the right. How can I do it?
Hi! May I know what list and what icon you're referring to? Do you mean reflecting user information (like their name, email, phone number, that you have in your Supabase table in the UI of your app? For instance a list view with list tiles for each user with their information?
@@just_xolotl
I have successfully implemented a "Search Bar" (thanks to you!!!) feature in our application, utilizing an API GET Call that interacts with a designated table within our Supabase environment. This development aims to streamline the process for students seeking to identify their respective universities from a comprehensive list of 693 institutions, thereby eliminating the need to navigate through an extensive dropdown list.
Context: Our database structure in Supabase consists of two primary tables:
Users: This table stores user-specific information, including uid, email, school, among other details.
School: This table catalogs details pertaining to educational institutions, such as id, institution name, code, and country.
Objective: The core functionality I aim to achieve is to allow users to efficiently search and select their university. Upon selection, and by clicking on an "Add" button associated with their choice, the system should capture and record the name, ID, and country of the chosen university into the "Users" table under the user's profile.
Challenge Encountered: While the search module is operational and meets the intended search functionality, I am currently facing difficulties in transmitting the selected university data back to the "Users" table in Supabase.
@@just_xolotl I have a table including id, University name, country. I would like to show these information within a listview. Then, when the user searches for its university and find it, it would click on a button that would send the university in the user’s table. I don’t know if I am being clear haha ?
@@MusicLover-on1wg ok I see. So you can follow the steps in the video to show the university info in a list view. You can add a button inside the container (or component) which is the child of the list view. You can then add an action to that button to insert/update a supabase row in the users table (either setting the id to current auth uid id if inserting or filtering where id is equal to current auth uid). You can then set the university field in your users table as the university information from userItems items (using the exact same way I link it to the UI in the video).
Sorry if it’s quite confusing I tried my best to explain it in words lol. If you still need help feel free to dm me on instagram @just_xolotl and I can send you a quick vid of how to implement this. Hope this helps!
I developed something similar to what you described. However, I needed it to pull only the items from a specific store. In this case, when I click on a container, it goes to a list view of products, but I need it to be only the list of items from that specific store that was clicked. Can you help me with that?
hi! To understand your problem better, what's your backend data structure like? Do you have a supabase table where each row is for a different store with a list of their respective products? I think this will help you to pull the products of a specific store.
@@just_xolotl
Hello, first of all, thank you and sorry for my English, I am Brazilian XD
I have 3 tables, namely: store, products, and users. The products table has a foreign key to the stores, so there are different products in different stores. In this case, when I am calling the products, it's fetching all products from all stores. I need only the products from the specific store to appear. For example, if I am in "Store 2," I need only the products that belong to it to appear, but currently, it's fetching products from all stores. I need the search bar to work within this specific store.
@@JonasDMoura Hi! Thanks for clarifying and I think I understand your problem and can help you now! So a solution that I could come up with is as follow:
1. When you choose a store that you want to search products for, you can store the foreign key relation (e.g. store_id) into an page or app state variable (or anywhere as long as it is accessible with your list view).
2. Modify your search api to include filtering by the foreign key relation (e.g. store_id) by adding another variable (e.g. storeId in the example below) under variables So your new api url will look something like this:
.supabase.co/rest/v1/?=ilike.*[searchString]*&=eq.[]&select=*
for example,
aaaaaaaaa.supabase.co/rest/v1/products?product_name=ilike.*[searchString]*&store_id=eq.[storeId]&select=*
This should return you only the products of a specific store that matches the search string. Thanks for reaching out and I hope this solves your problem! :) If you still have any other questions, don't hesitate to reach out!
@@just_xolotl Hello! It worked, I can't believe it, you saved my project! Thank you so much!
@@JonasDMoura Glad to hear it! All the best moving forward with your app! 💪
Nicely done.
Please get rid of the music, it is distracting when trying to hear you because you speak softly.
Thank you! For both the kind words and advice. I’ve done just that and there’s no more music in the latest video! Check it out if you haven’t!
nice tutorial :) but i have a question, what if i dont want to display all the results from the start, and only when you type in search then i want to display the result in the list view ?
Hi! You could create a page state variable to hold the search results. You could make it an empty json list at first. Then whenever the user changes the text field and the api call is done, you assign the results to the page state variable. You also have to change the generate dynamic children of the list view from the action output of the api results to the page state variable
Thanks !☺️