Feature Wiki

Information about planned and released features

Tabs

Page Editor » Data Table Editing » Part II

Page Overview

[Hide]

1 Initial Problem
2 Conceptual Summary
3 User Interface Modifications
- 3.1 List of Affected Views
- 3.2 User Interface Details
- 3.3 New User Interface Concepts
- 3.4 Accessibility Implications
4 Technical Information
5 Privacy Information
6 Security Implications
7 Contact
8 Funding
9 Discussion
10 Implementation

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

1 Initial Problem

With ILIAS 7 we have made the first important steps to transfer the page element "data table" into the new page layout (since ILIAS 6).
All pending developments and other improvements are now to be processed.

2 Conceptual Summary

Events in the Slate:

Minimize the settings on the create screen in Slate.
Table Properties are shown in Slate (Advanced Settings in Content Area (aka "Inner Content" | fka. "Underworld"))
Cell Properties are shown in Slate (They will show after after selecting one or more cells, rows or columns. There are no advanced settings for cells)
Format Options of Cell Content are shown in Slate
Actions to Cells like merge or unmerge (After selecting one or more cells, rows or columns)
AutoSave is used in Editing Cell Content and displayed in Slate like in Text Editing.
The form for pasting tables is renamed to “Paste by spreadsheet | Einfügen aus Tabelle”

Presentation of the table:

Always show the table using the full content area, when editing it. (No surrounding page elements are shown)
Just as the real background is always displayed when editing text in the page element “Text” (since ILIAS 7), the correct formatting of the cells should also always be displayed when editing cell content. This concerns for example (!) background color, padding of the text within the cell, alignment of the text within the cell, ... and others.
- Killing, Alexander [alex], 3 Aug 2022: This will only work with several limitations, since the HTML structure differs even more from the final rendering compared to the paragraph editing, since the editor sits in an iframe and contains a DIV and the iframe itself will be emebbed in the TD of the table. I will spent a around a day on getting something suitable, but this will never be perfect, so I won't fix all differences that may occur.

Creation of a new table:

Default style of a new created table is always "Standard Table". The goal is the reduction of manual parameters
To simplify the cration of a header row a setting "Has Header Row" is created as simple checkbox. The box is checked per default and is used for one header row. Additional formatting needs to be done through the Advanced Settings or the Settings of the table cells or row(s).

Additionally:

Advanced Settings screen has to also contain all settings from Basic Settings in Slate.
If only one style class exists for tables, then the key-value pair is not displayed in the form. Affects Slate and Advanced Settings.

3 User Interface Modifications

3.1 List of Affected Views

Page Editing
Data Table Editing
- Data Input
- Table Properties
- Cell Selection
- Cell Properties

3.2 User Interface Details

3.2.1 Create Data Table Part I

Create a Data Table: The create menu seen on this MockUp, depends on the acceptance of a correpsonding UI element

3.2.2 Create Data Table Part II

The Create Dialog is kept simple. The checkbox "Has a Header Row" is selected by default. "Create Manually" and "Paste from Excel|Spreadsheet" are defined as two different creation modes in separate form.

3.2.3 Create Data Table Part III

3.2.4 Data Table Editing » Table Properties

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 table 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. (Note: The screenshot shows Actions "Select Row/Column" which are not specified here, row/column selection belongs to the "Cell Formatting" screen instead.

3.2.5 Data Table Editing » Table Properties » new Column/Row

Modal to specify the number of columns (rows) to be added. Set to 1 by default

3.2.6 Data Table Editing » Table Properties » Advanced Setting

The advanced settings are opened in the content area (aka inner content). 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.

@JourFixe:
We are also asking ourselves whether the functions for Header and Footer Rows and Columns are needed. Does it need more than one Header & Footer Row and more than one Header & Footer Column? Does it need a Header Row & Column at the same time as there is a Footer Row & Column?

If the answers are "No", the functionality and the form could be reduced:

Special Row : None | Header Row | Footer Row [Dropdown].
Special Column : None | Header Column | Footer Column[Dropdown]

@Stephan und Alex: gebt vielleicht zu 1 und 2 noch ein Feedback:

Die Lösung mit "Header-Row ≠ 1 führt zu unchecked Checkbox" halte ich echt für schwierig.
Wenn der Vorschlag an den JourFixe Zuspruch fände, dann würde ich die "Special Row" und "Special Column" in das Slate ziehen.

3.2.7 Data Table Editing » Input

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 – also for using tabbing – this is current behavior. A single click on a row or column head shows a dropdown with the option to add or move the column/row. A click on Save and Return brings you back to the overview over the table and the settings for the table.

Alternative for Buttons

3.2.8 Data Table Editing » Format Cells Part I

A click on ViewControl Mode "Format Cells" changes the modus to allow selecting cells for formatting. A cells can be selected by clicking on it. Clicking on a selected cell, deselects the cell. A click on the row or column head selects the corresponding row/column. A click on the table origin select all cells.

3.2.9 Data Table Editing » Format Cells Part II (old version,see 3.2.10)

Once at least one cell is selected the "Cell Properties" are shown in the slate. If multiple cells are selected all either horizontally or vertically neighboring each other a button to merge 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. It is not possible to select any cells wildly (using cmd or strg). Only cells in a rectangular structure can be selected. A click on the intersection of the row and columns header (table origin) selects all cells, a second click deselects all cells. Multiple cells can be selecting by clicking a first cell and then clicking a second cell holding shift. This selects all cells between the two. The same can be done by clicking on a column or a row header and then clicking on another column or row header while holding shift, thus selecting all columns/rows in between.

Killing, Alexander [alex], 3. Aug 2022: Merging cells will always only keep the content of the top/left most cell.

3.2.10 Data Table Editing » Format Cells Part II, Version 22 Mar 2023 (Updated according to JF 17 Apr 2023)

Change to 3.2.9: (a) We cannot offer all input fields for style/width/alignment at once directly, since this would not allow to enter only one of these properties (note that e.g. width must use an empty value to re-set the width to a "no value"). This is why we need checkboxes like above to indicate which properties to be set. (b) I recommend to offer the top buttons for finishing and switching the table/cell mode above the form, since this allows to switch to the other screen AND to end the editing directly. We could abandon the "Cancel" buttons at the end of the forms this way and offer all navigation within the context. The "Cancel" buttons do not really tell the user its targets.

3.3 New User Interface Concepts

No single new elements are introduced with these improvements, however the orchestration of KS and legacy elements being used should be checked for accessibility issues (see next chapter).

3.4 Accessibility Implications

The table editor uses some standard UI elements (Buttons, Dropdowns, Forms (KS/Legacy)) which should be ok (on the level they are in general). However cell selection and also the process of switching focus between the slate and the content itself needs investigation from the accessibility point of view. Also the table structure in the content area itself.

4 Technical Information

No special technical issues.

5 Privacy Information

For exisiting PRIVACY.md, see https://github.com/ILIAS-eLearning/ILIAS/blob/trunk/Services/COPage/PRIVACY.md

This feature will not implement any privated related changes.

6 Security Implications

No security implications

7 Contact

Idea / concept: Kergomard, Stephan [skergomard] & Samoila, Oliver [oliver.samoila] in the context of the ILIAS Page Editor Revision Project.
Maintainer: Killing, Alexander [alex]
Implementation of the feature is done by: {The maintainer must add the name of the implementing developer.}

8 Funding

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

ILIAS.nrw

More Informations: Page Editor Revision - Step 2 (Crowdfunding for ILIAS 8)

9 Discussion

Killing, Alexander [alex], 17 Mar 2021: I support the general idea. I am not sure if commands like "Merge Cells" should go to a property form slate (last screenshot). I would reconsider the use of a toolbar on top of the table, since this is a common pattern in ILIAS screens (e.g. select things in main screen, perform an action provided in a toolbar or table header, e.g. repo manage screens, tables, ...). I know this reopens also the discussion around the multi actions of the page itself. But a "sticky" toolbar (stays on scrolling) would allow us to keep the user interaction always in one screen area.

Kunkel, Matthias [mkunkel], 20 MAY 2021 : If I understand the screenshots above correctly, moving of rows and columns can only be made one by one. This would make bigger rearrangings of columns / rows a bit complex and user-unfriendly. How about adding an additional view where one could change the order by rows (and alternative by columns) with number inputs. And if you work with two tables with same number of columns, cutting and pasting of rows from one table to another would be a really hugh improvement of usability.

Page Editor Revision Working Group, 10 JUN 2021: We see the need mentioned by Matthias for a better support to rearrange rows or columns. We decided to tackle this in a separate feature request for ILIAS 8 to present this FR at the next JF and not to depend from the conceptual work on this new request. Instead of resorting by number inputs, we suggest to offer copy and paste of multiple rows and columns. Matthias will create the FR "Page Editor » Data Table Editing » Rearranging Rows and Columns".

JourFixe, ILIAS [jourfixe], 14 JUN 2021: We highly appreciate this suggestion and schedule the feature for ILIAS 8.

ad 3.2.6: We would like to keep the option of adding multiple header and footer rows and columns. The checkbox "Has a header row" should be tackled when one or more header rows exist.
The input for table width (as well as all other width inputs in the IPE) should have a byline that explains what width inputs are accepted (px and percentage). Matthias will offer an example.
We ask the Page Editor Revision group to present a general pattern for the header of Advanced Settings forms (the current example on the mock-up in 3.2.6 is irritating. These are not the settings of an Advanced Table but the Advanced Settings of a Data Table. Question: do we need to mention the context? And if yes, how?

Killing, Alexander [alex], 3 Aug 2022: I added remarks in section 2 (limited matching in presentations) and 3.2.9 (merging behaviour).

JourFixe, ILIAS [jourfixe], 22 AUG 2022: We highly appreciate this suggestion and schedule the feature for ILIAS 9. Please add a byline under the input for "Paste Content from a Spreadsheet" to clarify what is possible here and how it works. Once the implementation is ready we can check if other bylines are necessary to understand the possible functions of the data table editing.

Killing, Alexander [alex], 22 Mar 2023: I would like to discuss the development issue described under 3.2.10.

Seiler, Yvonne [yvseiler], 03 APR 2023: Depends mockup under 3.2.10. I'm having a bit of trouble understanding the three buttons "Merge Cells", "Set Properties" and "Cancel". When can "Merge Cells" be executed (in the screenshot it is deactivated)? Depending on what happens, when a user clicks on iht, does it make sense to place the button at another place, e.g. at the properties or as a third ViewControl mode or at top of the form?

Mela, Alix [ILIAS_LM], 03 APR 2023: I guess the Merge-button will be active, when more than 1 cell is selected – as you want to merge them. In the screenshot there is only 1 cell selected.

JourFixe, ILIAS [jourfixe], 03 APR 2023: We discussed the 'Edit Cell Properties' screen, see 3.2.10. We see three issues:

Do we want to show the 'Edit Table' and 'Edit Cell' buttons on this screen (and remove the Cancel button because it is no longer needed when a user can leave the screen by clicking on one of the buttons?
Do we want to have a separate view for 'Merge Cells' and remove the related button from the Edit Cell Properties screen to prevent user confusion?
Do we have another option instead of checkboxes to edit cell properties separately?

We postpone the decision for two weeks to give some time for finding reasonable solutions for all three issues. Dev issue will be set again on next JF agenda.

Yvonne suggests to discuss issue and find solutions at the next UI Clinic at 11 APR, 15.00-16.00 Uhr: https://docu.ilias.de/goto_docu_dcl_8186_166.html

Killing, Alexander [alex], 17 Apr 2023: My preference is: Show the view controls when editing cells, remove the cancel buttons, move merge to separate view, keep the checkboxes.

JourFixe, ILIAS [jourfixe], 17 APR 2023: We follow the preferences of the maintainer and accept to show the view controls when editing cells, remove the cancel buttons, move the 'Merge' action to a separate view in the view control and keep the checkboxes to select the properties.