JS API Proposal

Date	23 January 2017	Contacts	Francois Prunayre
Status	Call for vote	Release	3.4?
Source code	PR 1280
Supported by	metawal, ifremer

Proposal Type:

Type: UI
Module: UI

Voting History

Vote Proposed: 27 January 2017

The JS API mode allows to build a catalog application from a JSON configuration file and the load of the GeoNetwork JS library. The main goals are:

clarify UI configuration (by grouping and documenting all UI options)
be able to embed GeoNetwork in third party website like CMS.
add admin interface to customize UI options (and preview results)

The initial development was made for Ifremer to add GeoNetwork catalog and maps in Liferay & EZpublish. This proposal is supported by the Metawal project.

See video https://www.youtube.com/watch?v=pFyh8LZneIo

API configuration

A new setting ui/config for the main app configuration is added.

This setting is a JSON object that can be configured from the admin page. It defines how the main search application is. The default configuration is the following: https://github.com/SPW-DIG/metawal-core-geonetwork/blob/feature/jsapi/web-ui/src/main/resources/catalog/js/CatController.js#L41

JS client API can be embedded in an HTML page using the following snippet

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>GeoNetwork JS API testing page</title>
  <link href="/geonetwork/static/gn_search_default.css" rel="stylesheet" media="screen">
</head>
<body ng-app="gn_search_default" data-ng-controller="GnCatController">
  <div data-ng-include="'../../catalog/views/default/templates/index.html'" class="gn-full"></div>
  <script src="/geonetwork/static/lib.js"></script>
  <script src="/geonetwork/static/lib3d.js"></script>-->
  <script src="/geonetwork/static/gn_search_default.js"></script>
  <script type="text/javascript">
    // Init an application to search only for dataset
    var config = {mods: {search: {filters: {type: 'dataset'}}}};
    var module = angular.module('gn_search');
    module.config(['gnViewerSettings', 'gnSearchSettings', 'gnGlobalSettings',
      function (gnViewerSettings, gnSearchSettings, gnGlobalSettings) {
        gnGlobalSettings.init(config, 'http://localhost:8080/geonetwork/srv/', gnViewerSettings, gnSearchSettings);
      }]);
  </script>
</body>
</html>

This configuration is used in: