Converter for client-side forms

[haijian-vaadin]

trafficstars

As a developer, when creating client-side forms, and binding a text field to a non-string model data, Vaadin could convert the value for me.

DoD

• A convertor interface similar to the Java version (flow/flow-data/src/main/java/com/vaadin/flow/data/converter/Converter.java).

• Able to set a convertor to a model setConvertor(model, converter).

• Able to get a convertor from a model getConvertor(model).

• in the ts-forms-demo, remove hack returning LocalTime as string in the endpoint to return a proper object that has the proper convertor to work in client

[Legioth]

This one could have some more specific use case described. The reason I'm asking is that I have a difficult time coming up with any good example where converters are needed. Back in the good old days Binder days in server-side views, converters were commonly needed with numeric values when Vaadin didn't have dedicated NumberField and IntegerField components. Nowadays, those use cases don't apply.

[haijian-vaadin]

I remember during the grooming session it was mentioned that even for a <vaadin-number-filed>, the value is always a javascript string. Just tried, looks so.

[haijian-vaadin]

One use case could be converting value for a custom field. E.g. a birthday is given using 3 comboboxes wrapped inside a vaadin-custom-field. A user would like to bind a LocalDate from server to this custom field.

<vaadin-custom-field id="birthday" label="Birthday" ...="${field(this.binder.model.dateOfBirth)}">
  <vaadin-horizontal-layout theme="spacing">
    <vaadin-combo-box placeholder="Day"></vaadin-combo-box>
    <vaadin-combo-box placeholder="Month"></vaadin-combo-box>
    <vaadin-combo-box placeholder="Year"></vaadin-combo-box>
  </vaadin-horizontal-layout>
</vaadin-custom-field>

Slack disucssion

[Haprog]

I think (as a workaround for now) you can implement converters currently by defining a custom field strategy but the API is not convenient for this use case. See https://vaadin.com/docs/latest/fusion/forms/appendix-web-component-field-strategy/#defining-a-field-strategy

[sissbruecker]

This can also be useful for selects, either native or for <vaadin-select>. Here the component value is always a string, but the model that you select can be anything like a number or an object.

[Feuerwerk]

Ran into the same problem. I have a property which, depending on some application setting, has either to be bound to a vaadin-integer-field or some custom element. That value has the unit minutes, but for the vaadin-integer-field it has to be converted into hours. So i whould have to convert the value when i load the entity from the endpoint and convert it back when sending the entity to the endpoint. Not a very elegant solution.

Solved it by creating a new field-Directive which allows me to override the converter (from / to) and also the fieldStrategy. Works beautifully and offers a lot of flexibility when binding a property to Vaadin / custom elements.

[Feuerwerk]

@Legioth Has another situation where my extended version of the field-directive which supports converts was very helpful. I had to implement some kind of event editor dialog where the user can switch between a timed event and an all day event. Depending on the selection i show either two vaadin-date-picker or vaadin-date-time-picker. The model properties backing this information is always date time which means YYYY-MM-DD'T'HH:mm but vaadin-date-picker requires the value in the format YYYY-MM-DD. Another "problem" is, my stopDate-property is exclusive which works nicely with vaadin-date-time-picker, but for vaadin-date-picker i had to add / subtract one day before reading / writing to be consistent. Having a converter added to the field-directive made this task a piece of cake, slim, and elegant. (i forgot that i have converters in the first place and implemented it the "official" way with way more code, realized my mistake, changed it to converters and deleted most of the needed code)