OpenPaaS Documentation logo OpenPaaS Documentation

Table of contents


Let’s say you have a configuration used somewhere around OpenPaaS and you want to allow administrator to configure it. Then the best place for having it configurable is a page in Administration module.

Build configuration page

Register your page

First step, you need to define a router state for your page in frontend\app\app.routes.js. For example:

  .state('admin.domain.configpage', {
    url: '/configpage',
    views: {
      'root@admin': {
        template: '<admin-configpage />'

Note that, the template must match your corresponding angular component of the page.

In order to have an entry of your configuration page displayed in module sidebar, add an object to ADMIN_PAGES constant in frontend\app\app.constants.js. For example:

    id: 'configpage',
    name: 'Config Page',
    icon: 'mdi-library-books',
    displayIn: {
      domain: false,
      platform: true

Start building your page

Create a directory for your own configuration in frontend\app. Here is where you put all front-end files for your page (component, controller, service, template,…).


A page in Admin module often composed of two components:

Depends on the properties of the configuration, there could be more smaller sub-component needed for your page. You are advised to utilize both dumb and smart components.


In Admin module, there are already a set of helper services for retrieving and saving configurations. Check frontend/app/common/config/admin-domain-config.service.js for the source code.

To get your configuration from back-end side:

  adminDomainConfigService.get(domainId, configName)
    .then(function(data) {
      //Handle retrieved configuration

To save your configuration:

    progressing: 'Saving configuration...',
    success: 'Configuration saved',
    failure: 'Failed to save configuration'
  }, function() {
    adminDomainConfigService.set(domainId, configName, data);

Since adminDomainConfigService.set returns a promise. You can use a helper function for this process called asyncAction, where it tracks the status of the promise and pop out a message upon the status, whether the set function failed, succeeded or still running.