Search Query Parameters | Dashboard [Part 2]

As part of the dashboard development, I had to figure out how to serve the same page with dynamic data based on what the user wanted to see.

One such case was an events table. I used an external library called AG Grid, which makes creating grids a lot easier with an external library. It also allows for inserting custom code into each row. Initially, I thought that would allow me to set up each row with a custom Wized button, with a unique ID tied to it that Wized could use to request the database for that event and load it into a dynamic page.

However, Wized detects its Wized attribute in such a way that AG Grid essentially blocks it. This is most likely due to the timing at which the grid is rendered, making it before Wized searches for attribute tags.

Which is where I came to search query parameters, essentially, the idea is that each button will have the same base link:

https://mydashboard.com/event

But at the end, attach a search query like the following

https://mydashboard.com/event?id=390185

Search queries are used on almost all sites, usually to track where a user clicks a link or form control. However, we can use them to tell Wized which event we want to load.

To get the search query into Wized, you can set up a basic Wized event that triggers when the user loads a new page, with the condition that the page path starts with “event”

n.path.startsWith("/event")

Then set a local variable like requestEventID to the URL parameter by using the URLSearchParams functions built into JavaScript:

const urlParams = new URLSearchParams(document.location.search)

return parseInt(urlParams.get("event_id"), 10)

There’s probably a cleaner implementation, but I used a modified example from the MDN web docs: I grabbed the params, then got the specific param called event_id and converted it to a Number.

With that unique ID, you can integrate the variable into the database request, have it request the information, and display it on the site.