Problem wirh LitRenderer

Flow
1

I have a problem witn the lit renderer, when trying to render a list. In the following code the ${topic.name} and ${topic.color} are not replaced by the correct values (instead the values are undefined), and I do not know why? I know I have to remove the join and replace it by html, but currently I just want that the two placeholders are correctly replaced. The System.out.printn return the correct values. Can someone probably help me?

public static Renderer<PTask> createTaskSubjectRendererNotWorking(OrganizationUser organizationUser, Locale locale) {
        //g -> g.getGroup() != null ? g.getGroup().getName() : ""
        return LitRenderer.<PTask> of(
                        "<vaadin-vertical-layout style=\"line-height: var(--lumo-line-height-m);\">"
                                + "    <span> ${item.subject} </span>"
                                //+ "    <div style='display: flex; gap: 4px;'>"
                                + "    ${item.topics.map((topic) => "
                                + "        '<span style=\""
                                + "          background-color: ${topic.color};\""
                                + "          title=\"${topic.name}\">"
                                + "          ${topic.name}"
                                + "        </span>').join('')}"
                                + "    </div>"
                                + "  </vaadin-vertical-layout>")
                .withProperty("subject", p -> p.getTaskSubject())
                //.withProperty("assignedTo", p -> getAssignedToString(p))
                .withProperty("topics", p -> {
                    List<Map<String, String>> topics = p.getTopics(organizationUser).stream()
                            .map(topic -> Map.of(
                                    "color", topic.getColor(),
                                    "name", topic.getTopic()))
                            .toList();
                    System.out.println("Topics: " + topics); // Log für Debugging
                    return topics;
                });
    }

Thank you!
Florian

2

The value returned from the property callback is passed through com.vaadin.flow.internal.JsonSerializer.toJson(Object) which based on my reading doesn’t properly support Map values. As a workaround, you could define a simple bean or record type with just a color and name property.

Edit: I created Support `Map<String, T>` in `JsonSerializer.toJson(Object)` · Issue #20750 · vaadin/flow · GitHub for the missing feature.

1 Like
3

Hello,
thank you for your help, I have created a dummy object, consisting only of the name and the color, and than it worked as expected. Good to hear, taht you have created a ticket.

Florian