Adding a new user interface¶

This section describes how to add a new user interface to be named <interface> (for example, “new”) in a package named <package>.

Makefile¶

In your project’s makefile, add the new interface to NGEO_INTERFACES. For example, to have two NGEO interfaces called “mobile” and “new”, set:

NGEO_INTERFACES = mobile new

Copy files from template¶

If you want a new mobile interface, get the default files as follows:

cp CONST_create_template/geoportal/<package>_geoportal/static-ngeo/js/apps/mobile.html.ejs \
  geoportal/<package>_geoportal/static-ngeo/js/apps/<interface>.html.ejs
cp CONST_create_template/geoportal/<package>_geoportal/static-ngeo/js/apps/Controllermobile.js \
  geoportal/<package>_geoportal/static-ngeo/js/apps/Controller<interface>.js

If you want a new desktop interface, get the default files as follows:

cp CONST_create_template/geoportal/<package>_geoportal/static-ngeo/js/apps/desktop.html.ejs \
  geoportal/<package>_geoportal/static-ngeo/js/apps/<interface>.html.ejs
cp CONST_create_template/geoportal/<package>_geoportal/static-ngeo/js/apps/Controllerdesktop.js \
  geoportal/<package>_geoportal/static-ngeo/js/apps/Controller<interface>.js

Edit interface files¶

In the file geoportal/<package>_geoportal/static-ngeo/js/apps/Controller<interface>.js, adapt the following lines:

...
exports.module = angular.module('App<interface>', [
...
exports.module.controller('<Interface>Controller', exports);
...

where <interface> (desktop in the original file) is the name of your new interface.

In the file geoportal/<package>_geoportal/static-ngeo/static-ngeo/js/apps/<interface>.html.ejs, adapt the name of the controller and the referenced css and js files to the new interface name:

...
<html lang="{{mainCtrl.lang}}" ng-app="App<interface>" ng-controller="<Interface>Controller as mainCtrl">
...
'interface=<interface>&' +
...

Add the new interface files to Git:

git add geoportal/<package>_geoportal/static-ngeo/js/apps/<interface>.html.ejs
git add geoportal/<package>_geoportal/static-ngeo/js/apps/Controller<interface>.js

Package file¶

Update the interface in your geoportal/<package>_geoportal/__init__.py file:

add_interface(config, "<interface>", INTERFACE_TYPE_NGEO)

The used method has the following API:

add_interface(config, interface_name="<interface>", interface_type=INTERFACE_TYPE_NGEO, **kwargs)

Where config is the application configuration object,

interface_name is the name specified in the interface table, also used to create the route path,

interface_type may be either INTERFACE_TYPE_CGXP, INTERFACE_TYPE_NGEO or INTERFACE_TYPE_NGEO_CATALOGUE. Constants available in c2cgeoportal.

Site-specific configuration¶

After rebuilding your project and verifying that the new interface has no technical errors, some site-specific configuration issues must be considered:

if you have V1 configuration and this has not yet been migrated to V2 configuration on this DB instance, it must be migrated now (if it is for test purposes, clone the DB first): run script docker-compose exec geoportal themev1tov2

set default theme of the new interface to the desired one (set “defaultTheme” in <interface>.html)

set meaningful starting zoom level and center coordinates of new interface, in <interface>.js

after rebuilding, to see the changes in the browser, you probably need to clear the browser cache and your URL parameters, and maybe in addition wait some minutes in order for the server-side to also be completely up-to-date.

Database¶

The administration interface gives access to an interface table that lists the available interfaces (or pages) of the application. The default interfaces are desktop and mobile. Add the name of your interface to the table. This can be done using the admin interface.

Checker¶

This section describes how to enable the checker for the new interface.

We suggest to add only the main checker in the defaults. It is what is done by default. In the all (vars.checker.all) section, check all the ngeo interfaces in standard and debug mode:

phantomjs_routes:
- name: <interface>
  params:
    no_redirect: "true"
- name: <interface>
  param:
    no_redirect: "true"
    debug: "true"

By default, the checker is enabled for the desktop and mobile interfaces.