Documentation

You are viewing documentation for Vaadin 23. View latest documentation

Documentation

Message List

Source: TypeScript / Java

Message List allows you to show a list of messages, for example a chat log. You can configure the text content, information about the sender, and the time of sending for each message.

Open in a
new tab
Person person = DataService.getPeople(1).get(0);
MessageList list = new MessageList();
Instant yesterday = LocalDateTime.now().minusDays(1)
        .toInstant(ZoneOffset.UTC);
Instant fiftyMinsAgo = LocalDateTime.now().minusMinutes(50)
        .toInstant(ZoneOffset.UTC);
MessageListItem message1 = new MessageListItem(
        "Linsey, could you check if the details with the order are okay?",
        yesterday, "Matt Mambo");
message1.setUserColorIndex(1);
MessageListItem message2 = new MessageListItem("All good. Ship it.",
        fiftyMinsAgo, "Linsey Listy", person.getPictureUrl());
message2.setUserColorIndex(2);
list.setItems(Arrays.asList(message1, message2));
add(list);

The messages in the list can be populated with the items property. The items property is of type Array, with JSON objects in it. Each JSON object is a single message.

Styling

You can style individual messages by adding a theme property to some items and providing CSS using that theme. This can be useful, for example, to highlight the current user’s own messages.

Open in a
new tab
Person person = DataService.getPeople(1).get(0);
MessageList list = new MessageList();
Instant yesterday = LocalDateTime.now(ZoneOffset.UTC).minusDays(1)
        .toInstant(ZoneOffset.UTC);
Instant fiftyMinsAgo = LocalDateTime.now(ZoneOffset.UTC)
        .minusMinutes(50).toInstant(ZoneOffset.UTC);
MessageListItem message1 = new MessageListItem(
        "Linsey, could you check if the details with the order are okay?",
        yesterday, "Matt Mambo");
message1.setUserColorIndex(1);
MessageListItem message2 = new MessageListItem("All good. Ship it.",
        fiftyMinsAgo, "Linsey Listy", person.getPictureUrl());
message2.addThemeNames("current-user");
message2.setUserColorIndex(2);
list.setItems(Arrays.asList(message1, message2));
add(list);
Component Usage recommendations

Message Input

Allow users to author and send messages.

EE10DB8E-479C-41D0-9A77-BFA41C340BFB

Was this page helpful?
Leave a comment or ask a question, or share your own code examples. You can also join the Vaadin forum and ask questions there.