How do I create several drop down menus to search several related collections?

Ask the community
,
1

I have a collection of resources. My goal is to have a Search page where the user can select from four lists of different types of attributes that each resource has. I am attempting to create drop down menus for each of these four different types of attributes. The user can select on item from each of the four drop down menus which will have a list of the specific types of attributes attributes.When the user clicks the Search button, the results of the search will be displayed on a Results page.

Each resource is a row in my main collection. I have four different fields that contain the different types of attributes for the resource. These are reference fields. There is a collection (description collection) for each of the four attribute with a field for the ID number for the different specific types of that attribute and a field which describes the specific type of attribute. There are four more collections with an ID field for the resource Id from the main collection and a field for the specific attribute from the description collection for that attribute. This last field is a reference field to the description collection.

So I should have all the data properly linked up so that when the wixData.query is run on the main collection, only the items which match the selections of the user for the four types of the attributes will be presented as the results. Unfortunately I cannot find any code to take the put the values from the selections made in the drop down menus into variables which can be used in the query. I can find lots of examples for adding data from drop down menus to a collection, and examples of drop down menus which go to other features, etc on the website, but none which will present the values from the drop down menus in a manner where I can use them in the query.

Thanks for any assistance you can provide that will enable me to complete this project. I’ve attached a copy of my collection layout.

2

It can be done using wixData API and Javascript. Follow these steps.

  1. Connect all the dropdown menus with the database using wixData.query using this format
    {“label”:“name of the resource”,“value”:“_id of the resource”}
  2. When user select items from menus, save the values(_ids) of the selected values in the array. Run the WixData.query(“colletionName”).hasSome(“fieldName”,array)

With this format, you can achieve that you want.

3

Thanks Rashid,

I’m able to do step 1. It’s step 2 that I’m having a problem with. When I try to create the array, I get the error message that the element is not located on my page. When I use the name of the drop down menu for the array, I get the error message that “option” is not allowed for that type of element.

Would you have some sample code for this step?

Thanks,

Stan

4

Take a look onto this example here…
https://www.media-junkie.com/pflegeservice

Load the → Main-DB and do some filtering-testings.

5

@stankehl //Create an array:
let array = {};

//add value to an array…
$w(“#dropdown1ID”).onChange(()=>{
array . dropdown1 = $w(“#dropdown1ID”).value ;
})
$w(“#dropdown2ID”).onChange(()=>{
array . dropdown2 = $w(“#dropdown2ID”).value ;
})
$w(“#dropdown3ID”).onChange(()=>{
array . dropdown3 = $w(“#dropdown3ID”).value ;
})
$w(“#dropdown4ID”).onChange(()=>{
array . dropdown4 = $w(“#dropdown4ID”).value ;
})

//create another array…
let array2 = [];
array2.push(array . dropdown1);
array2.push(array . dropdown2);
array2.push(array . dropdown3);
array2.push(array . dropdown4);

then use array2 in query
wixData.query(“databaseName2”).include(“reference”).hasSome(“array2”).find();

This will give you result. You can make it more efficient using advanced code.

6

Thanks Rashid,

This looks perfect. I will give it a try.

Stan

7

Good Morning Rashid,

As I worked with this I found I need a little more help.

“wixData . query ( “Items” ). include ( “reference” ). hasSome ( “array2” ,). find ();” generates an error that .hasSome needs two arguments.

I’m not sure of the purpose of the second array, so I do not know what the second argument for .hasSome should be.

I want to use the results of the query to populate a table with rows from my Collection “Items.” I’m using the following code to create my table:

$w . onReady ( function () {
// Write your JavaScript here

wixData . query ( ‘Items’ )
// .eq(‘TypeID’, ‘11’)
. find ()
. then (( myResults ) => {

// Set up table columns
$w ( “#table1” ). columns = [
{
“id” : “col1” ,
“dataPath” : “name” ,
“label” : “Title” ,
“width” : 400 ,
“visible” : true ,
“type” : “string” ,
},
{
“id” : “col2” ,
“dataPath” : “itemPageText” ,
“label” : “Description” ,
“width” : 400 ,
“visible” : true ,
“type” : “string” ,
},
{
“id” : “col3” ,
“dataPath” : “source1” ,
“label” : “link” ,
“width” : 400 ,
“visible” : true ,
“type” : “URL” ,

}
];

// Display the query results in the table
$w ( “#table1” ). rows = myResults . items ;
})
}

Your help in correcting the second argument where array2 is used in the query, and then getting those results into the table would be great.

As I’ve been working with the table, I’ve found instructions for using Editor-X to use a repeater for rows in a table like I have, I have not found instructions for doing so with Velo. Would you have a suggestion for code for the table so that the number of rows int the table will be the rows returned by the query (no more and no less)?

I would like table to be populated when the user clicks on the search button. I’ve attached a copy of the “draft” of the Search and Results page. The results will show up in the alternating bars in the middle of the page. It needs a little bit of clean up on the formatting.

Thanks again for your help. It is greatly appreciated.

Stan

8

Apologize for my mistake. We both didn’t add the field name in .hasSome snippet. Query will look like.

wixData . query ( “Items” ). include ( “reference” ). hasSome (“reference field key”, array2 ). find ();