Best practices to keep info

  • Goal: I have multiple pages in the app; and switching between them reset the widgets inside of them. I want multiselect to keep the selected items, for example.

  • Steps: One of the ways to achieve that I could think of is to use URL parameters. But somehow, 'Default value' in multiselect filled with URL parameters doesn't work the way I expected it to (does nothing).

What could be the solution of that problem if I don't want to move multiselect into the global scope?

Hi @pavelgur,

How are users switching between app pages?

Let me do some testing and see if this is a multiselect specific bug.

Are you able to move variables between pages but the multiselect isn't able to populate the selected values on page load?

Just about any user event such as a button click with the Action set to "Go to Page" should allow for configuration of query params, hash params or other variables that you can pass between pages of an app. As shown in the bottom image of our docs here. Which should be able to pass directly into the multiselect to have these become selected once they render. Maybe there are race conditions and the multiselect still needs to load to the page before the selection can be applied :thinking:

Unfortunately the trade off of multipage apps being optimized for the current page is that the state of other pages is not maintained. There are some customizations such as for tables to maintain a selected row or have a default selection on page load.

Hopefully the docs can help with the URL parameters as that is odd that you are reporting that they are not doing anything. I would need to see some screen shots to better help troubleshoot as to how it could be changes to follow the example in the docs to work as expected.

Hi @pavelgur,

Just wanted to circle back and see if any of my suggestions were helpful!

Some components can be set on page load and query scripts can run on page load, combining that functionality with url params and hash params as well as database storage is likely the best combo currently for holding stateful data in the frontend of an application.

Hi,
so did you manage to reproduce the issue? 'Default value' in multiselect cannot be populated via query/hash URL parameters.

Hi @pavelgur,

Apologies for the late response i have been out of office this past month :sweat_smile:

I can confirm that for multiselect components I was unable to set the 'default value' to be URL or hash params.

I believe this is likely due to the component wanting the 'default value' to be an array. There might be a way to coerce several options that are all stored as params into an array as a variable and then into the 'default value' but I have a another idea for a better approach.

Let me know if it would be possible to have you multiselect be a global component. you could add your multiselect to one of the global frames such as a side bar and this will ensure the state of the selected options is maintained through page changes.

The other option I was thinking would be to use a global variable as the 'default value' but it looks like I found a bug where this does not allow for an option from a data source to be selected. So I will be filing a bug ticket for that.

Let me chat with our UI team to see if they have any solutions for your use case. Just to clarify, an example of what you are looking to do is have a multiselect display options 'a', 'b' and 'c'. If a user on page 1 selects 'b' and 'c' and then moved to page 2 that then the multiselect should still display all three options and that 'b' and 'c' are still selected. Is that correct?

Let me know if it would be possible to have you multiselect be a global component.

I had to use global component. Mitigating the bug via changing the UI is not a long term solution though.

Just to clarify, an example of what you are looking to do is have a multiselect display options 'a', 'b' and 'c'. If a user on page 1 selects 'b' and 'c' and then moved to page 2 that then the multiselect should still display all three options and that 'b' and 'c' are still selected. Is that correct?

Short answer: yes.
In my case, the original problem is that page content gets reset when you leave the page and come back. So I need to restore the original state of the page. And the only way to do that (I'm aware of) is to store that info in URL/hash parameters. So I want the multiselect to be able to load selection from URL params as a default value.

Ah ok, it is not ideal that global components need to live within a parent component that is fairly large and will disrupt the UI.

One idea would be to keep the global component set to 'Hidden' and then pass along the persisted stateful date from that component out to the page specific component. I have seen this done with a hidden modal in some cases.

The other option would be to use a global variable.

Every time a user clicks on the multiselect the global variable can be reset to the multiselect's .value and every time you navigate out of the page the global var remains unchanged.

Then when the page is changed back the multiselect's .value is set to the global var :thinking:

URL/hash params work great for single values, but since a multiselect's .value is made up of an array, things get more tricky.

Makes sense, though I actually would like to allow users share the current selection for convenience, so URL parameters is my ideal choice.

Ok, to pass URL params into a multiselect, you will need some custom JS scripts to collect each selected value from the corresponding URL param and then ensure that that value or values are inside of an array to then be passed into the multiselect.

Check out my example below for how I was able to accomplish that :+1:


In my example I am manually setting the URL hash params, if you want to dynamically set the Hash Params you would need to decide the best way to do that based on your set up.

I found the method utils.setUrlParameters([{key:"selected", value: multiselect1.value}]) to potentially be an option.

Also I found this page on our docs on persisting URL params across page changes, thought it may be helpful as well.