Hey everyone - I hope you’re all well
I’m trying to create a filter where the user can filter by the range of players suitable for boardgames. The current dataset I receive is set like this;
3-8
5-6
2-10
1-99
What I want to be able to filter by is any of the numbers between the 2 ranges so that when a user searches for a number they are included within the filter results.
e.g 2-10 would be applicable for any filters where 2,3,4,5,6,7,8,9,10 are selected.
I hope that’s enough information.
You could use a JavaScript column:
const min = Number(p1.split('-')[0]);
const max = Number(p1.split('-')[1]);
if (p2>=min && p2 <= max) {
return true;
}
1 Like
Does this work for In-App filtering?
Yes, you could add the JavaScript column as an in-app filter.
1 Like
Ah ok cool! I’m struggling to use the data for filtering. I can’t seem to get it to work, Are you able to show me how it would be implemented?
Well, the thing is, I’m not sure that it makes much sense to use it with an in-app filter. And in fact the only way to do that would be to combine the in-app filter with a custom filter. This is because in order to process all rows with the JavaScript column you would first need to capture some user input (a number, for example) in a user specific column, and then apply that to all rows and feed it into the JavaScript column.
Let me ask you a question: how do you envisage the ideal user experience? What would they see, and how would they interact with it?
It was basically so the user can select the number of recommended players for a board game and filter the collection.
The issue is that I only have data stored as player count : 2-7 which doesn’t include 3,4,5,6 within that data.
So you would want them to select a number from a list?
Or just enter a number?
I’m using the in-app filter component for the other filter options so I’d assume it would be using a similar pattern (selecting from list) I’m not sure if it can include text entry in that way.
Alright, try this:
- Use a modified version of the JavaScript that I gave you as follows:
const min = Number(p1.split('-')[0]);
const max = Number(p1.split('-')[1]);
const arr = [];
for (let i = min; i <= max; i++) {
arr.push(i);
}
return arr.join(',');
- You should pass the Player Ranges column as
p1
. The column will return a list of all numbers in the range.
- Add a Split Text column, and target it at the JavaScript column. This will create an array from the Joined List.
- Use the Split Text column as an In-App filter
2 Likes