Inline editing for DataTables

Registered by Gabriel Hurley on 2012-09-21

To make editing more user-friendly, we can use AJAX to allow editing of object properties directly in the table.

Blueprint information

Status:
Complete
Approver:
Gabriel Hurley
Priority:
Low
Drafter:
Gabriel Hurley
Direction:
Approved
Assignee:
Ladislav Smola
Definition:
Approved
Series goal:
Accepted for icehouse
Implementation:
Implemented
Milestone target:
milestone icon 2014.1
Started by
Ladislav Smola on 2013-06-04
Completed by
David Lyle on 2013-12-04

Related branches

Sprints

Whiteboard

[jcoufal] Final design for the inline editation available here: http://people.redhat.com/~jcoufal/openstack/2013-08-09_os-inline_editation.pdf

[jcoufal] Design variants ready, currently under UX group discussion.

[jcoufal] I am working on mock-ups for this BP.

[lsmola]
Some notions about the problem:

N.1. When javascript is disabled, inline editing will be disabled. The whole table is wrapped by form, so the basic filtering and actions work without javascript, we will not change this structure.
So easiest ways to do the inline editing will be by showing the form in popup.

N.2. Cell editing will be probably best, because not all cells of the table should be edited (like status, etc.)
So basic workflow of the cell editing should be:
- Click on the cell shows shows popup
- Saving or canceling will be then possible
- There could be icon of pencil, when cell is editable, or mouse pointer will just change on hover of the editable cell.

N.3 Multi-part data
- would be good to have blueprints for Ajax Upload already implemented

N.4 Creating a new table row
- problem in here is that the table row doesn't always contain all required fields. So this should probably show form with all required fields, rather than all columns of table. Right?

N.5 There is a way to show the form fields directly in the table(without popup). But it will be harder to implement.

Now, how I imagine it should be implemented:

when defining a table column, you could connect it to some form e.g.

name = tables.Column('name', verbose_name=_('User Name'), editable_by=UpdateUserNameForm)

So this would work exactly like forms in the modal, that are there now.

It may be good to have some default form, so you could type just editable=True and it will find out the type of the column and show the form input for this column automatically (so you don't have to define a Form class and a view). Though I am not exactly sure how this could be implemented.

[gabrielhurley] I agree completely on points 1 and 2. I would say leave point 3 for some future date. We don't need to worry about uploading inline currently. Let's keep the scope of this to editing existing text-based (or boolean/selection-based) fields. I think you're right about #5, though. It will require associating a form class with the table in some fashion. I would suggest making it a part of the Row class logic, similar to how ajax-updated rows work now. That way it doesn't have to be defined per-field, per se. The columns/fields can then be correlated with form inputs.

Gerrit topic: https://review.openstack.org/#q,topic:bp/inline-table-editing,n,z

Addressed by: https://review.openstack.org/31047
    Inline Table editing

[2013-07-16 | Gabriel] I'd rather see this land as a robust, well-tested feature early in I than try to rush it into H. I'm willing to reconsider if great code shows up early in H3, but for now I'm going to defer this.

[2013-08-06 | lsmola] Whole Popup variant (N2) got cancelled after talk with jcoufal. There will be only inline edit variant for cells (N5).

[2013-08-14 | lsmola] Adding this to the all dashboard tables will be implemented as one commit per one dashboard table.

Gerrit topic: https://review.openstack.org/#q,topic:bp/-,n,z

(?)

Work Items

Work items:
Cell Edit Action inside Table: DONE
Connect Update Action to Table: DONE
Validation Process of the Cell: DONE
Update Table after save (only current cell): DONE
Design: DONE
Implementing design in Bootstrap: DONE
Apply the solution to whole Dashboard: TODO
Tests: DONE

Dependency tree

* Blueprints in grey have been implemented.

This blueprint contains Public information 
Everyone can see this information.