If a toggle is turned on, show all items related to that toggle.
If a toggle is turned off, do not show items related to that toggle.
I tried using setFilter but as you can see in my code below it will only show the items of “type: Lager” and it’s not the behavior that I want.
if($w("#lagerToggle").checked) {
$w("#shopDataset").setFilter(wixData.filter()
.eq("type", "Lager"));
} else {
// how do i show all items except lager
}
What I am trying to achieve is something like this:
Do I have to use query? If so could someone provide me an example on how to do this in WiX?
export function switch1_change(event) {
// This function was added from the Properties & Events panel. To learn more, visit Velo: Working with the Properties & Events Panel | Help Center | Wix.com
// Add your code for this event here: if ($w( “#switch1” ).checked) {
$w( “#shopDataset” ).setFilter(wixData.filter()
.eq( “type” , “Lager” ));
} else {
$w( “#shopDataset” ).setFilter(wixData.filter()); // To Reset the Filter
It’s written in my post. I want to create a filter using multiple checkbox/toggle but I don’t know exactly how. I provided the image as an example of what I want to do. Right now the only thing I can do is to filter a specific selection, like what my code is doing. That’s also why I’m asking if I should use a query here or not, of which I also don’t know how to do in WiX.
Yes.
We achieve this using Velo .
Make Design First and Add One Button (Button Name = “Apply Filter”) at bottom of this Design what you mentioned above.
Once User Clicked On That Button We can gather all data together and Make Query/SetFilter
@Er.Muthu K
The post-opener gave enough information to understand the problem.
If you take a careful look onto all his posts, you should recognize, that the post-opener is looking for a —> CheckboxGroup or even multiple combinations of CheckBox-Groups.
@draco_997
What you are trying to achieve is not one of the easiest steps in Velo-Coding.
Then you will see 2x Check-Box-Groups appearing above the table…
This little code-snipet could be useful for you…
CBoxes[0] = "sprache"
CboxValues[0] = ["sprache1", "sprache2", "sprache3", "sprache4"] //...and so on.....
$w.onReady(function() {
//Check-Boxes -------------------------------------------------------------
$w('#myCheckboxGroup').onChange((event)=>{
CboxValues[0] = $w('#myCheckboxGroup').value
console.log(CboxValues[0])
})
//Filter-C-Boxes----------------------- [loop trough all C-Box-Values of a C-Box] --------
for (let a=0; a < CboxValues.length; a++) {
query = query.eq(CBoxes[0], CboxValues[0][a])
}
console.log(query)
query.find()
.then(res => {console.log(res)
itemDATA = res.items
console.log("Item-Data: ", itemDATA)
})
})
Of course you will have to modify the code to your own needs to be able to implement it into your own project.
More information about all this interactive-example & it’s features, you will find here… https://www.media-junkie.com/databases
…when you follow all the given posts, related to this filtering-tool.
@russian-dima Thanks for this. Like what you said it’s not one of the easiest, I’ve been searching for hours and still can’t find a proper working answer.
Right now I’m trying to hard code it with if conditions, it doesn’t fully work so I’m still tinkering with it. I’ll try your suggestion with the for loop and see if it works for me.
