Custom Component Selection

Flow
1

Hello,

Please first check on attached screen shot.

I am new to vaadin. I have created one simple component (for Bucket) which has some labels and button as you can see from screen shot. This button is common to all buckets. Those all labels are coming from database and when you click on button its opening dialog from where user selects some data from selection and click on Submit. When user submit from dialog its should send all label which displayed on my custom component so according to that I can update bucket on which user clicked “OpenDialog”.

I need something which can fire server side request when you click on “Open Dialog”. That request will send selected bucket data and I will hold it temporarily and when user submit page I will do database transaction and remove those temporary data.

**I hope someone can help me on this. Here is my Code. **

**1. Custom Component Code. **

import com.vaadin.flow.component.button.Button;
import com.vaadin.flow.component.html.Label;
import com.vaadin.flow.component.notification.Notification;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;

public class MyPanel extends VerticalLayout {

	private static final long serialVersionUID = 1L;
	private Label nameLabel;
	private Label statusLabel;
	private Label idLabel;
	private Button clickButton;
	
	public MyPanel(int id) {
		super();
		this.nameLabel = new Label("NameLabel_"+id);
		this.statusLabel = new Label("StatusLabel_"+id);
		this.idLabel = new Label("IDLabel_"+id);
		this.clickButton = new Button("Open Dialog", e -> Notification.show("KSHITIJ"));
		this.setWidth("200px");
		this.setHeight("200px");
		add(this.idLabel);
		add(this.statusLabel);
		add(this.nameLabel);
		add(this.clickButton);
		this.getStyle().set("border", "0.5px solid #9E9E9E");
	}	
}

2. My MainView.java

import org.springframework.beans.factory.annotation.Autowired;

import com.vaadin.flow.component.button.Button;
import com.vaadin.flow.component.dependency.StyleSheet;
import com.vaadin.flow.component.notification.Notification;
import com.vaadin.flow.component.orderedlayout.HorizontalLayout;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.router.Route;
import com.vaadin.flow.server.PWA;

@Route
@PWA(name = "Project Base for Vaadin Flow with Spring", shortName = "Project Base")
@StyleSheet("style.css")
public class MainView extends VerticalLayout {

	private static final long serialVersionUID = 1L;
	public MainView(@Autowired MessageBean bean) 
	{
        Button button = new Button("Click me", e -> Notification.show(bean.getMessage()));
        add(button);
        HorizontalLayout horizontalLayout = new HorizontalLayout();
        for(int i = 0; i < 5; i++) {
        	MyPanel myPanel = new MyPanel(i);
        	horizontalLayout.add(myPanel);
        }
        add(horizontalLayout);
    }
}

17801937.png