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

15 days 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

15 days ago

Use page parameters to control things
🔥1
Jonesy

14 days ago

Okay, and use the show/hide to hide an element? Im guess through an “if”statement?
Lucas G

14 days ago

Likely just a simple Equals node
ie., player equals scrap
Lucas G

14 days ago

And for styles you can pass the parameters as attributes into your component or expose them via contexts
Then use style variables
Jonesy

10 days 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

10 days 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

9 days 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

8 days 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

8 days 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

8 days 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

7 days ago

Dude! Thank you very much, im learning new stuff everyday!
Jonesy

7 days 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

7 days 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