Filtering with selection tags while maintaining dataset filter

Ask the community
,
1

Hello,

I have a page on my website using Velo code to connect to a selection tag. When a tag is clicked, the data is filtered, only showing the people that work at the specific selection tag.

I also have a dataset filter to only show people who have a boolean “true” in one of the columns. However, when I click the selection tag, it no longer uses the dataset filter and displays people I don’t want it to.

Here’s the code I have so far for selection tags:

import wixData from ‘wix-data’ ;

const databaseName = ‘Team’ ;
const databaseField = ‘locations’ ;

$w . onReady ( function () {

$w ( '#selectionTags1' ). onChange (( event ) => { 
    **const**  selectedTag  =  $w ( '#selectionTags1' ). value ; 
    addItemstoRepeater ( selectedTag ); 
})

});

function addItemstoRepeater ( selectedOption = ) {

**let**  dataQuery  =  wixData . query ( databaseName ); 

**if**  ( selectedOption . length  >  0 ) { 
    dataQuery  =  dataQuery . hasSome ( databaseField ,  selectedOption ); 
} 

dataQuery 
    . find () 
    . then ( results  => { 
        **const**  filtereditemsReady  =  results . items ; 
        $w ( '#repeater1' ). data  =  filtereditemsReady ; 

    })

}

I want to add a line in there somewhere to say “after filtering with the selection selection tag, apply column filter in dataset,” but I don’t know where to begin.

The column name is visibleOnProvidersPage. The value needs to be true for them to be displayed.

The content database name is Team.

2

Either work with a dataset or with direct queries, but don’t mix the together.
If you prefer working with datasets, use dataset,setFilter instead of your queries.
https://www.wix.com/velo/reference/wix-dataset/dataset/setfilter

and always filter for all parameters (it doesn’t “remember” the previous filter)

3

Hi, I am having the same issue as you. Did you manage to find a solution?
I have set a dataset filter to the page so it only shows relevant items. Selection tabs narrow down the items as they should, but upon deselecting the tags, I see all the unfiltered items which weren’t originally on the page

4

Do you mind elaborating on this further please?
The selection tab works fine with my dataset filter, by as soon as I want to remove the selection tag field it reverts back to seeing all data rather than the filtered dataset. I have seen your link but am confused how to embed and ‘filter for all parameters’ like you mentioned

5 
$w('#selectionTags').onChange(({target}) => {
let filter = wixData.filter().eq('isActive', true);//this is an example. If you don't have any initial filter, remove the .eq method.
const {value} = target;
if(values.length){
filter = filter.hasSome('fieldKey', value);
}
$w('#dataset').setFilter(filter);
})
6

Not really… hoping for some more assistance on this.

7

I tried this code out with my variables and it doesn’t appear to be working. I assume there’s something missing?

8

There was an extra parenthesis. Fixed. Check if it works for you.
If not - post your code.

9

Ah, yes, I already removed the extra parenthesis. This is my code that doesn’t do anything.

In your original code, selectedValues threw an error, so I made it the same variable as selectedTag.

I want the initial filter to show only providers that are marked active from the visibleOnProvidersPage column in the dataset.

Then, I want to filter the rest of the providers based on which selection tags are clicked. If none are clicked, then show all providers. When a selection tag is clicked, I want the initial filter of only showing active providers to still be applied first and always.

import wixData from ‘wix-data’ ;

const databaseField = ‘locations’ ;

$w . onReady ( function () {

$w ( '#selectionTags1' ). onChange (({ target }) => { 
**let**  filter  =  wixData . filter (). eq ( 'visibleOnProvidersPage' ,  **true** ); 
**const**  { selectedTag } =  target ; 
**if** ( selectedTag . length ){ 
filter  =  filter . hasSome ( databaseField ,  selectedTag );

}
$w ( ‘#dataset1’ ). setFilter ( filter );
})

});

10

I changed the code a little bit (I wrote it too quickly without a second read, sorry for that).
Please stick to the variable name as it is a destructuring assignment of a given object.
i.e.
const {value} = target;
is equivalent to const value = target.value;

11

Yes, success, thank you!

Do you know if this code preserves sorting too? Like, will it apply my A-Z sort after the filter too, or is another line required?

Edit: Added the filter line, nevermind!

12

I believe it preserves the previous sorting, but you should test and see.

13

Hello,

I am not very good as using Velo, although I am using some codes from time to time. I am trying to use your code for my page, without success.
I don’t understand the code, hence I dont understand how to adapt it to my page.
I want that, when no tags are selected, the filters in my dataset are active again.

The code on my page is the following. How should I add your code to that ?

import wixData from 'wix-data';

$w.onReady(function () {


//ARTWORK TAG FILTER

$w('#selectionTags1').onChange(() => {
const selectedTag = $w('#selectionTags1').value;
let filter = wixData.filter();
if (selectedTag.length > 0) {
filter = filter.hasSome("artworkTag", selectedTag);
}
$w('#ArtistsArtworks').setFilter(filter);
})
});

Thank you