Best Practices for Saved Filters

Ask us anything How do I?
1

I am building a website that uses a sidebar to filter a collection. My particular website is based on a user’s song library, but structurally, it is similar to a website where you are searching for homes or cars and you have a sidebar of filters such as price, neighborhood, number of bedrooms, etc.

I am using Xano as the backend and am retrieving the collection dynamically. In the sidebar, I am using the single select, multi-select, date, and search bar components. Filtering is happening on the backend.

I want the user to be able to create “saved searches.” They would set their search criteria, hit a save button, and then be able to recall these searches from a dropdown. For instance, a user may have a saved search of houses in a certain zip code, with 2 bedrooms, under $400K.

Are there any best practices for this?

When they hit “save,” I plan to save their current settings / variables to my Xano database.

When a user recalls one of these saved filters, it seems straightforward to apply those values to my Xano search filters to recall that search.

But I’m not sure about the user experience. Instead of sending those values directly into the Xano filters, I wondered if it was possible to make each filter component on the sidebar recall the assigned value so that the user can continue to edit/adjust. But I’m not sure how to do that. The single select, multiselect and date picker allow you to choose an initial value, but that’s not the same as a replacement value. The search bar components could display the value as the placeholder value, but that’s not a value that is sending back to the database.

What’s the smart way to set this up?

2

If the available filters are defined by you there is not too many, you can create a table saved filters and each column will remember the value for a specific filter.

If they are not defined by you, are highly dynamics, or if you dont want to have a dedicated table, or if you dont want as many columns as you have filters, you can use an object type column to store it as a JSON format.

{
  name: 'Requiem',
  artist:  'mozart'
}

When you want to recall one, you fetch the savedFilter and you will call the action change variable value to update the variable for every component used to filter. It’s how you can update their value without relaying to the initial value property.

2 Likes
3

Thanks, Alexis. I was looking to bind this inside the component itself but realize now that I access it through the variable in the workflow. Problem solved.

1 Like