This is a useful trick. When you have setup an dataset on your page maybe you want to change the filter in that dataset depending on different conditions. I made two buttons and four images. The images are all connected to a dataset called pageElements and consists of fields pageName, puffImage1, puffImage2, puffImage3 and puffImage4 which is the four images.
Now I connect the buttons to their onClick method in code below and change the filter in the dataset and the images will then change depending on which button is clicked. This can be used through url filter, user filter, connected to another dataset or in any other way. I think it is awesome to change filters during runtime this way.
Then just take the same code and add that to the second button and you are good to go.
Added the code for quick copy and paste.
import wiXData from 'wix-data';
export function puffButton1_onClick(event) {
// Change puffImage filter on dataset and fade in new images
console.log("change images to hotel");
wixData.query("pageElements").eq("pageName", "hotel").find().then((results) => {
let items = results.items;
let firstItem = items[0];
$w("#puffImage1").src = firstItem.puffImage1;
$w("#puffImage2").src = firstItem.puffImage2;
$w("#puffImage3").src = firstItem.puffImage3;
$w("#puffImage4").src = firstItem.puffImage4;
});
This is cool. URL to your site you’re building?
How would you go about filtering a dataset on click for a table?
If you would like to filter a dataset and reconnect that filtered data onto a table on your page you can do it like the below code.
Your dataset is called: myDataset
Your table is called: myTable
import {wixData} from 'wix-data';
// ...
$w("#myDataset").setFilter( wixData.filter() .eq("fieldToFilterOm", "valueToFilterBy") )
.then( () => {
console.log("Dataset is now filtered");
let items = result.items; // This is now the filtered items
$w("#myTable").rows = items;
} ) .catch( (err) => {
console.log(err);
} );
The above code will check if fieldToFilterOn is equal to valueToFilterBy and then it take the results and get the items in that result and push those items into the rows property on the table named myTable.
This is not tested but it should work 
HI Andreas, I would have messaged you directly but couldn’t figure out how. I am trying to build something specific and thought you could help. I want to build a dynamic one page website that uses forms instead of a traditional menu to navigate. Options selected by the visitor will then custom build the page based off selections. unchecking an option would remove it from the page. in the end, the information remaining would be collected as a sales lead. Think you could help? I tried watching your video on workflows but the quality was very low and I couldn’t really see it.
Hey Andreas,
I have given the above codes a go on my website but haven’t quite perfected them to achieve what I am after.
Like many shopping sites, I want to be able to click the filters which are at the top of my page (img attached) and the gallery will be filtered as I click any of the buttons in any order.
Is there a way to highlight the buttons once clicked so the user can see their selection?
Alternatively, I could use a check box but unsure how to code this also.
So far, I have the following code which works for the “Sort” buttons
import wixData from ‘wix-data’;
$w.onReady( function() {
$w(“#button23”).onClick( (event, $w) => {
$w(“#dataset1”).setSort( wixData.sort()
.descending(“price”) );
} );
$w(“#button22”).onClick( (event, $w) => {
$w(“#dataset1”).setSort( wixData.sort()
.ascending(“price”) );
} );
} );
This page is www.fitunahealth.com/clothing
Any help will be much appreciated! Many thanks.
Helen
