How to bind an object list with thymeleaf?
Solution 1
You need a wrapper object to hold the submited data, like this one:
public class ClientForm {
private ArrayList<String> clientList;
public ArrayList<String> getClientList() {
return clientList;
}
public void setClientList(ArrayList<String> clientList) {
this.clientList = clientList;
}
}
and use it as the @ModelAttribute
in your processQuery
method:
@RequestMapping(value="/submitQuery", method = RequestMethod.POST)
public String processQuery(@ModelAttribute ClientForm form, Model model){
System.out.println(form.getClientList());
}
Moreover, the input
element needs a name
and a value
. If you directly build the html, then take into account that the name must be clientList[i]
, where i
is the position of the item in the list:
<tr th:each="currentClient, stat : ${clientList}">
<td><input type="checkbox"
th:name="|clientList[${stat.index}]|"
th:value="${currentClient.getClientID()}"
th:checked="${currentClient.selected}" />
</td>
<td th:text="${currentClient.getClientID()}" ></td>
<td th:text="${currentClient.getIpAddress()}"></td>
<td th:text="${currentClient.getDescription()}" ></td>
</tr>
Note that clientList
can contain null
at
intermediate positions. Per example, if posted data is:
clientList[1] = 'B'
clientList[3] = 'D'
the resulting ArrayList
will be: [null, B, null, D]
UPDATE 1:
In my exmple above, ClientForm
is a wrapper for List<String>
. But in your case ClientWithSelectionListWrapper
contains ArrayList<ClientWithSelection>
. Therefor clientList[1]
should be clientList[1].clientID
and so on with the other properties you want to sent back:
<tr th:each="currentClient, stat : ${wrapper.clientList}">
<td><input type="checkbox" th:name="|clientList[${stat.index}].clientID|"
th:value="${currentClient.getClientID()}" th:checked="${currentClient.selected}" /></td>
<td th:text="${currentClient.getClientID()}"></td>
<td th:text="${currentClient.getIpAddress()}"></td>
<td th:text="${currentClient.getDescription()}"></td>
</tr>
I've built a little demo, so you can test it:
Application.java
@SpringBootApplication
public class Application {
public static void main(String[] args) {
SpringApplication.run(Application.class, args);
}
}
ClientWithSelection.java
public class ClientWithSelection {
private Boolean selected;
private String clientID;
private String ipAddress;
private String description;
public ClientWithSelection() {
}
public ClientWithSelection(Boolean selected, String clientID, String ipAddress, String description) {
super();
this.selected = selected;
this.clientID = clientID;
this.ipAddress = ipAddress;
this.description = description;
}
/* Getters and setters ... */
}
ClientWithSelectionListWrapper.java
public class ClientWithSelectionListWrapper {
private ArrayList<ClientWithSelection> clientList;
public ArrayList<ClientWithSelection> getClientList() {
return clientList;
}
public void setClientList(ArrayList<ClientWithSelection> clients) {
this.clientList = clients;
}
}
TestController.java
@Controller
class TestController {
private ArrayList<ClientWithSelection> allClientsWithSelection = new ArrayList<ClientWithSelection>();
public TestController() {
/* Dummy data */
allClientsWithSelection.add(new ClientWithSelection(false, "1", "192.168.0.10", "Client A"));
allClientsWithSelection.add(new ClientWithSelection(false, "2", "192.168.0.11", "Client B"));
allClientsWithSelection.add(new ClientWithSelection(false, "3", "192.168.0.12", "Client C"));
allClientsWithSelection.add(new ClientWithSelection(false, "4", "192.168.0.13", "Client D"));
}
@RequestMapping("/")
String index(Model model) {
ClientWithSelectionListWrapper wrapper = new ClientWithSelectionListWrapper();
wrapper.setClientList(allClientsWithSelection);
model.addAttribute("wrapper", wrapper);
return "test";
}
@RequestMapping(value = "/query/submitQuery", method = RequestMethod.POST)
public String processQuery(@ModelAttribute ClientWithSelectionListWrapper wrapper, Model model) {
System.out.println(wrapper.getClientList() != null ? wrapper.getClientList().size() : "null list");
System.out.println("--");
model.addAttribute("wrapper", wrapper);
return "test";
}
}
test.html
<!DOCTYPE html>
<html>
<head></head>
<body>
<form action="#" th:action="@{/query/submitQuery}" th:object="${wrapper}" method="post">
<table class="table table-bordered table-hover table-striped">
<thead>
<tr>
<th>Select</th>
<th>Client ID</th>
<th>IP Addresss</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr th:each="currentClient, stat : ${wrapper.clientList}">
<td><input type="checkbox" th:name="|clientList[${stat.index}].clientID|"
th:value="${currentClient.getClientID()}" th:checked="${currentClient.selected}" /></td>
<td th:text="${currentClient.getClientID()}"></td>
<td th:text="${currentClient.getIpAddress()}"></td>
<td th:text="${currentClient.getDescription()}"></td>
</tr>
</tbody>
</table>
<button type="submit" value="submit" class="btn btn-success">Submit</button>
</form>
</body>
</html>
UPDATE 1.B:
Below is the same example using th:field
and sending back all other attributes as hidden values.
<tbody>
<tr th:each="currentClient, stat : *{clientList}">
<td>
<input type="checkbox" th:field="*{clientList[__${stat.index}__].selected}" />
<input type="hidden" th:field="*{clientList[__${stat.index}__].clientID}" />
<input type="hidden" th:field="*{clientList[__${stat.index}__].ipAddress}" />
<input type="hidden" th:field="*{clientList[__${stat.index}__].description}" />
</td>
<td th:text="${currentClient.getClientID()}"></td>
<td th:text="${currentClient.getIpAddress()}"></td>
<td th:text="${currentClient.getDescription()}"></td>
</tr>
</tbody>
Solution 2
When you want to select objects in thymeleaf, you dont actually need to create a wrapper for the purpose of storing a boolean
select field. Using dynamic fields
as per the thymeleaf guide with syntax th:field="*{rows[__${rowStat.index}__].variety}"
is good for when you want to access an already existing set of objects in a collection. Its not really designed for doing selections by using wrapper objects IMO as it creates unnecessary boilerplate code and is sort of a hack.
Consider this simple example, a Person
can select Drinks
they like. Note: Constructors, Getters and setters are omitted for clarity. Also, these objects are normally stored in a database but I am using in memory arrays to explain the concept.
public class Person {
private Long id;
private List<Drink> drinks;
}
public class Drink {
private Long id;
private String name;
}
Spring controllers
The main thing here is that we are storing the Person
in the Model
so we can bind it to the form within th:object
.
Secondly, the selectableDrinks
are the drinks a person can select on the UI.
@GetMapping("/drinks")
public String getDrinks(Model model) {
Person person = new Person(30L);
// ud normally get these from the database.
List<Drink> selectableDrinks = Arrays.asList(
new Drink(1L, "coke"),
new Drink(2L, "fanta"),
new Drink(3L, "sprite")
);
model.addAttribute("person", person);
model.addAttribute("selectableDrinks", selectableDrinks);
return "templates/drinks";
}
@PostMapping("/drinks")
public String postDrinks(@ModelAttribute("person") Person person) {
// person.drinks will contain only the selected drinks
System.out.println(person);
return "templates/drinks";
}
Template code
Pay close attention to the li
loop and how selectableDrinks
is used to get all possible drinks that can be selected.
The checkbox th:field
really expands to person.drinks
since th:object
is bound to Person
and *{drinks}
simply is the shortcut to referring to a property on the Person
object. You can think of this as just telling spring/thymeleaf that any selected Drinks
are going to be put into the ArrayList
at location person.drinks
.
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" >
<body>
<div class="ui top attached segment">
<div class="ui top attached label">Drink demo</div>
<form class="ui form" th:action="@{/drinks}" method="post" th:object="${person}">
<ul>
<li th:each="drink : ${selectableDrinks}">
<div class="ui checkbox">
<input type="checkbox" th:field="*{drinks}" th:value="${drink.id}">
<label th:text="${drink.name}"></label>
</div>
</li>
</ul>
<div class="field">
<button class="ui button" type="submit">Submit</button>
</div>
</form>
</div>
</body>
</html>
Any way...the secret sauce is using th:value=${drinks.id}
. This relies on spring converters. When the form is posted, spring will try recreate a Person
and to do this it needs to know how to convert any selected drink.id
strings into the actual Drink
type. Note: If you did th:value${drinks}
the value
key in the checkbox html would be the toString()
representation of a Drink
which is not what you want, hence need to use the id!. If you are following along, all you need to do is create your own converter if one isn't already created.
Without a converter you will receive an error like
Failed to convert property value of type 'java.lang.String' to required type 'java.util.List' for property 'drinks'
You can turn on logging in application.properties
to see the errors in detail.
logging.level.org.springframework.web=TRACE
This just means spring doesn't know how to convert a string id representing a drink.id
into a Drink
. The below is an example of a Converter
that fixes this issue. Normally you would inject a repository in get access the database.
@Component
public class DrinkConverter implements Converter<String, Drink> {
@Override
public Drink convert(String id) {
System.out.println("Trying to convert id=" + id + " into a drink");
int parsedId = Integer.parseInt(id);
List<Drink> selectableDrinks = Arrays.asList(
new Drink(1L, "coke"),
new Drink(2L, "fanta"),
new Drink(3L, "sprite")
);
int index = parsedId - 1;
return selectableDrinks.get(index);
}
}
If an entity has a corresponding spring data repository, spring automatically creates the converters and will handle fetching the entity when an id is provided (string id seems to be fine too so spring does some additional conversions there by the looks). This is really cool but can be confusing to understand at first.
Comments
-
benscabbia almost 2 years
I am having a lot of difficulty with POSTing back a form to the controller, which should contain simply an arraylist of objects that the user may edit.
The form loads up correctly, but when it's posted, it never seems to actually post anything.
Here is my form:
<form action="#" th:action="@{/query/submitQuery}" th:object="${clientList}" method="post"> <table class="table table-bordered table-hover table-striped"> <thead> <tr> <th>Select</th> <th>Client ID</th> <th>IP Addresss</th> <th>Description</th> </tr> </thead> <tbody> <tr th:each="currentClient, stat : ${clientList}"> <td><input type="checkbox" th:checked="${currentClient.selected}" /></td> <td th:text="${currentClient.getClientID()}" ></td> <td th:text="${currentClient.getIpAddress()}"></td> <td th:text="${currentClient.getDescription()}" ></td> </tr> </tbody> </table> <button type="submit" value="submit" class="btn btn-success">Submit</button> </form>
Above works fine, it loads up the list correctly. However, when I POST, it returns a empty object (of size 0). I believe this is due to the lack of
th:field
, but anyway here is controller POST method:... private List<ClientWithSelection> allClientsWithSelection = new ArrayList<ClientWithSelection>(); //GET method ... model.addAttribute("clientList", allClientsWithSelection) .... //POST method @RequestMapping(value="/submitQuery", method = RequestMethod.POST) public String processQuery(@ModelAttribute(value="clientList") ArrayList clientList, Model model){ //clientList== 0 in size ... }
I have tried adding a
th:field
but regardless of what I do, it causes an exception.I've tried:
... <tr th:each="currentClient, stat : ${clientList}"> <td><input type="checkbox" th:checked="${currentClient.selected}" th:field="*{}" /></td> <td th th:field="*{currentClient.selected}" ></td> ...
I cannot access currentClient (compile error), I can't even select clientList, it gives me options like
get()
,add()
,clearAll()
etc, so it things it should have an array, however, I cannot pass in an array.I've also tried using something like
th:field=${}
, this causes runtime exceptionI've tried
th:field = "*{clientList[__currentClient.clientID__]}"
but also compile error.
Any ideas?
UPDATE 1:
Tobias suggested that I need to wrap my list in a wraapper. So that's what I did:
ClientWithSelectionWrapper:
public class ClientWithSelectionListWrapper { private ArrayList<ClientWithSelection> clientList; public List<ClientWithSelection> getClientList(){ return clientList; } public void setClientList(ArrayList<ClientWithSelection> clients){ this.clientList = clients; } }
My page:
<form action="#" th:action="@{/query/submitQuery}" th:object="${wrapper}" method="post"> .... <tr th:each="currentClient, stat : ${wrapper.clientList}"> <td th:text="${stat}"></td> <td> <input type="checkbox" th:name="|clientList[${stat.index}]|" th:value="${currentClient.getClientID()}" th:checked="${currentClient.selected}" /> </td> <td th:text="${currentClient.getClientID()}" ></td> <td th:text="${currentClient.getIpAddress()}"></td> <td th:text="${currentClient.getDescription()}" ></td> </tr>
Then my controller:
@RequestMapping(value="/submitQuery", method = RequestMethod.POST) public String processQuery(@ModelAttribute ClientWithSelectionListWrapper wrapper, Model model){ ... }
The page loads correctly, the data is displayed as expected. If I post the form without any selection I get this:
org.springframework.expression.spel.SpelEvaluationException: EL1007E:(pos 0): Property or field 'clientList' cannot be found on null
Not sure why it's complaining
(In the GET Method it has:
model.addAttribute("wrapper", wrapper);
)If I then make a selection, i.e. tick the first entry:
There was an unexpected error (type=Bad Request, status=400). Validation failed for object='clientWithSelectionListWrapper'. Error count: 1
I'm guessing my POST controller is not getting the clientWithSelectionListWrapper. Not sure why, since I have set the wrapper object to be posted back via the
th:object="wrapper"
in the FORM header.
UPDATE 2:
I've made some progress! Finally the submitted form is being picked up by the POST method in controller. However, all the properties appear to be null, except for whether the item has been ticked or not. I've made various changes, this is how it is looking:
<form action="#" th:action="@{/query/submitQuery}" th:object="${wrapper}" method="post"> .... <tr th:each="currentClient, stat : ${clientList}"> <td th:text="${stat}"></td> <td> <input type="checkbox" th:name="|clientList[${stat.index}]|" th:value="${currentClient.getClientID()}" th:checked="${currentClient.selected}" th:field="*{clientList[__${stat.index}__].selected}"> </td> <td th:text="${currentClient.getClientID()}" th:field="*{clientList[__${stat.index}__].clientID}" th:value="${currentClient.getClientID()}" ></td> <td th:text="${currentClient.getIpAddress()}" th:field="*{clientList[__${stat.index}__].ipAddress}" th:value="${currentClient.getIpAddress()}" ></td> <td th:text="${currentClient.getDescription()}" th:field="*{clientList[__${stat.index}__].description}" th:value="${currentClient.getDescription()}" ></td> </tr>
I also added a default param-less constructor to my wrapper class and added a
bindingResult
param to POST method (not sure if needed).public String processQuery(@ModelAttribute ClientWithSelectionListWrapper wrapper, BindingResult bindingResult, Model model)
So when an object is being posted, this is how it is looking:
Of course, the systemInfo is supposed to be null (at this stage), but the clientID is always 0, and ipAddress/Description always null. The selected boolean is correct though for all properties. I'm sure I've made a mistake on one of the properties somewhere. Back to investigation.
UPDATE 3:
Ok I've managed to fill up all the values correctly! But I had to change my
td
to include an<input />
which is not what I wanted... Nonetheless, the values are populating correctly, suggesting spring looks for an input tag perhaps for data mapping?Here is an example of how I changed the clientID table data:
<td> <input type="text" readonly="readonly" th:name="|clientList[${stat.index}]|" th:value="${currentClient.getClientID()}" th:field="*{clientList[__${stat.index}__].clientID}" /> </td>
Now I need to figure out how to display it as plain data, ideally without any presence of an input box...
-
benscabbia about 8 yearsthank you for your tremendous effort in helping me! I really appreciate it. However, I am still having a little trouble. If I try and set the name using
stat.pos
I get an exception:org.springframework.expression.spel.SpelEvaluationException: EL1008E:(pos 5): Property or field 'pos' cannot be found on object of type 'org.thymeleaf.processor.attr.AbstractIterationAttrProcessor$StatusVar' - maybe not public?
- So I tried to usepos.index
but then if I post without ticking anything, its null, but if I tick I getValidation failed for object='clientWithSelectionListWrapper'. Error count:1
-
benscabbia about 8 yearsOK I've updated the answer with Update 1. I must be making some silly mistake somewhere, I will keep trying in the mean time
-
Lucky about 8 yearsIt should be stat.index or stat.count @gudthing
-
benscabbia about 8 years@Tobías I don't suppose you would have any other idea on why the form is always returning empty? I guess it's a binding problem perhaps? I've put a bounty for 50 rep (which hopefully will make it a little bit more rewarding :)
-
benscabbia about 8 years@Tobías I've just literally done what you did in Update 1B, in a slightly messier fashion, but it is all working now :). Thank you so much for all your help, truly, couldn't have done it without your help. I'm glad you got the extra reputation, although I still think I owe you a keg of beer ;). Thanks again!
-
Tobías about 8 yearsI'm glad I could help. I'll count on it! I never miss an opportunity to take a beer ;) You're welcome.
-
Dashing Boy almost 7 years@Tobias I have a similar requirement and I can't seem to make it work. See this link It's pretty much what I want to do but there's no answer. Can you help?
-
Kushal Paudyal about 6 yearsThis worked perfectly. I had similar situation where I was struggling with and followed your answer and it worked pretty well.
-
Poutrathor about 5 yearsI don't understand why Thymeleaf can't let us use
currentClient.selected
? Anyway it works, so many thanks I was stuck (not understanding why) the binding failed for th:field. -
Elavarasan almost 5 years@Tobías I really liked your answer on this ask... I have similar issue with similar code stackoverflow.com/questions/57119063/… Can you please provide soln for me on this
-
Machtyn almost 4 yearsSee here for Youtube video on the above example. (Not my video) youtu.be/e9mlrHyn73w
-
Machtyn almost 4 yearsThe one problem I have with the above example is that it requires another service request to the database for data we already have (apparently) existing on the table. And for my current need, making a service call using the acquired id is not available.