Date Format

Dates can be configured by specifying a dateFormat object. The values of the properties of thisobject must be strings representing date formats in accordance with. Following date formats are used within Tasklist:

  • monthName represents the name of a month (e.g., January).
  • day represents the number of a day in a month (1..31).
  • abbr represents a short format of a date including time.
  • normal represents the standard format of a date including time.
  • long represents a verbose format of a date including time and day of the week.
  • short represents a short format of a date excluding time.

Localization

The localization of Tasklist is contained in the app/tasklist/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).

Tasklist 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, Tasklist 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 Tasklist, 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 scripts (to add new AngularJS directives orother libraries) you should add a customScripts property to the app/tasklist/scripts/config.jsfile with something like this:

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

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

In your scripts, you can add a controller and directive like this:

  1. 'use strict';
  2. define('custom-ng-module', [
  3.   'angular'
  4. ], function (angular) {
  5.   // define a new angular module named my.custom.module
  6.   // it will be added as angular module dependency to builtin 'cam.tasklist.custom' module
  7.   // see the config.js entry above
  8.   var customModule = angular.module('my.custom.module', []);
  10.   // …so now, you can safely add your controllers…
  11.   customModule.controller('customController', ['$scope', function ($scope) {
  12.     $scope.var1 = 'First variable';
  13.   }]);
  15.   // …directives or else.
  17.     return {
  18.       template: 'Directive example: "{{ var1 }}", "{{ var2 }}"'
  19.     };
  20.   });
  22.   // it is not necessary to 'return' the customModule but it might come handy
  23.   return customModule;
  24. });

And finally, in your UI or embedded forms, you can use the new features like this:

  1. <div ng-controller="customController">
  2.   <div custom-directive> - (in this case; will be overwritten) - </div>
  3. </div>

Shortcuts

If you want to change the keyboard shortcuts for certain tasklist operations, you can change the key-combination and the description of the shortcuts in the shortcuts section of the config file.

Removing an existing entry from the list will disable this shortcut (you can still perform the operation normally within the tasklist, i.e. removing the Claim Task shortcut will not remove the ability to claim a task either with the mouse or with the normal keyboard navigation).

You can also add additional shortcuts. If you do so, whenever the user presses the registered combination of keys, an angular event in the form of shortcut:{{nameOfShortcut}} will be broadcasted across the application. A Tasklist plugin can then react to this event.

Logo and Header Color

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

  1. // …
  2. app: {
  3.   name: 'Todos',
  4.   vendor: 'Company'
  5. },
  6. // …

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 Tasklist.

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

From within the camunda-bpm-webapp directory:

  1. grunt build:tasklist

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