Query on Switch component

[I506645]

Hi,

I’ve a query on the Switch component of ui5/webcomponents.

We have a scenario in our app where the default state of the Switch is OFF, and user can switch it ON. Also, there is a details page where user can navigate and come back to the original page. Suppose a user changes the state of the Switch to ON and navigates to the details page and then comes back. In this scenario, the state of the Switch is set back to default (OFF) state. Is it possible to capture and retain the state of the Switch when the user navigates between different pages?

Also, is it possible to get the value of the Switch through the onChange event? Currently, we’re using the react-state to check the state on every onChange event whether its ON or OFF.

Thanks and Best Regards,
Raghav

[Lukas742]

Hi @I506645

Since the Switch is a web-component developed by the UI5 Web Components team, I'm going to forward this question to the ui5-webcomponents repo.

Is it possible to capture and retain the state of the Switch when the user navigates between different pages?

Sure, like every other state it can be persisted. In this case you can use the checked property for this. There are different options depending on persistence level and framework you're using.

• fully persist the state: Save the value of checked in the backend. This way the state will be persisted even across different browsers.
• persist the state in the browser: With the localStorage you're able to keep the state stable inside the browser, even when navigating or closing the web page.
• persist the state while the App is running: Here it depends on what framework you're using. With React you can for example use a React Context or one of many state management libraries like Recoil.

Also, is it possible to get the value of the Switch through the onChange event?

Yup, you can access the current checked state via event.target.checked

[I506645]

Hi @Lukas742

Thanks for the quick response. Using the checked property and setting its value based on the state helps. Thanks for the solution.

Best Regards,
Raghav