How to use change dashboard data source without page reload?

The scenario: per the title, I have some custom controls on my dashboard pages that add querystring params to the URL and refresh the page to get all the widgets to recognize them.  Essentially identical to this: https://community.cireson.com/service-manager-portal/post/duplicate-dashboards-for-multiple-support-groups-3s5HSKmZj9fqCXW

This works well, except that it is a fairly terrible user experience, especially on pages that take a long time to load.

It is entirely possible to change the params without reloading the page (window.history.pushState(null,null,'?myParam=NewValue');).  However, the datasource for the grids/charts was created before this change and is not updated by it.

I can see where the url lives inside of the widgets' datasource (myWidget.dataSource.transport.read.options.url, but can be changed via setDataSource IIRC).  In this scenario, it will look something like "https://mySite/platform/api/endpoint?$filter=(MyProperty eq)" which is not valid (MyProperty equals....what, exactly?).  I am using a {{variable}} there.

The Question: How can I rewrite this URL to contain the correct url WITH the property value from the page's URL?  You might think that reloading the widget(s) works, but it actually makes things worse--it knocks out all the changes to the window's URL (for......some reason...) and you end up with the same malformed URL in your data source.

What is a good way to approach this?
2 replies