Has anyone worked with the Switch Input for coding repeater sort? Single or multiple switches work together?

Discussion Ask a question
,
1

Would love to see examples and code examples anyone has used in making the Switch Input work on sorting repeaters

2

The Switch works as all the others, hook up the event onChange and check the switch .checked property which will be true or false and the do your sorting in the repeater depending on which switch is enabled.

3

Can if or else be done so that several switches can be used to operate several filters together?

4

This is code is taken from another post on how to use several filter so it’s not my idea but you can use it for switches to.

$w.onReady(() => {
    $w('#dataset1').onReady(() => {
        var filter1 = wixData.filter()
        //var filter2 = wixData.filter().eq('food', '')
        filter1.filterTree.$and[0] = {}
        filter1.filterTree.$and[1] = {}
        filter1.filterTree.$and[2] = {}
        filter1.filterTree.$and[3] = {}
        $w('#gender').onChange(() => {
            let gen = $w('#gender').value;
            if (gen === 'Gender') {
                filter1.filterTree.$and[0] = {}
            } else {
                filter1.filterTree.$and[0] = {
                    'gender': gen
                }
            }
        })
        $w('#food').onChange(() => {
            let food = $w('#food').value;
            if (food === 'Food') {
                filter1.filterTree.$and[1] = {}
            } else {
                filter1.filterTree.$and[1] = {
                    'food': food
                }
            }
        })
        $w('#occupation').onChange(() => {
            let occ = $w('#occupation').value;
            if (occ === 'Occupation') {
                filter1.filterTree.$and[2] = {}
            } else {
                filter1.filterTree.$and[2] = {
                    'occupation': occ
                }
            }
        })
        $w('#color').onChange(() => {
            let col = $w('#color').value;
            if (col === 'Color') {
                filter1.filterTree.$and[3] = {}
            } else {
                filter1.filterTree.$and[3] = {
                    'color': col
                }
            }
            filter1.filterTree.$and[3] = {
                'color': col
            }
        })
        $w('#search').onClick(() => {
            filter();
        })
        $w('#clear').onClick(() => {
            $w('#gender').value = ""
            $w('#food').value = ""
            $w('#occupation').value = ''
            $w('#color').value = ''
            filter1.filterTree.$and[0] = {}
            filter1.filterTree.$and[1] = {}
            filter1.filterTree.$and[2] = {}
            filter1.filterTree.$and[3] = {}
            $w('#dataset1').setFilter();
        })
        function filter() {
            console.log(filter1.filterTree.$and)
            $w('#dataset1').setFilter(filter1)
        }
    })
})
1 Like
5

Thanks Andreas! I assume lather, rinse, repeat for as many as needed. Does each filter/sort create loading slow downs using this scenario in your opinion…or how many filters before you run into speed issues?