Hey Thunkers!
Lots of people ask how to add search bars inside their projects. Today, I found out how to, and I thought I’d share it with you since search bars come in handy in lots of projects, and this is quite a common question. If you want a search bar, you most likely want it for sieving through Airtable records/ data from grid and list layouts. So, I’ll only be talking of a search bar with regards to tables.
So, first add a row at the top of your app (this is possible anywhere but it’s best to do it at the top).
Inside the row, add a text-input and a button.
Add a list viewer underneath that.
Don’t add any text-items.
It’s also best to add a search terms column in your table, with all the possible terms one could use to search. You can do it like this:
If your user enters data that gets sent to your table, don’t forget to update the search terms!
Here, the user has entered a lot of data, and all the other users can search for that by using search terms. Here, the data a user can search for is: book name, author name, and genre. I’ve used the lower case block, so it’s easier to convert the user’s search into the same case as the search terms.
Now, go to the blocks section of the screen in which you have the search bar.
Now, initialize two variable to empty lists. The first one can be ‘search final results’ and the other can be ‘search row id result’.
Set the list-viewer’s text-items to null whenever the screen is opened, and reset the two variables.
A good debugging strategy, to check that everything is working is setting the text of a label after every function (set text, set variable abc to, etc). Here, I have set the text of a label after the Go button is clicked.
The best practice is to add a
if from text_input1 get text ≠ null, otherwise, there is a likelihood of your app crashing if the text input is empty.
Again, I have set the text of a label to ‘not null’. In case your app crashes, this is a great way of knowing exactly where your app is crashing.
As you might have guessed, I am bringing out a ‘for each item block’. The list is list of IDs in my data viewer table.
In this search bar, I have set the label text for every block.
That’s the main bit. We are checking if the cell in column search terms and row id= a(remember the for each item?) contains the text from the search input converted to lower case(because that’s the case the search terms column is in). For that, we have to put the does contain inside a = true block.
Then, I’ve set the label text to got one (debugging again). Then, we have gotten a different cell with the row id as a (because the search term for a contains the input’s search), and inserted it as the first in our variable search final results. And in our row id variable, we’ve inserted the row id itself(a). Then, we’ve set the list-viewer’s text-items to our final results variable. All of this is carried out inside the for each item loop.
Since it’s great to inform users when there are no results, instead of just leaving them wondering whether the app is malfunctioning, we’ve checked whether our variable is still the same as it was before we started the loop (empty list), and if yes, we’ve set a label text to ‘No search results found’.
Our last bit of code: getting data.
When the user clicks on an option which we displayed, containing their search results, you probably want to display more data around that in a different screen. For that, we require the row id which contains the data we displayed on the list-viewer, that the user clicked.
Initialize a clicked info variable. This will receive the row id.
Get out a WHEN LIST-VIEWER1 ITEM CLICK block. Inside that:
Our search row id variable contained the list of row id’s that had the search terms the user entered. We are getting the indexth item of that list, and setting the clicked info variable to it. Then, we are navigating to a different screen. You can display other information like this:
Sorry if I wasn’t that clear.
Hope this helped.
Happy Thunking!
P.S: This works well if you have to display information on a different screen. Since I am receiving information from a data source and not from Airtable, the index won’t be of any value to me, as Data Sources contain RowIDs, a combination of letters and numbers. That is why we have saved the row Id as well, to refer to in a different screen.
