Starter App Tabs do not remember user's changes

I used Vaadin Starter App (as suggested) and created a bunch of “menu-items/tabs” on the left hand side as shown in the screenshot in the link below. However, when I click from one menu-item to the other and then back to the original menu-item, all the work that I (as a user) have done on the original menu-item gets lost. In other words, it does not appear to behave the way a user would think of “tabs” in say a Windows application (or the way that I presume Tabsheet works). Is there a way to get the default stater-app’s menu items to behave more like tabhsheet, i.e., it “remembers” the user’s screen etc.? (I think (but I don’t really know) that Vaadin’s starter app’s menu items are resetting the component each time one clicks on it instead of just hiding it etc.) Note: I also tried to play with the “@PreserveOnRefresh” but that didn’t help.

The screenshot of what this looks like can be seen on this SO topic: Vaadin starter app's tabs do not behave like standard "tabs" in an app - Stack Overflow

Menu items are conceptually different than tabs. Menu items are links to views. By default, Flow always gives you a new instance of a view every time you navigate to it. You can add @PreserveOnRefresh to the view to always get the same instance.

The more appropriate component for the type of functionality you are describing may be TabSheet.

Are you sure that “@PreserveOnRefresh” works? I added it “everywhere” I can think of, but it didn’t work. (I am NOT running production mode yet. I’m just running using the suggested .mvnw script.) By “not working”, I mean that it definitely does not remember the changes the user made to the screen (eg plotting graphs; editing text fields etc.) Here’s the code snippet

@PageTitle("MS2 Chromatograms (XICs)")
@Route(value = "xics", layout = MainLayout.class)
public class XICsView extends Main {


public class MainLayout extends AppLayout {

It should work. If not, that’s a bug in the framework. What version of Vaadin are you on?

latest version, I think…details below:

Flow: 24.3.7
Vaadin: 24.3.7
Java: GraalVM Community 21.0.1
OS: amd64 Linux 6.2.0-39-generic
Browser: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:124.0) Gecko/20100101 Firefox/124.0
Live reload: Java active
          (Spring Boot Devtools): Front end active

Since you are navigating between views, @PreserveOnRefresh is not going to help. From the limitations section on the docs:

The component is made to persist only when reloaded in the same browser tab — the client-side property is used to identify the tab — and only if the URL stays the same. Visiting another route or changing a URL parameter discards the component state permanently.

You should either use TabSheet as Marcus suggested, or an appropriate scope (@UIScope is probably what you are looking for).

1 Like