Page History

Story

...

Magnolia should let me navigate and browse my web site structure by using a mouse or , a keyboard .

Selecting, highlighting, selected for operations

A single item may be selected by clicking on it or selecting it by clicking the Enter key on the keyboard. If activated, the "Page details" display will then show additional details of the highlighted item (to be defined separately).

A row is also visually highlighted on mouse over or by moving on the item using the up or down arrow key. No page details of a highlighted item are displayed, however. This is to prevent the interface from changing too rapidly, to keep it responsive and to prevent high load on the server.

One or more pages may be selected for operations by checking a checkbox assigned to the page. A subsequently started operation (such as a delete or copy operation) will then be performed sequentially on any checked item.

Opening, closing folder item

A folder item is a regular item, which - in addition to its tasks defined by its type - contains other items. Folder items may be opened or closed by clicking on a visual indicator displayed right next to an item's icon (not shown in the mockup below).

When using a keyboard, clicking the right arrow key opens the currently highlighted folder item, expanding the tree view to also show its contained sub items. Clicking the left arrow key closes the folder item and thus collapses to view again to only show the folder item itself.

Open an item for editing or further inspection

and using a touch device.

In the site structure view, a tree is used to visualize the page hierarchy. I can select one or multiple pages and execute a action on them (such as deleting or publishing them). Some actions, however, are only applicable to a single, selected page, such as editing a page.

The view shows selected, common data of a page in the site structure view, such as its name, its navigation and page title, and allows me to edit it directly in the table.

Description of desired behavior

Magnolia offers to view the structure of a site in a tree view.

Browsing the site structure

Navigating the tree view showing the web site structure is handled in Navigating trees, while working with items in the tree is described in Focusing, selecting and opening items.

Selecting an item shows additional page details in a preview view. Focusing on an item for a longer time also causes the page details to be shown. An important element of the preview view is a thumbnail image showing a small rendering of the pageBy double-clicking an item or hitting the Enter key on an already selected item (- a second time, because you already hit it once to select it), a separate window opens, which shows an edit or inspection view of the item depending on the permissions of the logged in user.

Show, hide and rearrange table columns

All columns except the "Page name" (page URI) and the column containing the checkboxes can be visible or hidden. Additional columns not initially visible may be offered for display by the tree view.

Columns are shown in a configurable order, but the "Page name" and checkboxes column are exempt and remain fixed at their initial position.

When using the keyboard, the columns displayed can be selected by focusing on the last element of the header row, opening the column order and the hide/show settings of a column must be specified on a separate settings page still to be defined.

Requirements

Both input methods (mouse and keyboard) must be largely equivalent, mainly for accessibility reasons. But using the keyboard must also be regarded as the input method of choice for power users and thus must be fast and convenient for typical day-to-day operations.

The tree view must perform well even for very large sites. To achieve this, pages should only be loaded as they become visible. A visual indicator must make clear that additional data is being loaded from the network.

Likewise, items of a folder page (see "opening, closing folder pages" above), which will become visible by opening it, could already be preloaded in the background.

Open questions

Inline editing??

...

context menu and selecting the columns to be shown or hidden. The column order can't be rearranged by using the keyboard only.

No sorting or grouping

Since the main purpose of the site structure view is to visualize the page hierarchy, this view offers no options to sort pages e.g. by last modification date or page title, not any grouping options as the page list does.

Inline editing of page attributes

Some page attributes shown in the list or structure views may be edited directly within the view. Among these are the page URL, the page title and navigation title. To enter inline editing, select an item, then click or tap on an attribute (e.g. page title) again after a short delay (to avoid actually double-clicking it). The attribute you clicked or tapped on will then become editable.

When using the keyboard only, enter a special command to edit the first of all editable attributes. You may skip to a different item by repeatedly hitting the tabulator key and exit editing by hitting the escape key.

For a list of all commands defined, please see Usage summary#Inline editing in tree or list.

Showing errors or warnings

The page name is a mandatory attribute and only accepts a limited range of characters. If validation discovers that the input is wrong or missing, a validating message is shown.

For a description of how validation messages work, please refer to Showing validation messages in lists, trees and grids.

Inline editing restricted to simple attributes

Note that inline editing will be restricted to work for simple attributes only. While e.g. changing a page template in the structure view was possible in previous versions of Magnolia, it won't be supported in version 5. Changing a page template can be a complex operation and may require you to enter values for required attributes, both of which is not viable using inline editing. Complex page attributes thus may only be changed by actually editing the page properties in a dialog or by opening the page for editing.

The list of editable page attributes contains:

• page name/URI: mandatory, must not be empty, only accepts characters valid in a URI
• page title: optional, if empty, page name is taken
• navigation title: optional, if empty, page name is taken

Not editable are the page template, status fields, the author name and any dates.

Mockups

Browsing the structure