In-place fields

With this design, users can activate a field to edit a single value. Data can be presented in a tabular format, in which case, clicking a cell would activate an input field, which would allow the user to directly edit the value. The following figure shows an example of this kind of interface:

The Vaadin Framework allows this through the Grid.addComponentColumn method. The following line adds  a Button to an existing Grid:

grid.addComponentColumn(user -> new Button("Delete", e -> deleteClicked(user)));

There are advantages and disadvantages of using this option. The main advantage is speed. Users can quickly edit a value, and there's no need to navigate to other views in order to edit the data; however, implementing the add operation requires extra considerations. When the user clicks the Add button, a new empty row is added; however, it's not easy to know when the row can be saved (in a database, for example). Is a completely empty row a valid record? One way of solving this is by only persisting the record when all the values in it are valid. Another disadvantage is evident when the record has many fields, which, in this case, means a grid with many columns. Editing the data in columns that are scrolled out of the view requires extra interaction from the user, which wipes out the advantage of editing data quickly.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset