I am save the Multiselect component value with local storage and want to restore them when the page is reaccessed or reloaded. This is the JS query I'm using for saving the data:
localStorage.setValue('TeamIdMenu', TeamIdMenu.value);
and this is JS query that's ran on page reload:
TeamIdMenu.setValue(localStorage.values && localStorage.values.TeamIdMenu ? localStorage.values.TeamIdMenu : "Select an option");
I am using the exact same code (just replacing the component names) for text inputs on the same JS files (for ex, localStorage.setValue('comp1', comp1.value); for saving and comp1.setValue(localStorage.values && localStorage.values.comp1 ? localStorage.values.comp1 : '');), and it works fine for text inputs.
Does anyone know how to restore the value to Multiselect using Local Storage?
Hey @JohnKimm!
Multiselects are a bit tricky because their empty state is an empty array [] which is still truthy as compared to most other components' empty states which are falsey. The lodash _.isEmpty function is super handy in this case because it will return true for null, undefined but also []. You might try something like
comp1.setValue(_.isEmpty(localStorage.values.comp1) ? [] : localStorage.values.comp1)
Let me know if that works!
I actually figured out how to do it by using a JS transformer and Temporary state.
This is returnTeamId, JS transformer that I use to return the value: return {{localStorage.values.TeamIdMenu ? localStorage.values.TeamIdMenu : [] }}
The image with initial value is Temporary state called TeamIdValue:
I set the default value for the MultiSelect component like this:
So basically I am trying to filter a table using this Multiselect component. With the changes I made, the value is loaded successfully, but it doesn't filter the table as expected. I already have the Event Handlers for changing the table on the MultiSelect like below
I think it's because the Event is set to Change and nothing changes when the value is reloaded. Is there a way to make this happen? The other options on Event tag (Focus, Blur, Input value change) doesn't work.
Found it! I just had to set the default filter on the table. Thank you so much for your help!
1 Like
