Feature Wiki

Information about planned and released features

Tabs

Page Editor » Data Table Editing

Page Overview

[Hide]

This request is part of the project for a New Page Editor.

1 Initial Problem

In the scope of the ILIAS Page Editor Revision we revamped the process to create and edit data tables. We diverged quite a bit from the previous proposal for improvements (see accordeon below).

2 Conceptual Summary

We decided to:

  • Minimize the settings on the create screen.
  • Always show the table using the full content area, when editing it.
  • Change the method for selecting cells for editing and for additional actions (merge cells, cell properties, ...)
  • To simplify the cration of a header row a setting "Has Header Row" is created as simple checkbox. The box is normally checked. Additional formatting needs to be done through the Advanced Settings or the Settings of the table cells.

It is often necessary to create tables for presenting content on ILIAS pages (in learning modules, categories, wikis, ...).While the usability of other parts of the ILIAS editor has constantly increased, the handling of tables and their editing still needs some improvements - especially when handling bigger tables. This wiki page is collecting possible improvements:

  1. Easy moving of table rows: It is very time-consuming to move a row from the bottom of a big table to the top. Either you click "Move up row" for every single row that has to be moved up (incl. waiting time for presenting the new page status). Or you create a new row at the top and cut and paste every cell of row from bottom to top (don't try to use drag&drop if you cannot see starting row and end row on the whole screen without scrolling...). It would already help if one could "Cut A Row" and paste it to another position of the table.
  2. Better presentation in editing mode: If you have a bigger table it is sometimes difficult to distinguish between the rows - especially because the cell in column one is always a bit deeper than the others due to the "row editing" icon above it (see also screenshot below by Mirco Hilbert). It would be great if we could place it outside the table to have all cells on the same height. And maybe some extra border for the editing mode would help to distinguish between rows and the cell content (escpecially when you have multiple elements in one cell).
  3. Defining cell properties when creating table: At the time being you have to create a table, save it and return to the page. Then in a second step you can enter the cell properties and define cell properties (like width or style). It would be great if this could be done straight after having created the table.
  4. Improving performance: Especially in bigger tables every change in a table takes quite a long time - probably because all table content has to be reloaded even when editing just a single cell. Maybe this could be improved by more client-side-editing and some caching voodoo...

3 User Interface Modifications

The workflow

  1. Page Editing = Data Table is not open yet
  2. Clicking on the Data Table element in the content area opens the settings for the table. Header and Row actions are available, but no cell is selected.
  3. Clicking on a cell opens the editing mode for tables showing the slate of the text editor and the cell being editing in the right.
  4. Clicking on another cell moves the editing to this cell.
  5. Double clicking a cell (or a column/row heading) selects the corresponding cells and changes to the cell settings mode.
  6. In the table settings and the cell editing mode clicking a row/column header shows a dropdown with actions for the corresponding row/column.
  7. Double clicking the intersection of the the rows/column headers selects the whole table and changes to the cell settings mode.
Additional Changes:
  • We would suggest to hide the input element to set the style, if only one style is available.

3.1 List of Affected Views

  • Create Table View
  • Edit Table View
  • Advanced Properties for Data Tables

3.2 User Interface Details

Create a Data Table
The Create Dialog is kept simple. Create Manually and Paste from Excel are defined as two different creation modes. The checkbox "Has a Header Row" is selected by default.
Form to Paste from Excel
The form to edit the table settings is similar to the one to create a table. It does not have a button to paste content from excel though, but has a link to the Advanced Settings instead. The options "Numbers of Columns" and "Numbers of Rows" are replaced by options "Add Columns Before/After" and "Add Rows Before/After" in the dropdown menus. A click on it shows a small modal to specify the number of columns/rows to be added. It is set to 1 by default. The Table is presented in a excel-like form. A single click on a row or column head shows a dropdown with the option to add or move the column/row. A double click on the row or column head selects the corresponding row/column.
Modal to specify the number of columns (rows) to be added. Set to 1 by default
Alternatively we could also add a view control to make the different views (editing the table properties, editing the table contents, and editing the cell properties) more visible. This depends on decisions taken on other elements. This would need to be added to all of the following views
The advanced settings are opened in the content area. If the number of Header Rows is changed to anything other than one, the checkbox in the simple settings is deactivated, if it is set to 1 it is activated, if the checkbox is set, the value of Header Rows is changed to 1 the checkbox is unset the value of Header Rows is changed to 0. We rename the labels for the Alignment (in the context of the table) to "Table Alignment" and Alignment (in the context of the caption) to "Position of Caption" to clarify their meaning. Additionally we removed the option to set the border and the padding here.
A simple left click in a table cell while in edit table mode opens the Text Editor and one can insert text into the cell. A click in another cell asynchronously saves the content and moves the focus to edit the next cell (current behavior). A single click on a row or column head shows a dropdown with the option to add or move the column/row. Double clicking on a cell or on an row/column heading saves, selects the corresponding cells, and changes to the cell settings mode. A click on Save and Return brings you back to the overview over the table and the settings for the table.
A double click on a table cell opens the Edit Cell Settings dialog. Additional cells can be added by clicking on them. Clicking on a selected cell, deselects the cell. A double click on the row or column head selects the corresponding row/column. If multiple cells are selected all either horizontally or vertically neighboring each other a button to join the cells is enabled. If a merged cell is selected and nothing else, the button is changed to "Split Selected cells". If multiple cells are selected all either horizontally or vertically neighboring each other and containing an already merged cell the button is also labeled "Merge Selected Cells" and expands the area of merged cells. If at least one none neighboring cell or only one cell are selected, the button is greyed out. A double click on the intersection of the row and columns header (most open left "cell") selects all cells, a second double click deselects all and leads back to the settings page of the table.

Kergomard, Stephan [skergomard], 24 Jun 2020 - Question: Do we want a "Deselect" button or is the cancel button or the Click on the interesection of row and column headers to Deselect all enough? We could also rename the "Cancel" button to "Deselect all".

3.3 New User Interface Concepts

If we can move all the advanced options to a modal, we would need a new type of modal.

4 Technical Information

{The maintainer has to provide necessary technical information, e.g. dependencies on other ILIAS components, necessary modifications in general services/architecture, potential security or performance issues.}

5 Privacy Information

No new information is collected, processed, or shown. Thus this feature has no privacy implications.

6 Security Implications

No security implications

7 Contact

8 Funding

If you are interest in funding this feature, please add your name and institution to this list.

  • …

9 Discussion

JF 15 Oct 2012: We appreciate the idea and schedule it for 4.4.

JF 22 Nov 2012: We discussed the topics again today. Point 2 should be implemented with a minimum width/height for the cells. Point3: After creation of an "extended table" the properties screen should be displayed.

ILIAS_LM, 2013-03-18:
The PH Zürich would be interested in partial (?) funding, but purposes to rethink the whole concept of creating a table. The process of creating and filling should get more comfortable. Maybe we should talk about this.

Matthias Kunkel, 18 Oct 2013: Postponed and unscheduled due to missing funding.

Alex Killing, 13 Apr 2014: I still support the idea. All cell properties subtabs should be integrated into one screeb that uses Javascript to mark cells or cell regions.

Matthias Kunkel, 13 Apr 2014: I support this request, too. Based on the recommendations by the maintainer and the head of development I schedule the feature for 4.5.

JF 14 Apr 2014: Alex will update the description based on the discussion and reschedule this topic before implementation.

Matthias Kunkel, 26 Oct 2014: Postponed due to missing funding / ressources.

Mirco Hilbert, 31 Oct 2014: I also appreciate the request and made a mock-up for Point 2:

before
after

Killing, Alexander [alex], 4.7.2020: I think we need another VC for this, especially the edit screen (currently including add-actions) needs a small discussion imo.

Kunkel, Matthias [mkunkel], 14 JUL 2020 : Just some questions and remarks:

  • Tables should always have a style - like other elements, too. Otherwise it is not possible to control how new tables look like by default (we also have a 'standard' paragraph style at not a 'None' setting for it).
  • Can we change the label "Paste from Excel" to a less Microsoft-related one? How about "Paste from Spreadsheet"

Samoila, Oliver [oliver.samoila], 20 JUL 2020:

  • Ad1) "Standard Table" is defined as the style class of the table. (MockUp #3 and #5).
    The style "None" is selected for the table cells. Here I consider this to be a useful choice of language. Because the cell style standard could vary from table style to table style. "None" does not describe a special formatting. Is that plausible from your point of view?
  • Ad 2) I would like to completely abandon the term "spreadsheet" because "calculation" is associated with expectations that cannot be fulfilled in the data tables of ILIAS. »» "External table data" ?

Seiler, Yvonne [yvseiler], 20 JUL 2020: I would suggest an alternative to the modal, where you specify how many columns can be added: From my point of view, the content area should only offer "Insert 1 column/row before/after" and not "Insert columns/rows before/after".

Explanation

  1. you wouldn't have to switch to a modal to add 1 column
  2. you can add several columns/rows to the table at once via Advanced Settings.
Additionally I would recommend to change the order of actions to add columns/rows: "Before" before "After". This is because "After" is always linked to "below" in (at least my) mental model.

JourFixe, ILIAS [jourfixe], 20 JUL 2020 : We highly appreciate this suggestion and schedule the feature for ILIAS 7 with the following changes:

  • Instead of "Paste from Excel" we use a less MS promoting label (but not 'Spreadsheet'), e.g. "Paste Data from Table".
  • Default style of a new created table is always "Standard Table".
  • Currently assigned cell format is always shown, e.g. 'Cell1' (or Zebra1 for zebra tables).
  • Positioning of action 'Add Before' before 'Add After'
  • Advanced Settings screen has to have also all settings from Basic Settings.

Samoila, Oliver [oliver.samoila]: Due to missing time and financial resources the data table could not be completely implemented according to the feature request. However, it was not an option not to further develop the data table at all, as there are parallels with other page elements - for example, the input and formatting of texts in the cells.
The approval should indicate which developments have been made. Furthermore, the suffix "Part 1" will be added to the feature request and all pending developments will be suggested again for ILIAS 8.

JourFixe, ILIAS [jourfixe], 09 NOV 2020: Splitting-up development of feature is accepted. Please indicate which features made it into ILIAS 7 (section 10 Implementation) and which will be realised with ILIAS 8 (on a new feature wiki page).

10 Implementation

Test Cases

Test cases completed at 12 NOV 2020 by Zenzen, Enrico [ezenzen]

  • C464: Datentabelle einfügen
  • C42475: Daten zu einer Datentabelle hinzufügen
  • C42477: Spalten und Zeilen im Bearbeitungsmodus hinzufügen
  • C5202: Datentabelle aus Excel einfügen
  • C42460: Datentabelle nachträglich bearbeiten

Approval

Approved at 12 NOV 2020 by Samoila, Oliver [oliver.samoila].

Due to missing time and funding not all features at the data table could be addressed with ILIAS 7.

  • The creation process and editing still takes place in the content area – not in the editor slate
  • Column and row dropdowns are converted into wrapped KS elements
  • Editing the table supports AutoSave
  • The formatting and control of the cell contents is handled out in slate.
All further developments that have not yet been implemented will be suggested for ILIAS 8.

Last edited: 16. Nov 2023, 17:00, Tödt, Alexandra [atoedt]