Docs

Documentation versions (currently viewingVaadin 14)
You are viewing documentation for an older Vaadin version. View latest documentation

Message Input

Message Input allows users to author and send messages.

Open in a
new tab
MessageInput input = new MessageInput();
input.addSubmitListener(submitEvent -> {
    Notification.show("Message received: " + submitEvent.getValue(),
            3000, Notification.Position.MIDDLE);
});
add(input);

The user can send the message with one of the following actions:

  • by pressing Enter (use Shift + Enter to add a new line)

  • by clicking the “send” button.

Use the Message List component to show messages that users have sent.

Open in a
new tab
MessageList list = new MessageList();
MessageInput input = new MessageInput();
input.addSubmitListener(submitEvent -> {
    MessageListItem newMessage = new MessageListItem(
            submitEvent.getValue(), Instant.now(), "Milla Sting");
    newMessage.setUserColorIndex(3);
    List<MessageListItem> items = new ArrayList<>(list.getItems());
    items.add(newMessage);
    list.setItems(items);
});

Person person = DataService.getPeople(1).get(0);
MessageListItem message1 = new MessageListItem(
        "Nature does not hurry, yet everything gets accomplished.",
        LocalDateTime.now().minusDays(1).toInstant(ZoneOffset.UTC),
        "Matt Mambo");
message1.setUserColorIndex(1);
MessageListItem message2 = new MessageListItem(
        "Using your talent, hobby or profession in a way that makes you contribute with something good to this world is truly the way to go.",
        LocalDateTime.now().minusMinutes(55).toInstant(ZoneOffset.UTC),
        "Linsey Listy", person.getPictureUrl());
message2.setUserColorIndex(2);
list.setItems(message1, message2);

VerticalLayout chatLayout = new VerticalLayout(list, input);
chatLayout.setHeight("500px");
chatLayout.setWidth("400px");
chatLayout.expand(list);
add(chatLayout);
Component Usage recommendations

Message List

Show a list of messages.