Join the Webstudio community

Updated 2 weeks ago

How to Baserow filter correctly

At a glance

The post is about a community member seeking help to get all results when filters are not checked in a Baserow application. The community members discuss the issue, provide suggestions, and share code examples. The main points are:

- Baserow should ignore filters when their values are undefined.

- The community member is having trouble with the expression to fetch data from Baserow when filters are not checked.

- There are issues with the expression, such as the filters not being ignored when their values are undefined, and the script rerendering other elements on the page.

The answer provided is an "ugly solution" that conditionally renders the proper filter if the user filtered by that, otherwise, it falls back to a filter that will always return true, like the title is not empty.

Useful resources
Hi @Oleg Isonen or @John Siciliano

How do I get all result when the filters are not checked
context: on the video
it only appears when the filter is checked

my expression are like this


https://api.baserow.io/api/database/rows/table/${baserowTableId}/?user_field_names=${baserowUserFieldNames}&size=${baserowItemsPerPage}&order_by=${baserowOrderBy}${system.search.page ? &page=${system.search.page} : ''}&filters= {"filter_type":"OR","filters":[{"type":"boolean","field":3620275,"value":"${system.search.editorChoice && 1}"}, {"type":"multiple_select_has","field":3623471,"value":"${system.search.coding && 2867330} "}],"groups":[]} ${system.search.search ? &search=${system.search.search} : ''}
Marked as solution
Ugly solution incoming....

Plain Text
`https://api.baserow.io/api/database/rows/table/${baserowTableId}/?user_field_names=${baserowUserFieldNames}&size=${baserowItemsPerPage}&order_by=${baserowOrderBy}${system.search.page ? `&page=${system.search.page}` : ''}

&filters={"filter_type":"OR","filters":[

${system.search.editorChoice ? `{"type":"boolean","field":3620275,"value":"1"}` : `{"type":"not_empty","field":3609849,"value":""}`},
${system.search.coding ? `{"type":"multiple_select_has","field":3623471,"value":"2867330"}` : `{"type":"not_empty","field":3609849,"value":""}`},
${system.search.socialMedia ? `{"type":"multiple_select_has","field":3623471,"value":"2867331"}` : `{"type":"not_empty","field":3609849,"value":""}`},
${system.search.advertising ? `{"type":"multiple_select_has","field":3623471,"value":"2867332"}` : `{"type":"not_empty","field":3609849,"value":""}`},
${system.search.marketResearch ? `{"type":"multiple_select_has","field":3623471,"value":"2867333"}` : `{"type":"not_empty","field":3609849,"value":""}`},
${system.search.content ? `{"type":"multiple_select_has","field":3623471,"value":"2867334"}` : `{"type":"not_empty","field":3609849,"value":""}`},
${system.search.seo ? `{"type":"multiple_select_has","field":3623471,"value":"2867335"}` : `{"type":"not_empty","field":3609849,"value":""}`}


],"groups":[]}

${system.search.search ? `&search=${system.search.search}` : ''}`


So there are two dilemmas
  1. Every filter item except the last must have a trailing comma. Because filters are dynamic, its nearly impossible to add logic to figure out which one is the last and to exclude the comma
  2. For certain baserow fields like multiselect, passing "undefined" I guess searches literally for "undefined".
Solution: conditionally render the proper filter if the user filtered by that otherwise fallback to some filter that will always return true, like title is not empty.
View full solution
J
A
O
83 comments
heres what we have in the marketplace. Baserow should ignore filters when their values are undefined
Attachment
Screenshot_2025-03-05_at_3.21.04_PM.png
isn't this the same no?
Attachment
CleanShot_2025-03-06_at_08.32.512x.png
Hi @Oleg Isonen do you know what did I miss here?
@Adam Muflihun can you describe step by step what the functionality supposed to be working like?
I am not sure what is working, what is not working
Yes sorry @Oleg Isonen

  1. so I have my baserow expression like this. following the template
I think I did something wrong. or something is missing there.
when the checkbox filter is not checked. there's no data to display.
so it's not ignoring the filter when filter value is undefined.

in here. it shows all data when checkbox is not checked.
https://www.youtube.com/watch?v=oAaGTsHt-aE&t=814s
Attachment
CleanShot_2025-03-06_at_19.02.272x.png
last line seems to be missing &
its supposed to be always x=1&y=2&z=3
we will make it possible to split each parameter into individual inputs to make it easier to read/write
oh wait sorry what does it mean?

so how do I do this
" Baserow should ignore filters when their values are undefined"
I opened network tab and saw this error:
"detail": "The field 2630104 was not found in the table."
Attachment
image.png
you have too many things going on on that page
can you isolate the problem and have only that on one page?
I am not even sure what I am looking at
you can for starters just toggle the show button and hide everything that is not relevant to the problem
to make it easier for us to look
generally we shouldn't be debugging the entire project like that, but a minimal reproducible example
Hi @Oleg Isonen do you have the view mode of this ?

https://webstudio.is/tools/headless-cms-finder

it would be just faster to see how this can work
Or a view mode of similar baserow implementation that works?

https://marketplace-baserow.wstd.io/directory
@John Siciliano when you wake up please check what happend to it
I think I've seen someone have this issue before and vaguely recall it having to do with how baserow handles different field types. You are filtering by a multiselect and I guess they are literally looking for "undefined" as your value.

Attached is another approach. Instead of conditionally rendering just the search value (that number/id), the entire filter item is conditional... if the filter value is present, then add that filter line to the array.

I tried it on one line and it worked.

Let me know if you'd like more explanation.

Btw cool looking site. Would love to see it when its done
Attachment
Screenshot_2025-03-06_at_6.11.08_AM.png
the syntax btw

Plain Text
${system.search.coding ? `{"type":"multiple_select_has","field":3623471,"value":"2867330"}` : ''}
does baserow have a playground to build a query there before trying it in webstudio? I wonder if it would be easier that way to try the query first
They have a query builder but not a way to execute them
btw @John Siciliano

  1. there's a slight delay on the first click on the filter. is it because of it's taking the api calls?
  2. https://cln.sh/vPMsNGqW
when I click the filter it always reset the other script that I have. it's rive on the top banner and the gsap, is there a way to prevent that from restarting?
is it because the form, that it triggers a submission? is there a way to solve this?
I'm not totally sure. Can you try disabling your auto submit and see how native submit button acts?
it's the same button submit though it's just

if checkbox is clicked then #cmsSubmit is clicked after that.

/ mirror click
🤷‍♂️ probably. It's just a mediocre theory though something to try to figure it out
So it’s because the submission right? Because after the checkbox you need to click the cmsSubmit button.

I tried adding event.preventdefault
But then it doesn’t register the filter
I'm not sure why the scripts are rerendering. I doubt that's default behavior but maybe im wrong.

So I wanted to test not using a script to submit and just temporarily try submitting with the actual button. If that fixes it then we can go from there
so I disable the script
https://cln.sh/b6QGm4BB

  • it's still appearing it's rerendering the gsap and other embeds
oh wait @John Siciliano I just realized, now if you have multiple filters like this it just goes to undefined
Attachment
CleanShot_2025-03-07_at_04.51.052x.png
Whys that? It should conditionally render each one. Let's see the expression
yes is this correct?
Attachment
CleanShot_2025-03-07_at_05.17.232x.png
I tried this version, it has another issue
Attachment
CleanShot_2025-03-07_at_05.36.052x.png
Ah that's different than what I suggested.

My suggestion is to make each line conditional
Oh sorry didnt see two messages
Yeah that first one seems good. The preivous project link doesnt work anymore but if you share a new one I can take a look
do you have a working syntax maybe I can try to implement?
I tried what I suggested on just one filter and it worked. maybe something is wrong when there are multiple
It's probably pretty easy to see whats wrong by going to the computed expression (ie the url field) and seeing what's there. With my suggestion it should only show the filters that have values
Each filter needs to end in a comma. But here's the kicker... I don't think the last one can and that's going to F it it up. Let me verify
yes I tried this, but then it's 400
Yep trailing comma is bad
Attachment
Screenshot_2025-03-06_at_4.03.45_PM.png
hi @John Siciliano I think, wouldn't be better to have all possible scenario filters updated on this?
https://marketplace-baserow.wstd.io/directory?search=

multiple choice, boolean, etc anything that's available to do on baserow filters

so then you don't have to debug this, I will just follow your way
  • with a view mode shared as well
View mode is already there but maybe this can happen though I wouldnt want to make it on the main directory because those two filters already mess people up as the field values are hardcoded and causes an error if their base doesnt have one. But maybe a demos page
can you dm a share link so i can mess with yours. read only please
the field value that are hardcoded I think you can add comments // or adding a guide on the read me should be good though "(with image) so it's catchy"

  • this typical "how to" is good to avoid repeatable questions I think
https://finsweet.com/attributes/cms-filter

sent a dm @John Siciliano
Ugly solution incoming....

Plain Text
`https://api.baserow.io/api/database/rows/table/${baserowTableId}/?user_field_names=${baserowUserFieldNames}&size=${baserowItemsPerPage}&order_by=${baserowOrderBy}${system.search.page ? `&page=${system.search.page}` : ''}

&filters={"filter_type":"OR","filters":[

${system.search.editorChoice ? `{"type":"boolean","field":3620275,"value":"1"}` : `{"type":"not_empty","field":3609849,"value":""}`},
${system.search.coding ? `{"type":"multiple_select_has","field":3623471,"value":"2867330"}` : `{"type":"not_empty","field":3609849,"value":""}`},
${system.search.socialMedia ? `{"type":"multiple_select_has","field":3623471,"value":"2867331"}` : `{"type":"not_empty","field":3609849,"value":""}`},
${system.search.advertising ? `{"type":"multiple_select_has","field":3623471,"value":"2867332"}` : `{"type":"not_empty","field":3609849,"value":""}`},
${system.search.marketResearch ? `{"type":"multiple_select_has","field":3623471,"value":"2867333"}` : `{"type":"not_empty","field":3609849,"value":""}`},
${system.search.content ? `{"type":"multiple_select_has","field":3623471,"value":"2867334"}` : `{"type":"not_empty","field":3609849,"value":""}`},
${system.search.seo ? `{"type":"multiple_select_has","field":3623471,"value":"2867335"}` : `{"type":"not_empty","field":3609849,"value":""}`}


],"groups":[]}

${system.search.search ? `&search=${system.search.search}` : ''}`


So there are two dilemmas
  1. Every filter item except the last must have a trailing comma. Because filters are dynamic, its nearly impossible to add logic to figure out which one is the last and to exclude the comma
  2. For certain baserow fields like multiselect, passing "undefined" I guess searches literally for "undefined".
Solution: conditionally render the proper filter if the user filtered by that otherwise fallback to some filter that will always return true, like title is not empty.
The syntax is roughly

Plain Text
${system.search.input ? `<ACTUAL FILTER>` : `<FALLBACK FILTER THAT ALWAYS RETURNS TRUE>`},
so I tried this one the filter doesn't register here

https://digital-marketing-toolkit.wstd.io/
so the only filter that works properly is this one, so far, it's just whenever checkbox it's not selected the data won't show up

can we do this instead?


if the url is just https://url.wstd.io/?search= or https://url.wstd.io/
disable these line completely
if there's "yes" then enable these line?
https://url.wstd.io/?search=&editorChoice=yes


how do we write this type of logic in the expression?
Attachment
CleanShot_2025-03-07_at_09.47.252x.png
oh wait I might found it @John Siciliano
but it's not that pretty I think cursor complicate this a bit

preview https://cln.sh/HwmVg6nk


let me know if you have a better writing
Attachment
CleanShot_2025-03-07_at_10.08.112x.png
No this can't be done
I'm confused, the solution I presented should have worked. What was wrong?
Ah change "OR" to "AND" and it should work
the multiple choice doesn't work sometimes.
the editor choice is a single select, it works
https://cln.sh/VZC0vkYf
I have 5 data here you see it on below.
it only show 4 on the filter. once you click the checkbox it's now only showing 3. 🫤

I don't know 😕 It can only read data for now I guess.
It only shows 4 because the fallback filter is "title is not empty".

looking at multiple choice..
Looking at "coding" can you verify this is the proper field ID and value ID?

Plain Text
{"type":"multiple_select_has","field":3623471,"value":"2867330"},
Is this the correct data for the filters?
Attachment
Screenshot_2025-03-07_at_9.11.34_AM.png
If so, I suggest removing the JS that auto submits. Not sure why we are still debugging with that on at this point.

My understanding of the filters right now is that sometimes it works sometimes it doesnt. It's not that baserow is producing inconsistent results rather the calls that are getting made are inconsistent
if there is a clean repro without the rest on the page, I can look at the client side js what's causing it
hi @John Siciliano I removed all the script here maybe it caused the error
https://p-5af57ff9-b38e-469a-9559-ab668f5ad7d0.apps.webstudio.is/?authToken=c83fc076-e693-4138-bdee-e447765031ad&mode=preview
@Oleg Isonen also just make this now the only baserow here to debug
link preview https://digital-marketing-toolkit-5hkum.wstd.io/?search=
Seems like the filters are now applying correctly and the remaining issue is the refiring of other scripts upon filteirng causing the animation restart?
so I think adding a set timout will do it @John Siciliano for the mirror click https://digital-marketing-toolkit.wstd.io/
yes only the animation restart now @John Siciliano


but what if we want an or filter?
Could this mean that it’s possible to build a predictive search?
for scripts i just remembered the DOMContentLoaded is called each time time the url changes so that could be why scripts refire. I havnet looked into your scripts though
"or" filter will work fine.

The logic was flawed/expectation wasn right.

You click "coding" and "editors choice" and platforms matching either of those but not both will show up. So it made it seems like the filter wasnt working as no chnages happened
okay this should be good for now @John Siciliano thank you
Add a reply
Sign up and join the conversation on Discord