Selecting certain fields that meet a Criteria

Ask the community
,
1

Hello I am new to Corvid. What i would like to do is have a drop down that filters only a desired fields in a column. For example have a drop down that filters size, weight, and height. I also have another column labeled color. I would only like the drop down to filter a certain color in that “Color” column and present it in a text box/field.

The code below filters through the Size, Weight, and Height column. I would only like to filter the red color in the Colors Column. So the results for only red are shown. I do not want to add a Colors drop down, to select red. I want red already to be selected for the drop downs to start filtering.

import wixData from ‘wix-data’ ;
$w.onReady( function () {
});
export async function button1_click(event) {
$w( ‘#dataset1’ ).setFilter(wixData.filter()
.eq( “size” , $w( ‘#dropdown1’ ).value)
.contains( “weight” , $w( ‘#dropdown2’ ).value)
.contains( “height” , $w( ‘#dropdown3’ ).value)
)…

Any help would be really appreciated! Thank you!

2 
import wixData from 'wix-data';
$w.onReady(function () {
});
export async function button1_click(event) {
$w('#dataset1').setFilter(wixData.filter()
.eq("color", "red")
.eq("size", $w('#dropdown1').value)
.contains("weight", $w('#dropdown2').value)
.contains("height", $w('#dropdown3').value)
)
3

Hello J.D. thank you for replying so soon. Unfortunately when I preview, and click on the filter button. Nothing filters and no results in my text/field show.

If I take away what you have added and filter, it will work except it will show all the colors…

4

@bensmitth so be sure to use the correct field key (is it “color”? “colour”? something else?). and make sure you have “red” as value in your collection.
By the way, no need to have “async” in your onClick() function unless you use “await” later in the code you haven’t posted.

5

The correct field key is “color” and yes “red” is a value in my collection. Deleting the “async” seems to be the problem. Works perfect now. Thank you so much J.D. for your help!

6

J.D. one more question please.

Now that I can do that, I would like to display the results for green in the another text/field.

See code…But when I try this the results for green show in text2 and text5 is there a way to prevent this.

export function button1_click(event, $w) {
import wixData from ‘wix-data’ ;
$w . onReady ( function () {
});
export async function button1_click ( event ) {
$w ( ‘#dataset1’ ). setFilter ( wixData . filter ()
.eq(“color”, “red”)
. eq ( “size” , $w ( ‘#dropdown1’ ). value )
. contains ( “weight” , $w ( ‘#dropdown2’ ). value )
. contains ( “height” , $w ( ‘#dropdown3’ ). value )
)
$w( ‘#text2’ ).expand();

$w . onReady ( function ()
{ })
; export async function button1_click ( event ) {
$w ( ’ #dataset1 ’ ). setFilter ( wixData . filter ()
eq ( “color” , “green” ).
. eq ( “size” , $w ( ’ #dropdown1 ’ ). value )
. contains ( “weight” , $w ( ’ #dropdown2 ’ ). value )
. contains ( “height” , $w ( ’ #dropdown3 ’ ). value )
)
$w( ’ #text5 ’ ).expand();

Thanks again J.D.!!!

7

@bensmitth I don’t understand your code. You have 3 different button1. onClick() Why? what are you trying to do?
And why are they async?
And I don’t see where you close the functions.

8

Hello J.D. sorry for the confusion did not mean to paste it like that. I am new to Corvid so thank you for your patience. All I would like to do is repeat what happened with the color red in a text field but also show the results for green in another text field. So when users select the drop down and click the button the result for red will be text2 and the green result will be in text5. I thought this code would work (see below) but after clicking the button, just shows the green results in text2 and text5.

import wixData from ‘wix-data’ ;

$w.onReady( function () {
});
export function button1_click(event, $w) {
$w( ‘#dataset1’ ).setFilter(wixData.filter()
.eq( “color” , “red” )
.eq( “size” , $w( ‘#dropdown1’ ).value)
.contains("weight " , $w( ‘#dropdown2’ ).value)
.contains( “height” , $w( ‘#dropdown3’ ).value)
)
$w( ‘#text2’ ).expand();

$w( ’ #dataset1 ’ ).setFilter(wixData.filter()
.eq( “color” , “green” )
.eq( “size” , $w( ’ #dropdown1 ’ ).value)
.contains("weight " , $w( ’ #dropdown2 ’ ).value)
.contains( “height” , $w( ’ #dropdown3 ’ ).value)
)
$w( ’ #text5 ’ ).expand();
}

Thanks again,

9

I see,. Add another dataset to the page (dataset2) connect it to the relevant text box, and try:

export function button1_click(event, $w) {
let generalFilter = wixData.filter()
.eq("size", $w('#dropdown1').value)
.contains("weight", $w('#dropdown2').value)
.contains("height", $w('#dropdown3').value);
let redFilter = generalFilter.eq("color", "red");
let greenFilter = generalFilter.eq("color", "green");
Promise.all(
[$w('#dataset1').setFilter(redFilter),
$w('#dataset2').setFilter(greenFilter)]
)
.then(() =>
$w('#text2').expand();
$w('#text5').expand();
})
}
10

How do I add another dataset to the page I am working on?

11

at the left side of the page there’s a vertical editor bar that contains many buttons (such as “menu”, 'background", “+”, “apps” etc…).
Click the database icon >
Select: “Add Content Element” >
Select: “Dataset”.
Then the dataset will be added to the page, click its settings and connect it to the collection.

12

How will this 2nd data set be connected to the drop downs and text fields? Initially they are all connected to the dataset1

13

You’ll need to do it by code.
Please explain what exactly you want to do.

14

exportfunction button1_click(event, $w) {
import wixData from ‘wix-data’ ;
$w . onReady ( function () {
});
export async function button1_click ( event ) {
$w ( ‘#dataset1’ ). setFilter ( wixData . filter ()
.eq(“color”, “red”)
. eq ( “size” , $w ( ‘#dropdown1’ ). value )
. contains ( “weight” , $w ( ‘#dropdown2’ ). value )
. contains ( “height” , $w ( ‘#dropdown3’ ). value )
)
$w( ’ #text 2 ’ ).expand();
}

This code snippet works great. Only shows the red color fields when the drop down is used and filtered, and the result is shown in “text2”

I would just like to repeat this but in “text5” show the green color fields when the same drop down and button is initiated.

981×258 55.5 KB

1379×150 4.62 KB

I hope this helps

15

Sorry, it’s still not clear.
First of all the code you posted contains some errors and I’m not sure how it could run at all.
Second, I’m not sure where and how you assign the data to the textboxes (and what this data are). Please elaborate.

16

My apologies , here is the correct code.

import wixData from ‘wix-data’ ;
$w.onReady( function () {
});
export function button1_click(event, $w) {
$w( ‘#dataset1’ ).setFilter(wixData.filter()
.eq( “color” , “red” )
.eq( “size” , $w( ‘#dropdown1’ ).value)
.contains( “height” , $w( ‘#dropdown2’ ).value)
.contains( “weight” , $w( ‘#dropdown3’ ).value)
)

$w( ‘#text2’ ).expand();
}

Each dropdown and text box is connected to the database dataset ’ #dataset1 ’

The code above will work. Just trying to figure out how to display another colors result in another text field.

export function button1_click ( event, $w ) {
let generalFilter = wixData . filter ()
. eq ( “size” , $w ( ’ #dropdown1 ’ ). value )
. contains ( “weight” , $w ( ’ #dropdown2 ’ ). value )
. contains ( “height” , $w ( ’ #dropdown3 ’ ). value );
let redFilter = generalFilter.eq(“color”, “red”);
let greenFilter = generalFilter.eq(“color”, “green”);
Promise.all(
[$w( ’ #dataset1 ').setFilter(redFilter),
$w( ’ #dataset2 ').setFilter(greenFilter)]
)
.then(() =>
$w ( ‘#text2’ ). expand ();
$w( ’ #text5 ').expand();
})
}

This code you sent me is close to working, just need to know how to connect dataset2 to the drop downs and text boxes as well.

17

When you first helped me by adding . eq ( “color” , “red” ) really did help a lot. I just want to add the color green and for that to appear in the next text field. The results for red will appear in “text2” but i also want to the results for green to appear in “text5”. Sorry for any confusion.