I am excited to share a new example project that shows how you can build powerful search and filter functionality in your app using Data Source Filter Views.
In this Data Source:
- The “name” column is used for the search bar.
- The other columns act as filter criteria, each represented by a switch for flexibility.
Components Used:
-
Data Viewer component makes building and displaying a dynamic list faster and more intuitive.
-
Text input that acts as a search bar.
-
Labels and switches for the filters that let users toggle filters on and off with ease.
How It Works – The Key Blocks:
- When Text Input Changes: Triggers the search function when users type.
- When Any Switch Value Changes: Call the function when the filters change.
- A Function: To reduce the number of blocks needed.
- Update Filter For: Updates the values on conditions.
- Data Viewer List’s Refresh Data: Updates the list instantly with new results.
- Wait: Ensures filter updates are processed before the data refreshes.
- Join: Converts Boolean values to match the text format in your data source.
We hope this project inspires you to explore more possibilities with Thunkable!
Let us know what you build with it, we’d love to see your creations!