Related Pages: Data Tables

...

• Hovering a row will show an edit icon.

• Clicking the edit icon:

  • Selects the entire row (if not already selected).

  • Changes all relevant cells to input fields. This may include Text Fields, Drop-down Menus, Numeric Steppers, Date Pickers etc.

  • Replaces all action icons with two buttons: Apply (emphasized button) and Cancel (regular dialog button). See Dialog Buttons.

• The user can enter or update any input field, in any order.

• When finished, the user can click on one of the two buttons:

  • Clicking the Apply button switches the row back to its original state, with the updated new set of values.

  • Clicking the Cancel button switches the row back to its original state, with the original previous set of values.

Validations and Errors

• Long inputs in text fields will be treated as regular Text Fields, unless otherwise specified.

• In edit mode, if the user clicks on any other element on the page after changing any field, a popup message will appear, warning about the potential data loss. In this case:

  • If the user chooses to continue keep 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.

...