I needed a way to add and remove query strings based on their dynamic parameter names saved in the database. I have not found a way to add/remove query strings using dynamic parameters the Wappler way using the Query Manager .remove() or .set() actions, so I wrote two quick front end formatters that basically mimic what the remove and set functions do and they work great. Thought I'd share here in case anyone else needs this funcationality.
dmx.Formatters('string', {
/*#####################################
### REMOVE QUERY STRING PARAM
#####################################*/
removeQSParam: function (paramToRemove) {
var url = new URL(window.location.href);
var params = new URLSearchParams(url.search);
// Remove a specific parameter
params.delete(paramToRemove);
// Update the URL without reloading
window.history.replaceState({}, document.title, url.pathname + "?" + params.toString());
},
/*#####################################
### APPEND QUERY STRING PARAM
#####################################*/
appendQSParam: function (paramToAppend, valueOfParam) {
var url = new URL(window.location.href);
var params = new URLSearchParams(url.search);
// add a specific parameter
params.append(paramToAppend, valueOfParam);
// Update the URL without reloading
window.history.replaceState({}, document.title, url.pathname + "?" + params.toString());
}
});
To use them simply put them in an action and voila!
//REMOVE PARAM WHEN MODAL HIDES
dmx-on:hide-bs-modal="serverconnct.data.qData.view_param.removeQSParam()"
//ADD PARAM WHEN BUTTON CLICKED
dmx-on:click="serverconnct.data.qData.view_param.appendQSParam('bob')"
Hope this helps someone. It's been very useful for me on this project.
Cheers!
-Twitch