Open new detail view with id from grid list is other view

General
1

Hi, I’m new to Vaadin (and have the basics in programming)and just did the Vaadin CRM tutorial. https://vaadin.com/learn/tutorials/modern-web-apps-with-spring-boot-and-vaadin
But now I would like to expand the applications with new views etc so I can learn more about Vaadin.
So the question is, if for example you have a list with contacts in a grid. I would like to click on one of the contacts and then a new view opens up with all the data from that item. In other words I need to get the ID from the clicked contact and with that ID open a new view and get all of that persons data from the database.
Getting the data from the database using custom query for example isn’t the issue. I just don’t know how to program the view so it opens a new view where that persons data can be loaded into.
I’ve searched the Internet but couldn’t find a good example or something like it.

Maybe it’s super easy and I just looked over it, but any help would be much appreciated!

2

Sounds like you could use a view with the contact id as a URL parameter: https://vaadin.com/docs/v14/flow/routing/tutorial-router-url-parameters.html#url-parameters-for-navigation-targets

So you could use this in your first view:

    String id = "get id from clicked item";
    UI.getCurrent().navigate(OtherView.class, id);

In your other view, implement HasUrlParameter:

   public class OtherView extends VerticalLayout implements HasUrlParameter<String> {
     
	 
	@Override
    public void setParameter(BeforeEvent event, @OptionalParameter String parameter) {
       // here you can initialize the view if the parameter is present
    }
3

Hi,

Thanks for helping!

When I try to implement this I’m getting some errors.
At my first view I’ve done this in configureGrid method:

 grid.setSelectionMode(Grid.SelectionMode.SINGLE);
        grid.addItemClickListener(event -> goToOrganisation(event.getItem()));

and this is the method to open new view:

  private void goToOrganisation (Organisation organisation)
    {
        longId = organisation.getId();
        stringId = String.valueOf(longId);
        UI.getCurrent().navigate(OrganisationView.class, stringId);
    }

The strange thing is that I’m getting:

There was an exception while trying to navigate to '' with the exception message 'Error creating bean with name 'com.vaadin.tutorial.crm.ui.views.list.ListView': Bean instantiation via constructor failed; nested exception is org.springframework.beans.BeanInstantiationException: Failed to instantiate [com.vaadin.tutorial.crm.ui.views.list.ListView]
: Constructor threw exception; nested exception is java.lang.NullPointerException'

The only thing I’ve changed is the way the grid works when clicked on an item. At first it was this:

grid.asSingleSelect().addValueChangeListener(evt -> editOrganisation(evt.getValue()));

This was because you could edit the item from this view because it would open a form.
But this line has been replaced with what I wrote above because I want to edit the item in a separate view.
So right know it gives this error, but when I changed the code back to what I had the page works fine…

4

I’d maybe check where that null pointer exception in the ListView constructor is coming from? Try running your app in debugger or add a try-catch block in the constructor.

5

Olli Tietäväinen:
I’d maybe check where that null pointer exception in the ListView constructor is coming from? Try running your app in debugger or add a try-catch block in the constructor.

Well the null pointer exception comes from the backend because in the service it says that my list of organisations are empty.
But the strange thing is that this only occurred when I changed the way the grid should work. instead of select I made it click events.
When I change it back everything seems to work fin…

6

If you handle the empty list of organisations case by e.g. catching that exception, you might have a better idea of why it happens.

7

Olli Tietäväinen:
If you handle the empty list of organisations case by e.g. catching that exception, you might have a better idea of why it happens.

Hi, unfortunately I’ve been ill so I’ve only be able to look at it today.
I’ve managed to fix the Null pointer exception but I’m still having trouble with sending the ID to the new view as a parameter.
It seems that the setParameter method is called after the constructor of the view. So the parameter (which should contain the ID) I want to work with in the constructor is always Null because at the time the constructor needs it the setParameter method hasn’t been called yet thus it won’t set my id in the parameter…
I know the data it self works because when I change the variable to just the number of the ID the view does load all it’s data.
So is there a way on how to fix this? so when the constructor is called I already have my ID filled?

8

You can’t have a method called before the constructor fires; that’s a Java feature. You could move your initialization logic from the constructor to the setParameter method, perhaps?

9

Olli Tietäväinen:
You can’t have a method called before the constructor fires; that’s a Java feature. You could move your initialization logic from the constructor to the setParameter method, perhaps?

I thought I read somewhere that you don’t really want to add logic to the setParameter method, but it works now so thanks!