Easily Add/Remove/Set Query String Parameters That Have Dynamic Names

Wappler General
1

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

3 Likes
2

Fixed a couple of typos in the code which may have been confusing. Sorry about that.

3

This function will set a param with a value or replace the value if the param exists already

 /*#####################################
  ### SET/REPLACE QUERY STRING PARAM
  #####################################*/
  ezphpzSetQSParam: function (paramToSet, valueOfParam) {
    var url = new URL(window.location.href);
    var params = new URLSearchParams(url.search);

    // Set a specific parameter
    params.set(paramToSet, valueOfParam);

    // update the URL without reloading
    window.history.replaceState({}, document.title, url.pathname + "?" + params.toString());

  }