In this tutorial, we'll create multi-select filter by year for list of cars.

What do we have

A data list component that lists cars and a select component that lists years.

Our select component setup:

And a simple list setup with sql query as data source:

So, here's how it looks:

Select component and the list component are not connected. Let's connect them. We'll connect them using page variable.

Page variable selectedYears

When select component's value changes, we'll create page variable. The trick here is transformation. We'll transform select value to comma separated string. Why? Because we'll use it in sql query.

return value.join(',').replace(/\s/g, '')

Select's value is array. Above JS code transforms it to comma separated string:

[2018,2015,2014] >>>>> "2018,2015,2014"

Now, let's use our page variable selectedYears in sql query of car list. We can use page variable inside sql query with syntax ${}.

select * from x_car
where '${selectedYears}'::text=''
or position(year in'${selectedYears}') >0

We're selecting every car if selectedYears is empty. And if it's not empty then we're using position method to check if a car's year is selected.

That's it.

Did this answer your question?