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 | ||
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
- move all editor configuration from JS or config-gui.xml to the database Settings table (eg. background map, projection list, default tab per schema)
- Type: User interface
- App: GeoNetwork client / Editor
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 )
- catalog.edit# (default): Start the metadata creation wizard
- catalog.edit#/{metadata_id}: Open the editor for this metadata (default view is defined in configuration)
- catalog.edit#/{metadata_id}/tab/{tab}: Open the editor for this metadata using a specific tab
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.
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 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 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:
- The navigation menu allows control on:
- the view mode
- enable detailed field visualization
- enable tooltips
- 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:
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.
For some fields (like extent), more advanced controls are available.
For each elements, buttons allow to change the order of each elements as defined in the standard used.
- 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
- Editor field suggestions: The localization files for a schema define "helper" to suggest frequent values for the editors
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:
Once selected, search for keywords could be made using:
- simple tags (default)
- or multiselection list
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.
- Add contact from the contact dictionnary
- Add reference system from the EPSG database
- Set geographic bounding box
The bounding box could be defined using 4 text inputs. A list of regions allows to easily choose a country and define the bounding box. The user can also draw a custom rectangle on the map. A projection list define the projection used for the text inputs in order to directly define coordinates in a projection the user know.
Bounding box could also be a point (eg. sea temperature profiles).
- Country and language fields provide autocompletion (for ISO19139 and dublin core)
- 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.
In the editor toolbar, editor can easily save, validate, cancel or close the current record.
When a save occur, the status message is updated.
The cancel button restore the changes to the point where you started the editing session.
If the editor tries to close or reload the browser tab, a confirmation is displayed in order to not lose changes.
When activated in the view menu, ...
... information about each sections or elements are displayed in the editor :
- Section help
- Help on a field when the element get focus
- textarea adjust automatically to its content
Validation is based on standard validation (XML schema) and schematron. The validation report display validation status for the current record.
The relation panel provides option to define links with other resources (eg. file for download, thumbnails, source dataset, feature catalog, ...)
More screenshots: https://drive.google.com/?tab=mo&authuser=0#folders/0BwyvNKYgG4ZWdFdIUlVlQXU1V0k
- How to inject client side widget (ie. directive) for schema plugins ?
- No options to change the group the metadata is in from the UI.
- François Prunayre
- Florent Gravin
- Etienne Taffoureau
- Grégory Delobelle
This work is mainly supported by the GéoSource project.