You can override the default configuration of Admin using a central configuration file located in app/admin/scripts/config.js. The following configuration options are available:

LDAP

If you connect the Camunda Platform with the LDAP identity service, you have read-only access to the users and groups. Create new users and groups via the LDAP system, but not in the admin application. Find more information about how to configure the process engine in order to use the LDAP identity service here.

Logo and Header Color

You can change the visual aspects of Admin. The user stylesheet file is located in app/admin/styles/user-styles.css. This file contains CSS which is loaded into Admin and can override the standard styles.

.navbar-brand {
  /* hides the "Camunda Admin" text */
  text-indent: -999em;
  /* put your logo */
  background-image: url(./path/to/the/logo.png);
  /* sets the width to match the logo's width */
  width: 80px;
}

/* changes the header bottom border color  */
[cam-widget-header] {
  border-bottom-color: blue;
}

Note: you can also change the app name (Admin) and vendor (Camunda) by changing the app/admin/scripts/config.js configuration file as follow:

export default {
  // …
  app: {
    name: 'Admin',
    vendor: 'Company'
  }
}

Localization

Admin can be localized. Camunda maintains English and German translation files. You can find and download community maintained translation files at the Camunda webapp translations repository.

The localization of Admin is contained in the app/admin/locales/ directory. This directory contains a separate localization file for every available language. The file name consists of the language code and the suffix .json (e.g., en.json).

Admin uses a locale file corresponding to the language settings of the browser. You can set the availableLocales property in the configuration file to provide a list of available locales. Every locale which is contained in this list must have a locale file in the locales directory with the corresponding language code.

If the browser uses a language which is not available, Admin uses the locale which is defined via the fallbackLocale property in the configuration file:

export default {
  // …
  "locales": {
    "availableLocales": ["en", "de"],
    "fallbackLocale": "en"
  } 
}

To create a new localization for Admin, copy the provided language file, translate it and save it as new localization file with the corresponding language code. To make the new translation available, add it to the list of available locales in the configuration file.

Custom Scripts

Admin allows you to include arbitrary JavaScript files. This allows you to extend Admin with custom code. The script file might contain a custom frontend module. Admin shares the frontend module structure with Cockpit Plugins.

Add your files to the customScripts property of the app/admin/scripts/config.js file:

export default {
  // …
  customScripts: 
    ['custom-module/module.js']
}

This includes a custom-module/module.js file. The path is relative to the app/admin folder in the Camunda webapp .war file.

Change CSRF Cookie Name

The default name of the CSRF Cookie is XSRF-TOKEN. When using other applications within the same-origin, the CSRF mechanisms could interfere with each other. To avoid the name conflict, you can change the name of the CSRF cookie in the config.js file as follows:

export default {
  // …
  csrfCookieName: 'MY-XSRF-TOKEN'
}

Note: Please make sure to change the CSRF cookie name also on server-side.

Disable Welcome Message for new Users

First-time visitors are shown a message directing them to the camunda welcome page. If you do not want this message to be shown, you can disable it by adjusting the config.js as follows:

export default {
  // …
  disableWelcomeMessage: true
}

Note: This does only affect the Admin login page. For other webapps, you need to adjust the corresponding config file as well.

User Operation Log Annotation Length

The default maximum length of a User Operation Log annotation is 4000 characters. Some databases have smaller limits. You can change the maximum allowed input length in the config.js file as follows:

export default {
  // …
  userOperationLogAnnotationLength: 4000
}

Note: This does only affect the Admin Operation Log. For the Cockpit Operation Log, check out the Cockpit configuration.

Advanced Styles Customization

In addition to the basic user-styles.css file, you can edit the source style- and layout files using less to change the overall appearance of Admin.

If you want to customize the interface with less, you should probably start by having a look at the variables defined in the following files:

• node_modules/camunda-commons-ui/node_modules/bootstrap/less/variables.less defines the original Bootstrap variables
• node_modules/camunda-commons-ui/resources/less/cam-variables.less overrides some Bootstrap variables (above) and add some custom ones

Compiling with Grunt

From within the camunda-bpm-webapp directory:

grunt build:admin

The command will build the frontend assets (of Admin), styles included.