Adding Constants to Frontend from Mnoe

Owned by Adam Abdelaziz (Unlicensed)
Last updated: Oct 20, 2017 by Olivier Brisse (Unlicensed)Version comment
2 min read

You can add constants to mnoe-angular that come from mnoe, allowing access to important backend information on the frontend.

Note:  This is applicable to mno-enterprise v4.0 and mnoe-angular v2.0 or above. For previous versions, the process is similar but the files are slightly different.

As most of the settings are now nested under ADMIN_PANEL_CONFIG or DASHBOARD_CONFIG, you shouldn't need to add new constants to add simple settings. Have a look at feature flags instead.

Never use this to transmit sensible credentials to the frontend. This is easily accessible from the frontend by any visitor (even unauthenticated guests!)



1 - Adding a New Constant

1.1 - Mnoe-angular

In Mnoe-angular, add your new setting to the following file.

This is needed for backward compatibility, in case the constant is not present in the mno-enterprise backend.

src/app/index.default-config.coffee
# For backward compatibility with the mnoe backend
# Define null/default values for all the constants so that if the backend hasn't been upgraded
# to define this constants you don't get errors like:
#   Uncaught Error: [$injector:unpr] Unknown provider: INTERCOM_IDProvider <- INTERCOM_ID <- AnalyticsSvc
angular.module('mnoEnterprise.defaultConfiguration', [])
  .constant('IMPAC_CONFIG', {})
  .constant('I18N_CONFIG', {})
  .constant('DASHBOARD_CONFIG', {})
  .constant('ADMIN_PANEL_CONFIG', {})
  .constant('GOOGLE_TAG_CONTAINER_ID', null)
  .constant('APP_NAME', null)
  .constant('INTERCOM_ID', null)
  .constant('URL_CONFIG', {})

1.2 - mno-enterprise

In mnoe-enterprise, add your constant to the api/app/views/mno_enterprise/config/show.js.coffee file.

Note: This is served to the frontend via the MnoEnterprise::ConfigController#show method. Instance variables can be added to the controller and used in this view.

api/app/views/mno_enterprise/config/show.js.coffee
# Configuration module
#
angular.module('mnoEnterprise.configuration', [])
  .constant('IMPAC_CONFIG', <%= Settings.impac.to_json.html_safe %>)
  .constant('I18N_CONFIG', {
    enabled: <%= Settings.system.i18n.enabled %>,
    available_locales: <%= @available_locales.to_json.html_safe %>,
    preferred_locale: <%= Settings.system.i18n.preferred_locale.to_json.html_safe %>
  })
  .constant('ADMIN_PANEL_CONFIG', <%= Hash(Settings.admin_panel).to_json.html_safe %>)
  .constant('DASHBOARD_CONFIG', <%= Hash(Settings.dashboard).to_json.html_safe %>)
  .constant('GOOGLE_TAG_CONTAINER_ID', <%= MnoEnterprise.google_tag_container.to_json.html_safe %>)
  .constant('INTERCOM_ID', <%= MnoEnterprise.intercom_app_id.to_json.html_safe %>)
  .constant('APP_NAME', <%= MnoEnterprise.app_name.to_json.html_safe %>)
  .constant('URL_CONFIG', <%= Hash(Settings.url_config).to_json.html_safe %>)