During the application development you will need to set some global parameters: application title, services paths, language, etc. Those parameters are configured into the application when angular bootstraps it.

Application configuration file

The file that contains the application configuration parameters is called app.config.ts and it is placed on the app folder. The content of this file is similar as the example below:

import { Config } from 'ontimize-web-ngx';
import { SERVICE_CONFIG } from './shared/app.services.config';
import { MENU_CONFIG } from './shared/app.menu.config';

export const CONFIG: Config = {
  apiEndpoint: 'https://try.ontimize.com/QSAllComponents-jee/services/rest',
  uuid: 'com.ontimize.web.quickstart',
  title: 'Ontimize Web QuickStart',
  locale: 'es', /* Optional */
  serviceType: 'Ontimize' | 'OntimizeEE',
  servicesConfiguration: SERVICE_CONFIG,
  appMenuConfiguration: MENU_CONFIG,
  applicationLocales: ['es', 'en'],
  defaultLocale: 'en',
  remoteConfig: { /* Optional */
    path: '/configPath',
    endpoint: 'https://try.ontimize.com/QSAllComponents-jee/services/rest', /* Optional */
    timeout: 60000, /* Optional */
    columns: { /* Optional */
      user: 'USER_', /* Optional */
      appId: 'APP_UUID', /* Optional */
      configuration: 'CONFIGURATION' /* Optional */
    }
  },
  bundle: { /* Optional */
    endpoint: 'https://try.ontimize.com/QSAllComponents-jee/services/rest', /* Optional */
    path: '/bundlePath' /* Optional */
  },
  startSessionPath: '/startSessionPath', /* Optional */
  permissionsServiceType: 'OntimizePermissions' | 'OntimizeEEPermissions', /* Optional */
  permissionsConfiguration: { /* Optional */
    service: 'permissions'
  }
};

The noteworthy parameters here are:

• apiEndpoint: The base path of the URL used by the application services.
• uuid: The application identifier, this is the unique package identifier of the application. It is used when storing or managing temporal data related with the application. By default is set as ontimize-web-uuid.
• title: The title of the application.
• locale: The language of the application specified by the country code (e.g. ‘es’ for Spanish, ‘en’ for English, etc.).
• serviceType: The service type used in the app by framework components that request data from server. You can specify Ontimize REST standard, Ontimize REST JEE or a custom implementation.
  • Not configured (by default): if you do not configure or specify this parameter, the framework configures Ontimize REST standard services.
  • ‘OntimizeEE’: string that configures Ontimize REST JEE services.
  • Custom class: a service class reference that extends OntimizeService or OntimizeEEService or implements the IDataService interface.
• servicesConfiguration: Object that contains the services configuration parameters. Learn more here.
• appMenuConfiguration: Object defining application menu structure. Learn more here.
• applicationLocales: Set of available locales for the application.
• defaultLocale: Default language if browser language is not found in application. This value must exist into applicationLocales.
• remoteConfig: remote configuration object. You can read more about this here.
  • path: remote configuration path.
  • endpoint: the base path of the URL used for the remote configuration requests. Default value is provided by apiEndpoint.
  • timeout: the timeout for the remote configuration requests.
  • columns: the remote column names.
    • user: the name of the column where the user name is stored remotely.
    • appId: the name of the column where the application identifier is stored remotely.
    • configuration: the name of the column where the configuration is stored remotely.
• bundle: bundle configuration object.
  • endpoint: the base path of the URL used in the remote bundles query.
  • path: bundle query method path.
• permissionsServiceType: The service type used in the app by framework components that request data from server. You can specify Ontimize REST standard, Ontimize REST JEE or a custom implementation.
  • Not configured (by default): if you do not configure or specify this parameter, the framework configures Ontimize REST standard services.
  • ‘OntimizeEEPermissions’: string that configures Ontimize REST JEE services.
  • Custom class: a service class reference that extends OntimizePermissions or OntimizeEEPermissions or implements the IPermissionsService interface.
• permissionsConfiguration: permissions service configuration object.

Package.json configuration

This file configures npm package dependencies and contains all of the scripts for the project and you have to replace the references of “ontimize-web-ngx-jee-seed” by the name of your project “your_app_name”

    
    {
      "name": "ontimize-web-ngx-jee-seed",
      "name": "your_app_name",
      "version": "1.0.0",
      "scripts": {
        "ng": "ng",
        "start": "ng serve --port 4299",
        "production": "ng build --aot=false --target -prod",
        "production-aot": "ontimize-web-ngx production-aot --project-name ontimize-web-ngx-jee-seed --href /ontimize-web-ngx-jee-seed/"
        "production-aot": "ontimize-web-ngx production-aot --project-name your_app_name--href /your_app_name/"
      },
    ..
      "dependencies": {
        ..
      },
      "devDependencies": {
        ..
      }
    }
    
  

Angular.json configuration

The file angular.json provides workspace-wide and project-specific configuration defaults for build and development tools provided by the Angular CLI.

You have to replace the references of “ontimize-web-ngx-jee-seed” by the name of your project “your_app_name”

    
    ...
    "projects": {
      "ontimize-web-ngx-jee-seed": {
      "your_app_name": {
        ...
          "serve": {
            "builder": "@angular-devkit/build-angular:dev-server",
            "options": {
              "browserTarget": "ontimize-web-ngx-jee-seed:build"
              "browserTarget": "your_app_name:build"
            },
            "configurations": {
              "production": {
                "browserTarget": "ontimize-web-ngx-jee-seed:build:production"
                "browserTarget": "your_app_name:build:production"
              }
            }
          },
          "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "ontimize-web-ngx-jee-seed:build"
            "browserTarget": "your_app_name:build"
          }
          }
          ....

      "ontimize-web-ngx-jee-seed-e2e": {
      "your_app_name-e2e": 
      "root": "e2e",
      "sourceRoot": "e2e",
      "projectType": "application",
      "architect": {
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "./protractor.conf.js",
            "devServerTarget": "ontimize-web-ngx-jee-seed:serve"
            "devServerTarget": "your_app_name:serve"
          }
        },
        ..
        }
    ...
    },
  "defaultProject": "ontimize-web-ngx-jee-seed"
  "defaultProject": "your_app_name
  ...
      }
    
  

Services configuration

If you indicate in the application configuration that the application should use OntimizeEE services (check serviceType attribute in the previous section of this page), you have to configure the service paths. For doing this OntimizeWeb uses the servicesConfiguration property from the app configuration file that must point to an object defined as in the example below.

In this object, the keys represents the different services names used in the application. Every service needs a path property where you must set the path of the service, excluding the URL configured in the apiEndpoint attribute of the application configuration.

export const SERVICE_CONFIG: Object = {
  'users': {
    'path': '/users'
  },
  'customers': {
    'path': '/customers'
  },
  'branches': {
    'path': '/branches'
  },
  'movements': {
    'path': '/movements'
  },
  'employees': {
    'path': '/employees'
  },
  'permissions': {
    'path': '/permissions/get'
  }
};

For clarification, if your apiEndpoint is the one in the application configuration example, OntimizeWeb will concat the apiEndpoint and the path of the service to build the URL for sending requests. For example : https://try.ontimize.com/QSAllComponents-jee/services/rest/customers.

Internationalization (i18) configuration

Ontimize Web providers the locale attribute to configure the language of the application, this attribute will be an identifier that refers to of user preferences as displaying dates, numbers, …, translation of words and in applicationLocales which configure the locale id availables in the language selector in <o-app-sidenav>. For more information see in OTranslateService.

Permissions configuration

The Ontimize Web application permissions are queried if the configuration file contains a valid permissionsConfiguration object. The service used for that is configured in the permissionsServiceType (using OntimizePermissions by default, following the same philosophy as serviceType attribute).

In the permissions section you can see which components can use permissions and its defition.

## OntimizeEEPermissions

For using the OntimizeEEPermissions service, the permissionsConfiguration configuration object must contain the service path defined in the SERVICE_CONFIG (defined in the previous section of this page).

...
  permissionsConfiguration: {
    service: 'permissions'
  }
  ...

Remote configuration

Some components in OntimizeWeb store the changes made by the user in local storage. This configuration may also be stored on a remote server in order to be loaded when the user uses the application in different browsers or devices.

For storing the user configuration remotely it is only necessary to add the remoteConfig object to the application configuration (see the example above). The path attribute is the only one that is mandatory, the other parameters have a default value as you can see in the example.

Read more about how to configure the remote configuration here.

Application menu

A lot of applications include a side menu for navigating through the different sections or performing actions. OntimizeWeb provides a prebuilt solution for this using the o-app-layout component and adding the menu configuration as explained below.

Menu configuration

The side menu content is built automatically using the appMenuConfiguration property defined in the application configuration file (app\app.config.ts). This property refers to an array of MenuRootItem objects defined in a separated file (app\shared\app.menu.config.ts) where each object defines a menu entry.

There is different types of MenuRootItem depending on the task they are defined for. The two main menu item types are the MenuGroup and the MenuItem.

  {
    id: 'views', name: 'VIEW', icon: 'remove_red_eye', opened: true,
    items: [
      // Include here the child menu items
    ]
  }

In addition to the attributes of the MenuItem, you can include other attributes depending on what kind of menu item you want. All the following menu item types extend from the MenuItem, all its attributes are inherited.

  { id: 'customers', name: 'CUSTOMERS', tooltip: 'CUSTOMERS_CONTENT', route: '/main/customers', icon: 'people' }

  function myFunction() {
    // do whatever you want
  }
  ...
  { id: 'action', name: 'action', icon: 'autorenew', action: myFunction }

  { id: 'lang_es', name: 'LOCALE_es', icon: 'language', locale: 'es' },
  { id: 'lang_en', name: 'LOCALE_en', icon: 'language', locale: 'en' }

  { id: 'logout', name: 'LOGOUT', route: '/login', icon: 'power_settings_new', confirm: 'yes' }

  { id: 'userinfo', name: 'USER', user: 'Profile', avatar: '../../assets/images/user_profile.png' }

You can see an example of a menu configuration below. This is a piece of the configuration used in the OntimizeWeb QuickStart. You can check the full code in GitHub.

import { MenuRootItem } from 'ontimize-web-ngx';

export const MENU_CONFIG: MenuRootItem[] = [
  { id: 'home', name: 'HOME', icon: 'dashboard', route: '/main/home' },
  { id: 'views', name: 'VIEW', icon: 'remove_red_eye', opened: true,
    items: [
      { id: 'customers', name: 'CUSTOMERS', tooltip: 'CUSTOMERS_CONTENT', route: '/main/customers', icon: 'people' },
      { id: 'accounts', name: 'ACCOUNTS', tooltip: 'ACCOUNTS_CONTENT', route: '/main/accounts', icon: 'credit_card' },
      { id: 'branches', name: 'BRANCHES', tooltip: 'BRANCHES_CONTENT', route: '/main/branches', icon: 'account_balance' },
      { id: 'employees', name: 'EMPLOYEES', tooltip: 'EMPLOYEES_CONTENT', route: '/main/employees', icon: 'person'
      }
    ]
  },
  { id: 'general', name: 'GENERAL', icon: 'info_outline', opened: false,
    items: [
      { id: 'about', name: 'ABOUT', route: '/main/about', icon: 'help_outline' }
    ]
  },
  { id: 'logout', name: 'LOGOUT', route: '/login', icon: 'power_settings_new', confirm: 'yes' }
];

Card menu layout

In addition to the side menu, OntimizeWeb provides o-card-menu-layout component that builds automatically a dashboard page using the menu configuration.

You can see this live example in the OntimizeWeb QuickStart.