can't update value of specific properties's elemnt from frontend by using

Flow
1

Hi, (i am using Vaadin 14 + springboot + polymer)

I have a “DYNAMIC” list of “card” containing the information of a generic user…
for each card i have a button in order to perform an insert on the DB.
Since I was not able to link the html objects of the cards with the java code, I decided to copy the parameter that I have to insert in the database in a hidden element which is already linked to the backend through @Id.
Below the function that i have used in order to copy the parameter that have to be inserted.

onButtonClick(event) {
const span = this.$.labelTmp;
span.value = event.srcElement.id;
}

but it seems that in the backend the parameter doesn’t arrive correctly.
In fact in the BE, labelTmp.getValue() is empty.

is it necessary to perform some kind of data update from frontend to backend?

2

For me it looks like you are trying to do it wrong way.

i have a button in order to perform an insert on the DB.

Could you consider instead firing custom event when the button is clicked and pass the value in event detail

Here is an example

Client side

https://github.com/vaadin-component-factory/vcf-autocomplete/blob/polymer-3/src/vcf-autocomplete.js#L251

Server side

https://github.com/vaadin-component-factory/autocomplete/blob/master/autocomplete/src/main/java/com/vaadin/componentfactory/Autocomplete.java#L312

In addition to simple values, you can pass Json in event detail and parse it on serve side if you have more data to pass.

3

Cool example thanks…! you right maybe it was the wrong way…anyway in the meantime I have found a solution:
i have modified the function like this:

onButtonClick(event) {
const span = this.$.labelTmp;
span.value = event.srcElement.id;
span.dispatchEvent(new Event(‘change’));
}

→ “span.dispatchEvent(new Event(‘change’));” ← this function allows to execute a kind of update of the values client-side to server-side

thanks!