Hash parameters from modules on other pages appear in the URL in a multipage app

💬 App Building
,
1

  1. My goal:
    To have each page in a multipage app manage its own hash parameters independently — so that only modules on the current page can modify the URL hash.

  2. Issue:
    When multiple modules (on different pages) modify URL hash parameters, hash values from modules on other pages also appear in the URL.
    If different modules use the same hash parameter names, conflicts occur and parameters overwrite each other.

    Example:

    • On Page 1, I add Module1 which sets hash parameters param1 and param2.

    • On Page 2, I add Module2 which sets hash parameters param1 and param3.
      When I open Page 1, the URL becomes:

    mydomain.com/apps/multipage-example/page1#param1=value&param2=value&param3=value

    Here, param3 should not appear on Page 1.

  3. Additional info:
    Self-hosted

2

Great question, @Illia_Sakharau!

I had to do this recently.

When you set the params, use (url.href.indexOf("#") > 0 ? url.href.slice(0,url.href.indexOf("#")) : url.href) before the params.

I copy the params to a clipboard via a “share” button and do this in page 1:

{{ 
  (url.href.indexOf("#") > 0 ? url.href.slice(0,url.href.indexOf("#")) : url.href) 
  + "#param_1=" + (switch_show_switch.value? "switch_true":"switch_false") 
  + "&param_2=" + editableTextArea1.value 
  + "&param_3=" + "this is fun!"
  }}

And this in page 2:

{{ 
  (url.href.indexOf("#") > 0 ? url.href.slice(0,url.href.indexOf("#")) : url.href) 
  + "#param_1=" + (switch_show_switch2.value? "switch_true":"switch_false") 
  + "&param_2=" + editableTextArea2.value 
  }}

This strips your url down to the bare bones before adding the hash params.

Let me know how it goes!

1 Like
3

Great suggestion @mathfour! Manually manipulating the URL to reset it before the module then sets the params should be a viable work around.

I believe that currently in Retool the URL hash params are not scoped to the page and thus will continue to build on each other unless changed via code.

I can make a feature request for having hash params scoped by page, but in the meantime a potential work around would be to store the hash param data in another place besides the URL such as local storage or a global variable object.

Let me know your needs for data storage and if @mathfour was able to solve this!