How to update UI from route params on navigation

Flow
1

What is the best practice to update the UI with data from a repository when the URL has a route parameter?

I have a colleague that have worked with older versions of Vaadin. He mentioned that the correct way of updating the UI on navigation is to store the route params from setParameter and do the UI update in the afterNavigation function.

However, I can’t find any trace of this in the documentation.
Can I update the UI in directly in the setParameter function?

Im using Vaadin 23.

@Route(value = "my-page", layout = MainLayout.class)
public class MyPage extends FlexLayout implements HasUrlParameter<Integer> {
    private final MyRepository _repository;

    @Override
    public void setParameter(BeforeEvent event, Integer parameter) {
        // Fetch data from the repository and update the view based on the URL parameter.
    }

    public MyPage(...) {
        // Create UI components and layout...
    }
}
2

I also use the approach with afterNavigation. The documentation also recommends that.

This event is typically used to update various parts of the UI after the actual navigation is complete. Examples include adjusting the content of a breadcrumb component and visually marking the active menu item as active.

1 Like
3

I would personally use beforeEnter to validate the parameter and use afterNavigation to build your components based on the query / parameters.

3 Likes
4

I think the confusion comes from the documentation on setParameter. In the examples there they update the UI directly, and there is no mention of afterNavigation.

5

Exactly. And furthermore I would instruct to fetch the data in afterNavigation as well, not in beforeEnter or constructor. In application where you have an access control, beforeEnter can forward un-autohorized user to other view, so fetching data before afterNavigation may be premature.

2 Likes
6

setParameter feels un-handy. I would suggest query or template parameter - those are IMHO better integrated and easier to use… both are hidden here :confused:

7

Yes, it is there for historical reasons as it was implemented first and the route template API was added later. For some reason we have not marked it deprecated yet.

1 Like
8

I don’t mind multiple options to get to my goal… what feels weird… the best solutions IMHO are behind “advanced”… those should be the defaults, not advanced :sweat_smile: (in the documentation)

1 Like