Thymeleaf webflux: Only one data-driver variable is allowed to be specified as a model attribute, but at least two have been identified

Question

I'm trying to create a dashboard application where multiple widgets get updates through SSE. My DashboardController looks like:

public class DashboardController
{
    private WidgetService widgetService;

    public DashboardController(WidgetService widgetService)
    {
        this.widgetService = widgetService;
    }

    @GetMapping("/")
    public String index(final Model model)
    {
        for(WidgetInterface<?> widget : widgetService.getAll()) {
            model.addAttribute("widget-data-driver-" + widget.getIdentifier(),
                    new ReactiveDataDriverContextVariable(widget.getInitialData(), 100));
        }
        model.addAttribute("widgets", widgetService.getAll());
        return "index";
    }
}

And my WidgetInterface:

public interface WidgetInterface<T>
{
    public String getIdentifier();
    public String getTitle();
    public String getStreamEndpoint();
    public Flux<T> getInitialData();
    public Map<String, String> getColumns();
    public String getThymeLeafFraction();
    public Date getLastItemDate();
    public Flux<T> getItemsUpdatedSince(Date date);
}

All is working fine for one widget (from the WidgetService). I'm trying to pass a ReactiveDataDriverContextVariable for each widget to Thymeleaf. But I get the following error:

org.thymeleaf.exceptions.TemplateProcessingException: Only one data-driver variable is allowed to be specified as a model attribute, but at least two have been identified: 'widget-data-driver-nufeed' and 'widget-data-driver-weatherapi'

I have two active widgets, one is an RSS feed an one implements weather api. I understand the error, but how to can I set up the reactive variables for multiple widgets?

Update my thymeleaf template

<!DOCTYPE html>  
<html xmlns:th="http://www.w3.org/1999/xhtml" th:with="version=7">  
<head>  
 <meta charset="utf-8">  
 <meta http-equiv="X-UA-Compatible" content="IE=edge">  
 <meta name="viewport" content="width=device-width, initial-scale=1">  
 <link rel="icon" type="image/png" href="images/logo.png" />  
 <title>Dashboard</title>  
 <link rel="stylesheet" th:href="'build/vendor.css?v=' + ${version}" />  
 <link rel="stylesheet" th:href="'build/app.css?v=' + ${version}" />  
 <link rel="preconnect" href="https://fonts.googleapis.com">  
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>  
 <link href="https://fonts.googleapis.com/css2?family=Space+Mono&display=swap" rel="stylesheet">  
</head>  
<body>  
 <div class="container-fluid" id="content">  
 <div class="container" id="content-body">  
 <div class="logo-header">  
 <img src="images/logo.png" align="left">  
 <h2>Dashboard <a href="/logout" class="logout"><span>(logout)</span></a></h2>  
 </div>  
 <div class="row" id="widgets">  
 <div class="col-xl-4 col-lg-6 col-md-6 col-sm-12 col-12 card-container" th:each="widget: ${widgets}" th:data-identifier="@{${widget.identifier}}">  
 <div class="card p-3 mb-2" th:classappend="@{${widget.getCardCssClass()}}">  
 <div class="card-header" th:if="${widget.title != null}">  
 <div class="widget-icon-header"><img class="widget-icon" th:src="${widget.icon}" /></div>  
 <div class="float-left" th:text="${widget.title}"></div>  
 <div class="float-right reload" th:if="${widget.hasUpdate}" th:data-ref="''+@{${widget.identifier}}+''"><img class="reload-img" src="images/reload.png"></div>  
 </div> <div class="card-body" th:id="''+@{${widget.identifier}}+'-content'">  
 <table th:replace="__${widget.getThymeLeafFraction()}__"></table>  
 </div> </div> </div> </div> </div> <div class="row fullscreen">  
 <a href="javascript:openFullscreen()" style="margin: 0px auto; color:#000">Fullscreen</a>  
 </div> </div>  
 <script th:src="'build/vendor.js?v=' + ${version}"></script>  
 <script th:src="'build/app.js?v=' + ${version}"></script>  
</body>  
</html>

It includes a thymeleaf fraction depending on the widget:

<table th:id="@{${widget.identifier}}" class="table" th:classappend="@{${widget.getCardCssClass()}}">  
 <thead> <tr> <th data-th-each="column : ${widget.getColumns()}"  
  th:style="'width:'+@{${widget.getColumnWidth().get(column.key)}}+';'"  
  th:text="${column.value}"></th>  
 </tr> </thead> <tbody> <tr class="result" data-th-each="item : ${#vars.getVariable('widget-data-driver-__${widget.identifier}__')}" th:data-id="@{${item.id}}">  
 <td th:text="''+${item.driver}"></td>  
 <td th:text="''+${item.points}"></td>  
 </tr> </tbody></table>

Update answer based on Angelos comment

I tried to replace the DashboardController.index method with:

GetMapping("/")
public String index(final Model model, Authentication authentication)
{
     setAuthentication(authentication);
     Flux<WidgetInterface<?>> flux = Flux.just(widgetService.getAll().toArray(new WidgetInterface<?>[0]));
     model.addAttribute("widgets", new ReactiveDataDriverContextVariable(flux));
     return "index";
}

This is working, except for the fact that now I cannot iterate over my widget.getInitialData() in thymeleaf (this is a fraction file as described above):

<div data-th-each="item : ${widget.getInitialData()}"  th:data-id="@{${item.id}}" id="art">
    <a th:data-lightbox="'' + ${widget.identifier}" th:href="${item.image}">
        <img th:src="'https://images.weserv.nl/?url=' + ${item.image} + '&w=200&h=200&fit=cover&a=top'" th:data-lightbox="'' + ${widget.identifier}"
             class="rounded d-block user-select-none" style="max-height:100px;max-width:150px;margin-right:10px;" align="left" />
    </a>
    <h5 th:text="${item.description}" class="card-title"></h5>
</div>

This gives this error:

org.thymeleaf.exceptions.TemplateProcessingException: Exception evaluating SpringEL expression: "item.id" (template: "art_fraction" - line 1, col 56)
    at org.thymeleaf.spring5.expression.SPELVariableExpressionEvaluator.evaluate(SPELVariableExpressionEvaluator.java:292) ~[thymeleaf-spring5-3.0.15.RELEASE.jar:3.0.15.RELEASE]

Answer 1

I'd make your template code little bit simpler. I'd change it in this way:

JAVA SIDE

GetMapping("/")
public String index(final Model model, Authentication authentication)
{
     setAuthentication(authentication);
     Flux<WidgetInterface<?>> flux = Flux.just(widgetService.getAll().toArray(new WidgetInterface<?>[0]));
     model.addAttribute("widgets", new ReactiveDataDriverContextVariable(flux));
     return "index";
}

TEMPLATE SIDE :

        <table class="table table-striped">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>Image</th>
                    <th>Identifier</th>
                </tr>
            </thead>
            <tbody>
                <tr data-th-each="myWidget : ${widgets}">
                    <td>[[${myWidget.id}]]</td>
                    <td>[[${myWidget.image}]]</td>
                    <td>[[${myWidget.identifier}]]</td>
                </tr>
            </tbody>
        </table>

Obviously this is a sample... adapt it to your case

Angelo

Thymeleaf webflux: Only one data-driver variable is allowed to be specified as a model attribute, but at least two have been identified

Question

Update my thymeleaf template

Update answer based on Angelos comment

1 answers

solution1
0 2022-07-19 17:11:06

Thymeleaf webflux: Only one data-driver variable is allowed to be specified as a model attribute, but at least two have been identified

Question

Update my thymeleaf template

Update answer based on Angelos comment

1 answers

solution1 0 2022-07-19 17:11:06

solution1
0 2022-07-19 17:11:06