Show Advanced KnowledgeHide Advanced Knowledge

Page Editor » Page Editing

1 Initial Problem

The ILIAS Page Editor has not been adapted to the new general Page Layout of ILIAS 6.

2 Conceptual Summary

The objetive is to make editing cleaner and clearer: To remove options that overwhelm or distract users while editing and to focus on the current step. 

1. View: Presentation View

"Customize Page" sub-tab > "Edit Page" Button in Toolbar

• The tab "Content" of an object the subtab "Customize Page" is removed.
• Instead an "Edit Page" button is offered in a toolbar - below the tab navigation and above the content. The toolbar is located above any eventual filters. 
• This toolbar also contains "Add new object".

"Editing View" quasi-tab > "Edit Page" Button in Toolbar

• The quasi-tab "Editing View" is removed.
• Instead an "Edit Page" button is offered in a toolbar - below the tab navigation and above the content.

2. Step: Evoke Page Editor

The pattern for starting (and ending) the editing process is unified: Clicking on "Edit Page" button in Tool bar. 

1. User clicks on the "Edit Page"-button in Toolbar.
2. ILIAS opens Page Editor
   • Slate shows Blank Screen
   • Main area shows a Create button
3. Users finishes Page Editing by clicking on "End Editing"-button in Slate.
4. ILIAS presents Content- or page tab.

3. View: Page Editing 

To afford better focus on the task at hand the following elements are removed from the main area:

• tab navigation » Clipboard and History get in an Action Menu in Slate. Other Special Tabs like in Wikis also. Preview is omitted.
• top actions » omitted
• Multi-Actions at the bottom » calling by double click on a first Page Element in Slate
• Edit Mode Options (Deactivate Media, Deactivate HTML Rendering, Activate Form Mode) » omitted
• Note on the Processing Lock » Transferred to Blank Slate.

4. Step: Insert Page Element

When creating a page element, the corresponding forms are displayed in the slate.
A representation / symbol of the page element is displayed in the main area. Add buttons are not available at this time.
The creation/editing of the page element is finished with the submission of the form. 

The general idea for inserting page elements is that the settings are moved into the slate. 

1. User clicks on Create Button in Main Area
2. ILIAS presents Create Menu. 
3. User selects Type of Page Element in Create Menu
4. ILIAS presents settings of page element in the slate. ILIAS shows a representation of the selected element in the Main Area.  
   • For each page element the specifics are described in separate Feature Requests.
   • For some page elements there are many settings. Many Settings are separated into 'immediate settings' and 'advanced settings'.
     • 'Immediate settings' are presented in the Settings Tool.
     • 'Advanced settings' are one click away - presented either in Setting Screen in Main Area or a Modal. 
5. User operates settings, types input, uploads content etc. in the form in the Settings Tool or in Form in either in Setting Screen in Main Area or a Modal.
6. User saves. 
7. ILIAS presents newly added page element in Page Editing view.

5. View: Page Editing

See 3. 

6. Step: Edit Page Element

Once a page element was created, it is presented in the main area. In some specific page element the creation settings in the Settings Tool differ from the the settings available for editing said page element. The specifics are dealt with in dedicated feature requests. 

1. User clicks once on an existing Page Element. Functions such as links or pop-ups are not available when clicking on the Page Element.
2. ILIAS presents the form in the Settings Slate.
3. User changes settings, types or removes input, uploads other content etc. in form in Settings Tool or in Form in Setting Screen in Main Area.
4. User saves.
5. ILIAS presents edited page element in Page Editing view. 

Other 

Use other functions that belong to this page.

1. Click Action Menu in Slate, which contains History, Clipboard an specific object type screens
2. Selected Action shows related Content in Main Area. Other visualizations are discussed in separate requests.

3 User Interface Modifications

3.1 List of Affected Views

All Screens which the ILIAS editor is already used. The ILIAS Page Editor is used for example in: 

• pages of ILIAS Learning Modules, pages of Wikis or definitions of Glossaries,
• Content-tabs of categories, courses, groups, folders, content pages and others.
• Edit-Page-tab in Tests

3.2 User Interface Details & Rules

Basic statuses of the editor

The editor can be in one of two basic modes.

1. EITHER PAGE EDITING the content area is active and you can edit the content of the page, i.e. add, move or delete elements. Again, this can be one of two modes:
   • an element has been double-clicked, it is highlighted and actions can be performed on this element - using the multiple actions.
   • No element in the content area was selected for editing, no element is highlighted.
2. OR ELEMENT EDITING here works on a single element, after a single click on this element, and one of the following two areas is active:
   • the Settings Tool in Slate or
   • the Settings Screen in the main area.

Create Button / Hinzufügen-Button

1. The Create Buttons are only visible in the page editing.  
2. The Create Buttons are not available during element editing.

Create Menu / Hinzufügen-Menü

1. The element type to be created is selected in the Create Menu.
2. After copying & cutting page elements, "Paste" is the first entry.

If necessary, a KS-Element Drilldown must be extended. This is currently not in the project scope of this revision for ILIAS 7, but for ILIAS 8.

Settings Tool / Einstellungen-Tool

1. Forms in the Settings Tool correspond to the mobile view of forms. Forms are therefore single-column, the identifier is located above the options or inputs belonging to it.
2. All forms in the Settings Tool have a heading for the entire form. Nomenclature [Action] + [Type of element]. 
3. After selecting the element type, a representation/symbol of the element type is displayed on the right side of the main area. 
4. Saving is only offered in the Settings Tool. The Save / Cancel button is sticky and only displayed at the end of the form. The settings are then applied to the element in the main area. When creating a new element, after saving the representation/symbol is replaced by the real element with the chosen settings.
5. Selections in Tree (Repository Picker) are not made in the Settings Tool. Selections in Tree are made in Modals or in the Settings Screen in the main area.
6. Some types of page elements have multiple sources when added. These sources are each represented in the settings slate in a separate accordion. ´

Settings Screen / Einstellungen im Hauptbereich

1. For the complex or subordinate page elements, the forms remain in the Settings Screen in the main area for the time: This means the form that is shown in the content area and only offers a "back". In a further step we want to transfer these legacy contents to other views. 
   
2. If pure legacy content is displayed, no Settings Tool will be opened. If a user actively clicks on the blue tool tile, the Blank Slate is opened. 
   

Multi Action Slate / Mehrfach-Aktionen-Tool

1. The Multiple Actions Tool becomes visible after a first page element has been selected by double-clicking on it. Multiple actions are displayed in the Slate.
2. It contains the known actions: Delete, Copy, Cut, Deactivate/Activate, Format and Select All.
   • Delete: All selected elements are deleted after a confirmation prompt. It does not matter whether only one or several elements are deleted: The same type of query is always made. 
   • Copy: All selected elements are copied to the clipboard and remain on the page. 
   • Cut: All selected elements are transferred to the clipboard and removed from the page.
   • Enable/disable: All selected elements are set to the other status.
   • Formatting: The "Select Paragraph Format" drop-down is displayed in the Settings Tool.
   • Select All: All elements of the pages are selected.
3. After selecting the Copy or Cut action, the topmost entry in the Create Menu is Paste.

See Details ins separate FeatureRequest: Page Editor » Multiple Actions to Page Elements

Single Click & Double Click

In general:

1. A single click on an Element opens the Element Editing.
2. The double click selects elements for multiple actions. 

Click behavior (single click & double click) n the process of marking page elements (multi-actions):

• With the first double-click, the user goes into multi-selection mode, the known multi-actions are displayed in the slate.
• The Multi-Action-Slate also contains a button for "Undo selection". If it is used, all selections are cleared and the blank slate is shown.
• If the last selection is cleared manually, the blank slate is shown.
• Within the multi-action mode, a single click causes the Selections not lost.
• And single clicks do not start the element editor.

In the blank slate there is a shy button "You can also select everything" at the end of the section about multiple selection.

Drag & Drop

See Details ins separate FeatureRequest: Page Editor » Drag & Drop

Style

1. Style sheet for the object should only be changeable via the settings tab of an object and no longer in the page editor.  At this position local stylesheets can be created, changed and deleted.

3.3 New User Interface Concepts

We use Legacy Toolbar. Add New Object and Edit Page become sticky.
We use UI: Form in Slates. With the difference that buttons are only at the bottom.

4 Technical Information

The page editor should be refactored completely. There is already a technical prototype, however this will be modified according to other client side guidelines developed over the year.

5 Privacy Information

No personal data is stored or processed to implement this feature. 

6 Security Implications

We do not see any changes for special security issues.

7 Contact

• Author of the Request: Samoila, Oliver [oliver.samoila], Zenzen, Enrico [ezenzen]
• 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 feature, please add your name and institution to this list.

• …

9 Discussion

Kunkel, Matthias [mkunkel], 26 MAY 2020 : I have a few questions according element editing:

1. Am I right that it will be necessary in the future page editor to first double-click any page element before executing "Select All"?
2. Have you thought about selecting multiple elements by hovering with mouse pressed as an additional option to quickly select elements?
3. Have you thought about supporting CUT, COPY and PASTE actions on selected elements by using keyboard shortcuts (e.g. X, C, V)?

Wessels, Karin [karin.wessels], 26 MAY 2020:

• Settings tool: The feature requests proposes a representation/a symbol of the element type in the main area. >> As there are several page elements whose appearance depends on the settings that have to be chosen in the settings tool itself: What about also mentioning the option of a "Refresh"-button (also sticky and at the end of the form, like "Save")?
• Single Click / Double click: I might be wrong and it might be only a "gut feeling" but I wonder if it should be the other way round >> double click opens the Element Editing, single click selects elements for multiple actions?

Seiler, Yvonne [yvseiler], 28 MAY 2020:

Many thanks for the feature request. In principle I support the revision.

About the structure of the request: It is a very complex request, I find it helpful to see the mockups in the explanation texts. Maybe this could be integrated into chapter 2 or merged into chapter 3.2 (i.e. not only text or same text next to mockup and below without but directly mockup + explanation text next to each other in the accordions). I think the article is difficult to grasp for people who were not in the project group.

Now to the content of the Reguest:

• Chapter 2, Step 4: Suggested to change the Advanced Settings to a modal. I think this is not a suitable solution, because a modal is something that "interrupts" the process. But Advanced Settings are something that can be selected additionally and optionally. It would also reduce the possibility to see the changes/effects of the Advanced Settings directly in the Main Area. I would rather see Advanced Settings as an option that changes e.g. the content of the slate or shows the Advanced Settings under the normal settings (e.g. click on a link or open an accordion).
• I still don't understand why the "Save" button is at the very end of the form. What are the reasons? Does Sticky think it's some kind of floating button or is it colored "green" as the primary button?
• From my point of view the "Single/Double Click" was chosen so that you can click into a text section with one click and directly edit the text. I think this is right here. Double click is already an established pattern to mark the individual page elements, so I would not change the behaviour here. However, Matthias Kunkel's objection is correct that the multiactions in the current version only become visible when at least 1 element is selected. Select all can only then be selected. This could be a disadvantage compared to the current 5.4 version, but I would rather accept this than that the multiactions are not available in the slate.

JourFixe, ILIAS [jourfixe], 08 JUN 2020 : We highly appreciate this suggestion and schedule the feature for ILIAS 7.

• The questions concerning shortcuts for copy, cut and paste shall be discussed in the related feature request: Page Editor » Multiple Actions to Page Elements.
• All existing tabs that are not related to the page editor but to the component (e.g. What links here?, Print View, Statistics) should be kept in the tab navigation, while the Style settings should be moved to the Settings tab and the History and Clipboard will be moved to the Actions dropdown of the Page Editor.
• The discussion of a floating Save button should be discussed separately to reduce the complexity of this request.
• The form-based editing mode will be abandoned.
• The setting for activating/deactivating media objects will be moved to the Actions dropdown of the Page Editor.
• The option of a non-WYSIWYG mode for text editing will be discussed in the related FR Page Editor » Text Editing.

JourFixe, ILIAS [jourfixe], 28 SEP 2020 :

• Concerning posting by Oliver at 28 SEP 2020: We accept the suggested ViewControl to distinct between 'editing' mode and 'selecting' mode.
• Concerning posting by Enrico at 15 JUL 2020: We agree with the suggested changes for create buttons, page structure and background of elements. Hover behaviour of elements (top 3) is accepted as well but will be evaluated in a life system to make a final decision if all parent elements are marked or only the first parent one.

JourFixe, ILIAS [jourfixe], 12 OCT 2020: We accept the introduction of a placeholder in the slate to prevent an empty slate in certain editing workflows. This "workaround" will disappear with ILIAS 8 when the editing process in the page editor is extended.

JourFixe, ILIAS [jourfixe], 09 NOV 2020: Thanks for this long list of usages of the page editor. In case we will find screens where a toolbar is still missing, a toolbar can be added also in the beta phase of developing ILIAS 7. And to offer full transparency also to those that haven't been involved in the Page Editor Revision process we will create a distinct feature request "Move Add New Item to Toolbar and into Modal" and accept it for ILIAS 7.

10 Implementation

Test Cases

Test cases completed at 2020-11-12 by Tödt, Alexandra [atoedt]
View 1: Presentation View
Move Add New Item to Toolbar was moved to 8 in the very last Jour Fixe of this season 
View 2: Evoke Page editor 

• 42447 : Bearbeitungsmodus öffnen
• 42466 : Bearbeitungsmodus beenden

View 3 Page editing

• 475 : Verlauf: Versionen einer Seite vergleichen
• 42462 : Bearbeitungssperre in Administration aktivieren

View 4 Insert Page Element 

• 344 : Text einfügen
• 351 : Medienobjekt per 'Datei hochladen' anlegen
• 42448 : Video per URL anlegen
• 42451 : Medienobjekt aus Medienpool einfügen
• 463 : Block einfügen

View 5

• see 3

View 6 Edit Page Element 

• 42454 : Bild bearbeiten
• 42456 : Video bearbeiten
• 42457 : Audio bearbeiten

Approval

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

---