Help filtering using a value selected in a dropdown

[DrNinjamonkey]

Hi,

I have a dropdown menu that pulls a list of distinct car makes from a database. I have a table below it with all the database data (names, car years etc) and I want the lower table to only show makes matching the value in the dropdown.

Im getting a bit confused and just finding myself type “make” in every box - whats the best way to do this?

At the moment I have:

In server steps - server connection, query 1 (all data), query 2 (distinct car models).

Global get variables - sort, dir, make (not really sure what im doing here)

In the app - server connection, query manager (added a new variable “make”)

Form - Custom select. Data source = query 2, text field car_make, dynamic attributes query.make (again, not sure about this, am i setting the query.make value to the dropbox value here?)

Table - here I have all the car data coming in but I dont see how to filter the car make column by the value set in the dropdown.

Should my server connect action be doing the filtering or should this be done on the frontend?

Im sure this is simple - thanks in advance for the help

[scott]

Hi @DrNinjamonkey,

I will admit, I have not created a dropdown selection to filter a table in Wappler. What I have done consistently is use a text filter to filter a table.

This might help you with the dropdown selection that you are trying to do. It would need to be modified based on your needs because the original poster was using dropdowns to populate other dropdowns.

Dynamic Dependant Dropdown Menus

In a perfect world Dynamic Dependent Dropdown Menus are really easy, and generally for me quite reliant on the database structure. When I create a site and i know before starting that it might use geographic entities I might have a database structure like this. Continent Table id continent 1 Africa 2 Europe 3 Asia Country Table id country continent foreign key id 1 Algeria 1 2 Angola 1 3 Benin 1 4 Botswana 1 5 Armenia 2 6 Albania 2 7 Andorra 2 8 Austria 2 …

If you want to filter the table based on a text input, you can do that by following the steps here: Filtering Database Query with a Text Input

[zitroware]

Hello @DrNinjamonkey, from the way I understand it, you will need 2 Server Connect queries, one for the dropdown (to get the values for the dropdown), and the other one is for the table.
What should happen is when you select a value in the dropdown, it should run the second Server Connect query using the dropdown value for the input parameters. This would update and show the records in the table upon querying.

[Teodor]

That’s right, you need two separate server actions - one for the dropdown, and another for the data.
Then on the page bind your values in the dropdown from its corresponding server action and use the input value as a filter in the other server action on the page.
It will automatically refresh the data on change.

[DrNinjamonkey]

Reading through that link, this bit is a bit confusing:

Is the Text field what is displayed in the dropdown and the value field is…an output to tell wappler what was selected? In your example the dropdown shows a code AND the product name so it looks like both VALUE and TEXT are being displayed?

Thanks for the help.

[Teodor]

The options are pretty much self explanatory.
Text Field is the text you see in the dropdown option.
Value Field is the value of the option.

Not sure how familiar you are with how a selectt/dropdown functions, but:

<select>
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
  <option value="4">Option 4</option>
</select>

value is what’s being used as a value which you pass, not the text you see.
In many cases the value is some unique ID of the record you are showing there.

the value field is…an output to tell wappler what was selected

(That’s not something Wappler related, but that is how the standard HTML select element works)

[DrNinjamonkey]

Got you, so if i want to display the same value as the value I am passing, both are the same. That makes sense. Thanks!

I am still not able to filter my table with the output from the dropdown - here is mysetup:

Server Actions - I added a GET variable (make) and the DB connection. I then added 2 queries, one for distinct car makes for the dropdown (this works) and one for the full table.

The second query looks like this:

This is the app setup:

Server connect 1 is just the normal DB connection.
Server connect 2 has this as an input:

The form dropdown works and the data is coming through correctly. The Text and Value is set to be car_make.

Feels like im close but i am obviously doing something wrong still. Please let me know if you can spot it. Thanks!

[DrNinjamonkey]

Should i be ussing a session variable instead of GET?

[Teodor]

You need two separate server actions, don’t put the dropdown query and the dynamic data query in the same server action.
And no, you need exactly GET variable set as a filter in the query, returning your data.

[DrNinjamonkey]

Ok so action 1, query 1 (the list of car makes) then action 2 with a new query and add the GET variable?

[Teodor]

Yes exactly.

[DrNinjamonkey]

It works!

For anyone searching for this in the future:

2 completely separate server actions (this confused me for a while but I was adding 2 steps in the same action):

First server action is just a DB connection and your query.
Second is DB connection, add the GET variable and then your query. In your query add a condition, in my case:

Now in your app add one server connect and use this for the first server action and connect this to your dropdown.

Add your second server connect and link to your second server action, under the input parameters link your GET variable to the output of your dropdown. Mine looks like: