One Search field for many lists

💬 App Building
1

Hello guys,

I have five different data lists that are filtered by a status field.
I would like to be able to search in all five lists at the same time using a search field. Is this possible?

image
image1275×543 56.3 KB

Thanks in advance.

2

Hey @Diamond -- is your search supposed to be looking at a specific data point for the list items or is it more of a fuzzy match for any data point in each item?

If it is the first, you could add a filter on the data source for each list with something like

{{listDataSouce.filter(item => item.searchProperty.includes(yourSearchBox.value))}}
1 Like
3

Hey @pyrrho, thanks a lot for your reply.
I actually wanted a fuzzy match, is that possible too?

4

I think it is, in a couple of ways.

  1. The table component has built in fuzzy-search functionality so you could tinker around with a table component that holds all of your overall data before being split into their respective status fields and connect the search input to this table. Then, you could use a JS transformer to get the displayed data from the table table.getDisplayedData() to populate the list components.

  2. You can just chain all of the search properties together in a series of OR statements for each list. Basically the same snippet above but matching any of the properties of the items instead of just one:

{{listDataSouce.filter(item => 
item.searchProperty.includes(yourSearchBox.value) ||
item.searchProperty2.includes(yourSearchBox.value) ||
item.searchProperty3.includes(yourSearchBox.value)
...
)}}

There might be a more direct piece of JS code to recreate a fuzzy search to apply to your data as well, but these are the two options that popped into my head as a first pass.

1 Like
5

Hey @Diamond
You can use dynamic js query for searching data from different components like,

const selectedMonth = select7.value; 
const selectedYear = select8.value; 

const monthMapping = {
  January: 1,
  February: 2,
  March: 3,
  April: 4,
  May: 5,
  June: 6,
  July: 7,
  August: 8,
  September: 9,
  October: 10,
  November: 11,
  December: 12
};

const monthNumber = monthMapping[selectedMonth] || null; 

let sqlQuery = `
  SELECT im.*
  FROM invoice_management im
  JOIN employee_management em ON im.employee_id = em.id
  WHERE em.is_deleted = false
`;

if (selectedYear) {
  sqlQuery += ` AND EXTRACT(YEAR FROM im.pay_period_start) = ${selectedYear}`;
}

if (monthNumber) {
  sqlQuery += ` AND EXTRACT(MONTH FROM im.pay_period_start) = ${monthNumber}`;
}

return sqlQuery;

this is for 1 table, you can write here dynamic query and return it like return queryList = [{query1: sqlQuery1 , query2 : sqlQuery2, etc....}]

Then return on their particular query like:
{{dynamicQuery.data[0].query1}}

7 Likes
6

@WidleStudioLLP Thanks a lot for responding.
I will try it and let you know if I have any troubles.

2 Likes
7

@pyrrho thanks a lot for responding.

2 Likes