Refactoring editor

Date	2013-10-22	Contacts	François Prunayre
Status	On going	Release	2.12
Resources	Available (Planned for January)	Ticket
Source code	https://github.com/geonetwork/core-geonetwork/tree/refactor_editorui
Funding	Mainly supported by GéoSource project

Overview

This proposal focus on creating a metadata editor based on AngularJS. The core principles of the editor will be preserved but the new implementation will focus on:

make editor configuration easier
make XSLT easier (eg. do not mix CSS, JS, better template/file name, use functions and namespaces)
use HTML5 form field type (eg. number, date)
rely on the browser side for widgets (eg. duration, bounding box)
avoid unnecessary editor complete reload (eg. while adding attributes)
add the capability to edit an element which does exist in the XML document or is not direct child of existing element
add a cancel action which reset all editing actions

draft

Proposal Type

Type: User interface
App: GeoNetwork client / Editor

Voting History

Proposal

Metadata editor is based on:

An XML document for the form configuration. The configuration define per schema the view, the tabs for the view and the matching elements to display
XSLTs for building the form from the configuration and dispatching to schema
Client side Angular directive to build custom widgets (eg. bounding box editor, duration directive )

Metadata editor routing:

catalog.edit# (default) = Start the creation wizard
catalog.edit#/{metadata_id}/{tab}?menu
menu: Display or not the view switcher menu

Metadata creation wizard

draft

New dependencies

The following librairies are added:

OpenLayers3
typeahead.js https://github.com/twitter/typeahead.js
tagsinput http://timschlechter.github.io/bootstrap-tagsinput/examples/bootstrap3/

The following browsers are tested:

IE9+,
Firefox,
Chrome

Note: IE6/7/8 not supported.

The editor configuration:

An XML document define the editor configuration:

list of views and their tabs,
section (ie. fieldsets) and fields to display
fields type (eg. select, textarea, or Angular directive)
elements to be displayed as block (with a fieldset)
multilingual elements (ISO19139 only)
... (see XSD schema & documentation)

Example configuration for ISO19139

The editor form creation sequence

The process is the following:

a) Open the editor with catalog.edit service. Service: catalog.edit?id=<metadata_id>&tab=<tab_id>

xslt/ui-metadata/editor.xsl is used and load the page layout

b) The EditorController load the form for the requested metadata or open the creation wizard if no record Service: md.edit?id=<metadata_id>&tab=<tab_id>

/xslt/ui-metadata/edit/edit.xsl : build the root element common to all schemas
/xslt/common/profiles-loader.xsl : load all schema XSLT's dispatcher
Call render- template
{schema}/layout/dispatcher.xsl :
load the editor configuration the schema (cf. config-editor.xml)
call the "menu-builder" mode for creating the view/tab navigation
find a match for the tab or fallback to default mode
call the "form-builer" mode
/xslt/ui-metadata/form-configurator.xsl :
from the tab configuration, search the matching nodes and create related section, fieldset, field by dispatching to the schema mode (eg. "dispatch-iso19139" then "mode-iso19139")
{schema}/layout/layout.xsl : Define for "mode-iso19139", the way elements are rendered (eg. fieldset for identification)
/xslt/ui-metadata/form-builder.xsl : Build the form element (ie. input, select, ...), Complex element may also link to a directive to use (eg. bounding box editor). The widget is then initialized in the browser.

Editor services:

md.edit.save: save record in the editing session
md.edit.save.close: save and close

Editor interface

Editor navigation

Editor tab switcher menu: All views are accessible using the toggle button on the left. Tab order is defined in the editor configuration. When switching from one tab to another, the record is saved. When a view contains lots of tabs, some tabs are less used than other. Those tabs could be grouped in a "more" button like in the advanced view. Below is the tabs for the advanced view:

advanced view menu

The navigation menu allows control on:
the view mode
enable detailed field visualization
enable tooltips

Choose view

On the left side, the scoll spy display the main section of the document and allows to quickly navigate from one to another. Current sections in the view are highlighted:

Scroll spy

Add and remove elements

For each elements, buttons allow to add or remove them (according to the standards cardinality). The editor highlights elements to be removed. The form fields about to be removed by a delete button are highlighted in red.

Highlight before remove

For some fields (like extent), more advanced controls are available.

Ordering elements

For each elements, buttons allow to change the order of each elements as defined in the standard used.

Ordering elements

Editor widgets

Multilingual editing: When an ISO19139 record is multilingual, the editor provide the capability to edit multilingual fields using 2 different modes:
A mode where all languages are displayed below each other for quicker edits. This mode could be enabled by default for some fields in the configuration (eg. title and abstract)
A mode where the editor choose the language to display and edit

Field suggestion

Editor field suggestions: The localization files for a schema define "helper" to suggest frequent values for the editors

Field suggestion

Keywords could be added as free text or from a thesaurus. When adding from a thesaurus, the list of available thesaurus in the catalog are available. Choose one on the list, to choose keywords from it:

Thesaurus selection

Once selected, search for keywords could be made using:

simple tags (default)

Keyword selection as simple tags

or multiselection list

Keyword selection

The keyword search is currently limited to the search in the user interface language. In some situation, you may try to edit a record in english with keywords in french. In that case, the list of keywords can't be modified and the content preserved in the metadata.

Prevent loosing keyword in multilingual context

Add contact from the contact dictionnary

Add contact

Add reference system from the EPSG database

SRS add

Country and language fields provide autocompletion (for ISO19139 and dublin core)

Country autocompletion

Language autocompletion

Editing attributes are displayed next to the related form field. Attributes could be more details about a field like a date or management attributes like nil reason.

Field suggestion