How to load a combobox with vaadin fusion

Question

Hi I'm using the vaadin starter in order to learn more about vaadin.

I just started a new project (Java+Typescript)

I am having issues to solve an issue.

I have a Users and Rol Entity, being Rol an attribute of User, the thing is when I am setting the views created with vaading start I am trying to set up a combo box to load Roles to be used to create a new user but nothing work so far.

In the tutorial in vaading web page they solve this in a way that is way different to the arch and files created by the vaadin start so I thought that maybe would be another way to do it.

My entities

User

package com.example.application.data.entity;

import com.vaadin.fusion.Nonnull;
import com.example.application.data.AbstractEntity;

import javax.persistence.Entity;
import javax.persistence.ManyToOne;



@Entity
public class Users extends AbstractEntity {


    @ManyToOne
    @Nonnull
    private Rol rol;

    
    public Rol getRol() {
        return rol;
    }
    public void setRol(Rol rol) {
        this.rol = rol;
    }

}

Rol

package com.example.application.data.entity;

import com.vaadin.fusion.Nonnull;
import com.example.application.data.AbstractEntity;
import javax.persistence.Entity;


@Entity
public class Rol extends AbstractEntity{
    
    @Nonnull
    private String name;

    @Nonnull
    private String description;

    
    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getDescription() {
        return description;
    }

    public void setDescription(String description) {
        this.description = description;
    }

}

What should I do to load this with all roles in order to select one in my users-view.ts

<vaadin-combo-box label="Rol" id="rol" ${field(this.binder.model.rol)} item-label-path="name"></vaadin-combo-box>

Right now I'getting this

How the combobox shows

Thanks in advance guys.

Answer 1

My Solution was:

added tis lines to my typescrypt class

@state()
private roles: Rol[] = [];

@state from 'lit/decorators.js'

then in the connectedCallback function added this line

this.roles = await RolesEndpoint.listAll();

listAll() is a method that I created on my endpint class.

like this:

@Nonnull
public List<@Nonnull Rol> listAll() {
   return service.listAll();
}

and in my service class

public List<Rol> listAll() {
   return repository.findAll();
}

Now you can call the data in your combobox element

<vaadin-combo-box .items=${this.roles} label="Rol" id="rol"  ${field(this.binder.model.rol)} item-label-path="name" item-value-path="id"></vaadin-combo-box>

I hope this can be helpful.