Filtering Database Query with an URL Parameter

If you don’t know how to define an URL parameter on your page, please check this tutorial as you will need this later.

First, we need to create a server action. Open the server connect panel and click the add new button:

We call it product_details:

Then right click GET under Globals menu:

Add variable:

This variable will be used to filter our database query. Let’s call it: productid (NOTE - it needs to be lowercase).

Right click steps:

Open database actions menu:

Add a database connection:

Load your database connection, or create one if you have not defined one yet. Then right click the database connection step:

Open the database actions menu:

And add database query:

Open the query options:

Add your database table:

Then add the database table columns you need:

Open the conditions tab:

And select the column you want to filter your database query by:

Select the equal operator:

And click the dynamic data picker for the filter value:

Select the GET variable we created - productid:

Then click ok:

Save your server action and close the server connect panel as we won’t need it anymore:

In App Structure define your URL parameter using the query manager:

Then add new component:

Open the data menu:

Select Server Connect:

And click the select server action button:

Select your server action:

Under Input parameters, you will see the GET variable which you defined in the server action. Ours is called productid - click the dynamic data picker to assign a dynamic value to it:

Under query select the URL parameter you defined:

Then on your page, double click where you want to show the dynamic data:

Click the dynamic data picker button:

And select the data you need here, from your server action:

That’s it your data will be filtered using the URL parameter’s value and you will see it on the page.


WapplerPrevious   WapplerNext


1 Like

Hi,
Unless there is a mistake in this slide, I’m lost.
Where does this query / filter data binding come from? Shouldn’t we bind to the URL param defined in query1 instead?

Thx for the speedy reply but I quoted a screenshot where you select a query ‘filter’ created out of the blue, yet you instruct otherwise in the page below: create then select ‘id’ variable of ‘query1’ defined in the Query Manager.


then:

I don’t really understand what your issue / question is.
All you need to do is to define a query parameter under App and select it then in the data picker where needed, under query.

I understand how to define the query param (you define the var as ‘id’).
I don’t understand why you then select ‘filter’ in query instead of ‘id’ inside the Query Manager: query1:

You select the query parameter defined under query, as explained here: https://docs.wappler.io/t/define-url-parameters/2913 ! It doesn’t matter how is it called, it’s you who give a name to it.

I don’t suppose there is any way to get an update to this? Nothing looks the same as it does now and it is painful trying to sort out how this works in the new interface.

Well it’s quite the same. The only difference is the icons have changed… the rest is the same.

And yet when I go to the very first step and try to create a server action under what I assume is now called App I don’t get a server action to add even when I search in the search bar. Perhaps someone could at least come up with a cheat sheet that tells us poor newbies things like "what was once called a Server Action is now actually as … you find it be going to … etc.

Server Actions also known as API Actions are created in the Server Connect panel under API.

I will just add that it is no longer required to add the database connection into the action you now create the database under globals this is the docs for that:

So when following the URL tutorial you can miss out the part where you add a database action > connection and continue to the query step where you select the database to use directly

Also a small change was removing the STEPS under EXECUTE you can now just add queries etc directly into EXECUTE just a space saving thing but to avoid confusion

Thanks Sorry_Duh