Inline Editing of of single fields on a huge form

Flow
1

Hi Vaadin Folks,

I have a question to Vaadin Users. Did anyone of you yet create a “inline editing” functionality on an existing form? Something which is also used in Jira, where you just hover over a field and then can inline edit it and confirm the change with the Enter key or by clicking on a small button surrounding the field?

I was wondering if anyone yet has implemented such a inline-field editing feature with Vaadin 7 and if something like that is feaseable to be implemented. In theory we would just need some CSS around every field in read-mode and a click-listener which converts the field into edit-mode and then a functionality which handels the confirmation of the save by Enter-Key or mouse-click on the “OK-button” to save the change.

Background is that we have huge forms, where whole object-graphs are editable. However they are saved as a whole and this makes the saving-process quite slow, as the business-logic has to process the complete object-graph.

Now we are thinking of a way to allow the change of single fields within this huge form with a “Quick edit / Live editing” feature, where a user could just click on the field to make it editable, do the the change and press enter to persist it.

Thanks to the community in advance for any replies :slight_smile:

Gabriel

2

I may miss some information from you, but at the moment my understanding is that what you are looking for is already in Vaadin Framework out of the box.

All field components have value change event, so you can use addValueChange listener to a field to observe if the value of a single field has changed. And then you can get the value and do what ever you want with it.

Also it is the default functionality of the fields, that when you click it, it will gain focus and you can edit it.

3

OK, maybe I was not explicit enough. Requirement/Userstory is as follows:

  • User opens a form in read-only mode (no possibility to change anything)
  • User hovers over a field (which is in output mode) with his mouse, whose value he wants to change
  • Some visual box around the field appears, which makes him click into the field.
  • Booom => the field went into edit mode
  • he does some changes and moves the mouse out of the field a little bit and sees a “Check” icon, which he clicks in order to confirm his change
  • changed field-value is communicated to the server and persisted.
4

Why you want to keep fields read-only until clicked? It seems un-necessary, i.e. with the above flow, you can edit them anyway.

Instead of being read-only, are you actually just looking for way to highlight the field with different styles when you hover on it? If yes, you can add custom style name in the fields and apply some hover styles to them.