Route parameters not working

Wappler General Bugs
#1

I created the following route /vehicles/:vehicleid.
This page is a details page so the expected link is /vehicles/4, which goes to the correct page, but the no data is fetched from the database, the parameter is not recognized.

If I do this though /vehicles/4?vehicleid=4, this works, so the query params method is ok, the route params dont work.

I am using wappler 3.0.0 rc2, and nodejs as the server framework, using layouts and content pages.

Assistance is really needed, I am a newbie, but this has me stumped. Been at it whole day :scream:

Wappler 3.1.0 Released
#2

After selecting the route parameter, try adding the toNumber method to it. That was needed for me when using a route parameter against a data view.

#3

How are you accessing the route parameter in your queries?

#4

Was the route created using the route component on the page or in the routing panel pointing to a server-side page? If you trying to access the param on the server-side, try using $_PARAM instead of $_GET.

#5

Listing screen

image
image1920×1080 204 KB

Details Screen

image
image1920×1080 199 KB

#6

Please see response.

#7

Not seeing a $_PARAMS option, where is this located

#8

The $_PARAM is for server-side, I see in your screenshot that you want to use it client-side. You could use the server-side since you are in a template, code would then look like:

<dmx-serverconnect id="serverconnect1" url="../api/vehicles" dmx-param:vehicleid="<%= _('$_PARAM.vehicleid') %>"></dmx-serverconnect>"

There is no picker in Wappler for this.

A second way is to use the route component, make your route path simple /vehicles and add a route component set the path on it to /:vehicleid.
image
Asume the route component id is route1, the code for your serverconnect would become:

<dmx-serverconnect id="serverconnect1" url="../api/vehicles" dmx-param:vehicleid="route1.params.vehicleid"></dmx-serverconnect>"

The route params are pickable within Wappler.

#9

I put it like this on the details page, removed the entry from the routes. But I received a 404 error instead. Using the first method with the server params works, but :wink: trying not to write code.

The url would be http://localhost:8100/vehicles/1, which gives an error.

Plus I want to learn the various ways Wappler does things :+1:

image
image1920×1080 193 KB

#10

After some investigation we found out there are some issues with the nodejs implementations and routes. It doesn’t work well with the new template engine.

Your initial code was actual good, the problem is that it is probably missing some meta data that is normally generated in the head of the page. Since with the new template engine the layout page is used for multiple pages we can’t use that method. It should however also work by putting the meta tag inside the content page.

You can change back the route to /vehicles/:vehicleid.

Instead of the route component add the following metatag:

<meta name="ac:route" content="/vehicles/:vehicleid">

Now the parameter should be available with query.vehicleid.

1 Like
#11

Great this works :+1:, thank you very much.

#12

Should we still need to do that in the 3.0.1 for nodeJS ?

#13

@patrick what would the meta be if we had mutliple parameters in a url?

e.g. /:param1/:param2_:param3/

Would this be:

<meta name="ac:route" content="/:param1/:param2_:param3"> ?
#14

The content is exactly the path that you entered in the routes panel.

#15

ok thank you, and this will allow to pick up multiple parameters at the same time?

1 Like
#16

The parameters should be defined in the route, if they are then they can be picked

#17
#18
#19

This has been fixed in Wappler 3.1

#20