Hi, can someone help? The idea is to use a repeater to give an options to a dropdown through a collapsible box (so it creates a filter by checkbox). The code itself seems okay but not quite sure,
Idea came from: https://www.wix.com/corvid/forum/community-discussion/solved-filter-dataset-from-group-check-boxes-and-update-a-dropdown-box-with-that-filter
Heres the code that i've used on the page:
import wixData from 'wix-data';
//Exercise filter
export function FilterByDrink() {
let alcohol = [];
let mixer = [];
let garnish = [];
// Get the indexes of all the checkboxes checked in that group
let selectedalcohol = $w("#AlcoholCheckboxGroup").selectedIndices;
let selectedmixer = $w("#MixerCheckboxGroup").selectedIndices;
let selectedgarnish = $w("#GarnishCheckboxGroup").selectedIndices;
let filter = wixData.filter();
// Now, loop through the checked items and add each field to the array and apply filter
if (selectedalcohol.length > 0) {
for (var i = 0; i < selectedalcohol.length; i++) {
alcohol.push($w('#AlcoholCheckboxGroup').options[selectedalcohol[i]].value);
}
}
if (alcohol.length > 0) {
filter = filter.hasSome("AlcoholTags", alcohol);
}
if (selectedmixer.length > 0) {
for (var i2 = 0; i2 < selectedmixer.length; i2++) {
mixer.push($w('#MixerCheckboxGroup').options[selectedmixer[i2]].value);
}
}
if (mixer.length > 0) {
filter = filter.hasSome("MixerTags", mixer);
}
if (selectedgarnish.length > 0) {
for (var i3 = 0; i3 < selectedgarnish.length; i3++) {
garnish.push($w('#GarnishCheckboxGroup').options[selectedgarnish[i3]].value);
}
}
if (garnish.length > 0) {
filter = filter.hasSome("GarnishTags", garnish);
}
$w("#dataset1").setFilter(filter)
.then(() => {
console.log("count after", $w("#dataset1").getTotalCount());
$w("#numberOfdrinksavailable").value = "Number of drinks available" + " " + $w("#dataset1").getTotalCount()
})
.catch((err) => {
console.log(err);
});
}
// Filetr each time you click a check box in a group
export function AlcoholCheckboxGroup_change(event) {
//Add your code for this event here:
FilterByDrink();
}
export function MixerCheckboxGroup_change(event) {
//Add your code for this event here:
FilterByDrink();
}
export function GarnishCheckboxGroup_change(event) {
//Add your code for this event here:
FilterByDrink();
}
export function AlcoholTitleBox_click_1(event) {
//Add your code for this event here:
if ($w('#AlcoholBox').collapsed) {
$w('#AlcoholBox').expand();
} else
$w('#AlcoholBox').collapse();
}
export function MixerTitleBox_click(event) {
//Add your code for this event here:
if ($w('#MixerBox').collapsed) {
$w('#MixerBox').expand();
} else
$w('#MixerBox').collapse();
}
export function GarnishTitleBox_click(event) {
//Add your code for this event here:
if ($w('#GarnishBox').collapsed) {
$w('#GarnishBox').expand();
} else
$w('#GarnishBox').collapse();
}
If someone can help, would be really appreciated.
#checkbox #checkboxfilter #userinput #filter #dropdown #tickbox #
Hi Pav 🖐
I suggest that you create an onChange() event handler for each checkbox and run a function that will check which checkboxs are checked and apply the filter accordingly.
Let's assume that you have 3 checkboxs, you can scale them easily, we'll create a for..loop that will create the onChange() event handler for each checkbox to save time and to make our code shorter and easier to understand.
let numberOfCheckBoxes = 3; for (let i = 1; i <= numberOfCheckBoxes; i++) { $w(`#checkBox${i}`).onChange(async (event) => { await setFilters(); // We'll create this function later }) }
Now each of the checkboxes has its own onChange() event handler, next, we need to create the function that will check the checkboxes values and set the filter.
async function setFilters() { // Check which checkbox is checked and add the checked ones into an array let checkedBoxes = []; for (let i = 0; i < numberOfCheckBoxes; i++) { if ($w(`#checkBox${String(i+1)}`).checked) { let item = { id: #checkBox${String(i+1)}, boxIndex: i } checkedBoxes.push(item); } } // Now set set the filter let totalChecked = checkedBoxes.length; if (totalChecked > 0) { let filter; switch (totalChecked) { case 1: let firstBox = { id: checkedBoxes[0].id, index: checkedBoxes[0].boxIndex } filter = wixData.filter() .eq(`field${firstBox.index}`, true) break; case 2: filter = wixData.filter() .eq(`field${checkedBoxes[0].boxIndex}`, true) .eq(`field${checkedBoxes[1].boxIndex}`, true) break; case 3: filter = wixData.filter() .eq(`field${checkedBoxes[0].boxIndex}`, true) .eq(`field${checkedBoxes[1].boxIndex}`, true) .eq(`field${checkedBoxes[2].boxIndex}`, true) } break; /* You can scale to as much as you want and add as much cases as you want */ } $w('#dataset1').setFilter(filter); } else { // Reset the filter if no checkbox is checked $w('#dataset1').setFilter(wixData.filter()); } }
I know it's a bit too long, but it's the shortest I could made.
Hope you found it useful.
Ahmad