dynamic URLS, hiding elements.

Jonesy · 2025-11-23T18:51:52.654+00:00

I have a webpage that has sub category tabs like Overview, Maps, Modes etc. My current url is setup myurl.com/statline/:player/:category. Right now i can get the URL to switch to what i need it to for example. myurl.com/statline/scrap/overview. My question is how can hide elements based off the URL or change styles of elements from the URL like a border or color of something?Thank you in advance

Jonesy
3 months ago
I have a webpage that has sub category tabs like Overview, Maps, Modes etc. My current url is setup myurl.com/statline/:player/:category.

Right now i can get the URL to switch to what i need it to for example. myurl.com/statline/scrap/overview. My question is how can hide elements based off the URL or change styles of elements from the URL like a border or color of something?

Thank you in advance
Lucas G
3 months ago
Use page parameters to control things
🔥1
Jonesy
3 months ago
Okay, and use the show/hide to hide an element? Im guess through an “if”statement?
Lucas G
3 months ago
Likely just a simple Equals node
ie., player equals scrap
Lucas G
3 months ago
And for styles you can pass the parameters as attributes into your component or expose them via contexts
Then use style variables
Jonesy
3 months ago
I was able to get that stuff working thank you. I do have another question. I am using a dropdown with repeating options set dynamically. I have it when i click an option it is supposed to set the mode in the url parameters to that mode. But i cant get that to actually work. Am i missing something
Lucas G
3 months ago
Hard to say with just that bit
Make sure it’s a string
Console log it to see what’s being passed in and what the workflow is receiving/executing
Jonesy
3 months ago
I guess something kinda odd. I opened the page in a firefox browser and works as intended. On chrome it doesnt update the URL at all.

Now in the console Log in Chrome no errors populate. But in firefox i do get a error everytime that i select a mode within the dropdown.
Erik Beuschau
3 months ago
@Jonesy it would be great if you could share a project or preview URL. That would make it easier to figure out what the issue is 🤞
Jonesy
3 months ago
Here is the preview url: https://start-lfgg.toddle.site/statline/player/Scrap/history/HP

as well as the project URL: https://editor.nordcraft.com/projects/lfgg/branches/start/components/statline-player?selection=nodes.kxRxLcUt0bdyWPD27lOr3&rightpanel=style
Erik Beuschau
3 months ago
For the select element to do what you expect, you will need add a change event on the select itself. I've cloned your project to show that here https://editor.nordcraft.com/projects/fuchsia_poggle_the_lesser_decisive_pony/branches/start/components/statline-player?canvas-width=800&canvas-height=2000&selection=nodes.0D8CCA88T7xj9KeVLUNYC.events.change.actions.0.parameters.mode&rightpanel=events
Also, you might want to consider storing the Mode as a query parameter instead of a path parameter as query parameters are more flexible for storing state. Path parameters are usually used to store the location of your page/application. But there are no strict rules of course 🙂
@Erik Beuschau
For the select element to do what you expect, you will need add a change event on the select itself. I've cloned your project to show that here https://editor.nordcraft.com/projects/fuchsia_poggle_the_lesser_decisive_pony/branches/start/components/statline-player?canvas-width=800&canvas-height=2000&selection=nodes.0D8CCA88T7xj9KeVLUNYC.events.change.actions.0.parameters.mode&rightpanel=events
Also, you might want to consider storing the Mode as a query parameter instead of a path parameter as query parameters are more flexible for storing state. Path parameters are usually used to store the location of your page/application. But there are no strict rules of course 🙂
Jonesy
3 months ago
Dude! Thank you very much, im learning new stuff everyday!
Jonesy
3 months ago
I have one more question if you dont mind. I did make the mode a Query parameter. But I want it where if either or both Map or Mode isnt selected with a value, it can still return data through the API. When i select Map then it filters the API with the Map regardless if Mode has a value.

It says that it should still query results even if parameters null, how can i make it null but still have a string for the map value
Erik Beuschau
3 months ago
You could set the query parameter to null to exclude it from your API call (first screenshot). And then in your select element, you could set the query parameter to null when you Select mode value was selected

dynamic URLS, hiding elements.

Jonesy

Lucas G

Jonesy

Lucas G

Lucas G

Jonesy

Lucas G

Jonesy

Erik Beuschau

Jonesy

Erik Beuschau

Jonesy

Jonesy

Erik Beuschau