Logo and Header Color

To change visual aspects of Cockpit, you can edit the user stylesheet file located inapp/cockpit/styles/user-styles.css. This file contains CSS which is loaded into Cockpitand can override the standard styles.

  1. .navbar-brand {
  2.   /* hides the "Camunda Cockpit" text */
  3.   text-indent: -999em;
  4.   /* put your logo */
  5.   background-image: url(./path/to/the/logo.png);
  6.   /* sets the width to match the logo's width */
  7.   width: 80px;
  8. }
  10. /* changes the header bottom border color  */
  11. [cam-widget-header] {
  12.   border-bottom-color: blue;
  13. }

Localization

The localization of Cockpit is contained in the app/cockpit/locales/ directory. Thisdirectory contains a separate localization file for every available language. The file nameconsists of the language code and the suffix .json (e.g., en.json).

Cockpit uses a locale file corresponding to the language settings of the browser. You canset the availableLocales property in the configuration file to provide a list of availablelocales. Every locale which is contained in this list must have a locale file in the localesdirectory with the corresponding language code.

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

  1. "locales": {
  2.   "availableLocales": ["en", "de"],
  3.   "fallbackLocale": "en"
  4. }

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

Custom Scripts

If you want to add your own scripts to the Cockpit application, you should add a customScripts property to the app/cockpit/scripts/config.jsfile with something like this:

  1. var camCockpitConf = {
  2.   // …
  3.   customScripts: {
  4.     // names of angular modules defined in your custom script files.
  5.     // will be added to the 'cam.cockpit.custom' as dependencies
  6.     ngDeps: ['my.custom.module'],
  8.     // RequireJS modules to load.
  9.     deps: ['custom-ng-module'],
  11.     // RequreJS path definitions
  12.     paths: {
  13.       'custom-ng-module': '../custom-ng-module/script'
  14.     }
  15.   }
  16. };

This includes a custom-ng-module/script.js file. The path is relative to theapp/cockpit folder in the Camunda webapp .war file.

Note: The content of the customScripts property will be treated as aRequireJS configuration except for thenodeIdCompat and skipDataMain which are irrelevant and deps which will be used like:

  1. require(config.deps, callback);

You can find a complete example about how to use customScripts to develop a Cockpit Plugin in the Camunda BPM examples repository.

skipCustomListeners Flag

You can configure skipCustomListeners flag globally for cockpit by adding a skipCustomListeners property in app/cockpit/scripts/config.js:

  1.    window.camCockpitConf = {
  2.      skipCustomListeners: {
  3.        default: true, // default value for skipCustomListeners is true
  4.        hidden: false  // skipCustomListeners checkbox is not hidden
  5.      }
  6.    };

By default (if not configured), the skipCustomListeners flag value is true. However, you can set the default value of the flag (true | false)in the default property in skipCustomListeners configuration.

Moreover, the checkbox to enable/disable skipCustomListeners is by default not hidden in Cockpit. You can set this behaviour by configuring the propertyhidden (true | false) in skipCustomListeners configuration. If the hidden value is configured to be false, then the skipCustomListeners checkboxwill be hidden everywhere in Cockpit.

Historic Activity Instance Metrics

  1.     window.camCockpitConf = {
  2.        historicActivityInstanceMetrics: {
  3.          adjustablePeriod: true,
  4.          //select from the default time period: today, week, month, complete
  5.          period: {
  6.            unit: 'today'
  7.          }
  8.        }
  9.     };

By default, the adjustablePeriod flag value is true. Setting it to false disables the ability in the process definition history view to manually select the time period for which the activity instances are displayed. the unit property of period allows to specify the default timer period for which the activity instance badges are supposed to be shown. Here it is possible to select form the range of values: today, week,month,complete;

Advanced Styles Customization

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

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

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

    Compiling with Grunt

From within the camunda-bpm-webapp directory:

  1. grunt build:Cockpit

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

原文: https://docs.camunda.org/manual/7.9/webapps/cockpit/extend/configuration/