How would I go about building a query builder element like Airtable has?

[avm]

Learning WeWeb as I have a bubble app that I’m looking to possibly switch over.

With my app, there are 50+ fields users can query against across a relational database. I had built these elements one by one to filter for in Bubble and it’s a pain in the butt to deal with. In bubble I would need to have a plugin built to have this sort of airtable like filtering.

I actually noticed in one of the WeWeb tutorial videos this query builder exists somewhere in the editor (maybe in the API section?).

Wasn’t sure if this was a native element I could build out in the editor for users to interact with but figured I’d ask away. It sounds like if not, then this could be built as a custom component? Just wanting to make sure I am understanding 100%

[chadsmithclt]

Do you own the data that users are querying on (as in, you have access to the DB) where user data is stored?

[avm]

Yes I do

[Alexis]

Hi, its part of the editor UI, you can see it when you bind an array or a collection and click on the filter button showing up under the formula input, you can also see it on the pagination/filter/sort step of your collections.

You couldn’t drag&drop it, its not a weweb element. But yes, you can recreate it in nocode and use your variables to bind it to the filters in the weweb editor.

[kyanaloe]

can you expand a little on how this could be recreated in nocode?

[avm]

@Alexis @kyanaloe is this the right way of thinking about it? Since the nested filter groups are recursive in nature, does this mean we have to build the element to have a fixed number of nested layers? For example, I have two layers of nesting here.

I am assuming we would need to have a variable setup like so when adding the different filters & filtergroups?

Would certainly be easier if we had the element itself from weweb exposed to use

{
    "filters": {
        "filterGroup" : 
        [
            {
                "index": 0,
                "columnID": "A",
                "operator": "=",
                "value": "1",
            },
            {
                "index": 1,
                "nested": true,
                "conjuction": "where",
                "filterGroup" : [
                    {
                        "index": 0,
                        "columnID": "A",
                        "operator": "=",
                        "value": "1",
                    }
                ]
            }
        ],
        "conjuction": "where"
    }
}