Breaking my head on this , like many of us have according to the number of community posts on related issues.
Trying to filter a database query with some url parameter values, but can’t get that to work, although I checked all tutorial docs and community posts about this
Found out that the parameters are just empty. The setup:
Query Params are defined in the layout page and added then to the Query Manager:
This routing rule is set via the Routing Manager for the content page.
Content page code: <meta name="ac:route" content="/:country/:language/product/:id/:product_name?">
In Routing Manager:
In the server action with the database query execution in it, the same input variables are created under $_PARAM:
Also tried passing the input parameters from the query manager as a $_Get input to Server Connect, but these values also stay empty:
So for some reason the url parameter values are not passed to the server action side and I can’t find out why and how to solve this. Hope anyone can help, for which I’m very grateful in advance!
Thanks so much for helping me on this, first of all!! Been spending hours on this already…
Yes, except for that the product part in this example is not a parameter: netherlands/nl/product/15
Without URL rewriting the url would look like this: site.com/product?country=US&language=en&product=15
The country & language parameters are moved to the front in our routing rule: site.com/:country/:language/product/:id
Here we go, let’s start with how the url rewriting works.
URL rewriting and accessing the query parameters
I’m going to strip away Wappler’s UI first, so you can clearly see what’s happening.
Create this route: /:country/:language/product/:product_id
How it works: the variable, ex. :country, captures ANY word in it’s place and makes it available as {{query.country}}.
So the :country is basically the key. And the word in it’s place will be the value.
For example: /norway will be: query.country = norway
Note: if you use this directly with a server action, they are available under $_PARAM.
If you’re confused at this point, just keep reading and testing it yourself. It’ll make sense.
After creating this route, go to the page that is linked to it. For me it’s simply called index
Put the query.key in your code. for example this is how it looks like for me:
<!-- Wappler include head-page="layouts/main" fontawesome_5="cdn" bootstrap5="local" is="dmx-app" id="index" appConnect="local" components="{dmxDatePicker:{}}" jquery_slim_35="cdn" moment_2="cdn" -->
<meta name="ac:route" content="/:country/:language/product/:product_id">
<div> This is query.country: {{query.country}}</div>
<div> This is query.language: {{query.language}}</div>
<div> This is query.product_id: {{query.product_id}}</div>
Load the page in the browser. You’ll see it loads the URL without parameters filled in /:country/:language/product/:product_id
Then replace the parameters in the URL, and see what happens:
2023.01.17 13.43 - 5441 - Centipede
Note: I haven’t done ANYTHING except for the steps above.
That means that setting up the query parameters in the UI is actually optional.
Let’s do that now.
Setting up query params in the UI
Go to your layout page connected to this (mine is ‘main’)
Define the query params under app:
2023.01.17 13.48 - 5443 - Baiji
Now the bindings are accessible using the UI. So you don’t need to type query.country but you can simply select it with the usual data binder.
2023.01.17 13.48 - 5444 - Flycatcher
Last step: getting this data to your server action.
In your server connect, under $_GET set up your variables again. Note: you can name them differently now if you want, it doesn’t matter. I like to keep them the same to prevent confusion.
2023.01.17 13.50 - 5446 - Phoenix
Go back to your server connect (client side), refresh, and set the input parameters to use the query params
2023.01.17 13.51 - 5447 - Kid
Save everything, reload the page (make sure there are params in your URL!), open devtools and check the payload of your server action:
You should see the parameters being sent as payload.
Lastly, let’s see if the data is available in your server action:
In the server action create a value my_data that has $_GET selected:
2023.01.17 13.56 - 5449 - Arrowworm
Go back to your browser, refresh the page or replay the XHR:
2023.01.17 13.57 - 5450 - Zigzagsalamander
You can now see the data is returned back. So your query parameters have successfully made a round trip from the browser, to your server, back to your browser
Do you set the routing rule and change the type to Server Connect first and then change it to Page and select the specific content page or do you create both separately? The first method (changing it) worked for me btw.
I guess this did the trick, because I did exactly the same as in your tutorial before but then still the Get variables were empty in server connect. What do you think?
Secondly, this is what I was trying to achieve as well, but it still doesn’t work:
So I have to set and use the Get inputs unfortunately. Do you have any idea why the $_PARAM values are still empty?
I haven’t changed the route type.
What I meant to say with that screenshot, is that IF you put it to server connect you can access the parameters in your Server Connect under $_PARAM.
So actually this is not relevant to your issue and I probably should’ve left it out to prevent confusion.
I simply used the automatically generated route and added the params in the ‘path’.
I think you’re expecting to use $_PARAM while not passing the query variables to the server connect.
So the difference is, that in this case the route is loading a server connect.
In that case, the query params are available under $_PARAM.
But most of the time, we are loading pages first and put the server connect as a component on that page. Then we need to send the parameters to that server connect using query.variable as $_GET input variables.
Thanks, I did not interpret that correctly indeed, but it all makes sense now! Nevertheless thanks for working out the example for passing parameters to server connect directly, which makes totally clear that the $_PARAMS input is only available in such cases.
Appears now that when I tried passing the variables to server connect as $_GET query inputs, I used the Query Manager’s values for that which didn’t work. I had a similar problem once before.
Thanks a million again for your time and explanation, very much appreciated!!
You’re welcome, I feel your pain. I’ve invested a lot of time figuring this all out in the past. So I believe you when you say
For the query manager: I’ve barely used it. Only when I want to change the query params on the page. In my example, you don’t need it. But you might need it for your whole use case though
Still having trouble with this Hoping anybody can be of help here!!
I have a single product details page on which I want to use server connect data to server side render the dynamic page contents and met data as per this tutorial by @Teodor.
The server action url called from the product page is http://localhost:3000/api/Shop/GetProduct?country=US&language=en&product_id=11, however the database query returns no results when filtered on one of the set $_PARAMS since those are all empty for some reason.
So I tried creating a routing for the server connect action:
Full routing path is /api/Shop/GetProduct/:country/:language/:product_id
Still no luck and I can’t figure out what’s wrong and why the $_PARAMs stay empty in the server connect action.
If I call the same server action from the page by adding a server connect element to it and using $_GET variables everything works well, except it’s impossible to use the returned data in server side data to populate meta data, like here:
So that’s the reason I want to make the $_PARAMs work
Any help would be very much appreciated, thanks in advance!
Okay, found out that this DOES work properly now after restarting Wappler
Just one question left:
In order to bind data to other page components (like product name, description, price etc) on the product details page itself, is it necessary to add a server connect component to the page to run the same api call again to get these data available in the data binding picker or is there a way to use the output of this call as well?
These outputs are not available in the data picker, so in other words, should another GetProducts server connect component be added to the page that calls the same data with $_GET variables set? If so, no problem, but not having to call the same api twice on page load would be better of course.
For an image src or repeat src expression for example, this is not possible, is it?
Suppose it’s best to use server side rendering only for page meta data that can’t be rendered client side and use another server connect component to render data for use in App Connect data bindings for everything else, including repeats and image sources, like @George described here, is that right?
Thanks @Apple, but that wasn’t the cause. I set the value names after I made the screenshot and then it still didn’t work until I restarted Wappler, sorry for the confusion. I guess the routing rules applied properly after restarting. Thanks for your reply though!
, like many of us have according to the number of community posts on related issues.
Hoping anybody can be of help here!!
