Skip to end of banner
Go to start of banner

Inline Editing Tables

Skip to end of metadata
Go to start of metadata

You are viewing an old version of this content. View the current version.

Compare with Current View Version History

« Previous Version 14 Next »

Lead: Liav Nadler  ONGOING

Related Pages: Data Tables



Description

An editable table is a /wiki/spaces/UX/pages/283051242 in which the user can edit data inside a row, without the need to navigate to a separate page, a panel or a popup

Basic Flow

  • An editable table is similar to a basic table, with the exceptions described below:
  • Clicking the edit icon in any row:
    • Selects that row (if not already selected) 
    • Changes all relevant cells of that row to input fields (this may include text fields, dropdown menus, spinners, date pickers etc.)
    • Replaces all action icons with two icons: confirm (V) and cancel (X) 
  • The user can enter or update any input field, in any order
  • When done the user can click on one of the two icons:
    • Clicking the confirm icon changes all input fields back to text, with the updated values
    • Clicking the cancel icon changes all input fields back to text, with the previous values

Edge Cases

  • On edit mode, if the user clicked on any other element on the page after changing any field, a popup window will appear, warning about the potential data loss.
    In this case:
    • If the user chooses to continue editing the popup will close, and the page will auto-scroll to the relevant row, if needed
    • If the user chooses to close and discard changes, the row will switch back to normal mode, with the previous set of values

Accessibility compliance

Focus management

On edit mode:

  • By default, the first input field will be in focus
  • The user can move the focus to the next or previous field using Tab / Shift+Tab
  • Clicking Enter when the focus is on a text field will change all input fields back to text, with the updated value

<<We already set a general guidelines described in /wiki/spaces/UX/pages/308969693 >>

Screen reader support 

<<Make sure the components support screen reader for content or behaviour where needed - see /wiki/spaces/UX/pages/308248620 >>

Contrast & size compliance

<<Visual designers must comply with the minimal of /wiki/spaces/UX/pages/301498483 for each component>>

Design

Zeplin linkScreen thumbnail

<<Short Zeplin link. You
Use this
>>

<<Screen with 200 width>>


Code

<<a box containing the code - discuss with Femi>>

  • No labels