bpmn-js i18n Example

This example shows how to easily translate the strings displayed in bpmn-js to another language.

Usage Summary

The custom translation function is provided as an additional module when bpmn-js is instantiated. The default translation implementation is thereby overwritten.

var customTranslate = {
  translate: [ 'value', require('./custom-translate/custom-translate') ]
};

var modeler = new BpmnModeler({
  // ...
  additionalModules: [
    customTranslate
  ]
});

You can use your own implementation for translation. The function has two arguments (a template string and an optional object with replacements) and must return the translated string. The example provides two main functionalities: translating and replacing template strings.

Translating a string:

var translations = {
  'Append': 'Anhängen'
};

//...

translate('Append'); // Returns 'Anhängen'

Translating a template string:

var translations = {
  'Append {element}': '{element} anhängen'
};

//...

translate('Append {element}', {element: 'Gateway'}); // Returns 'Gateway anhängen'

A list of all available template strings of bpmn-js as well as existing translations can be found in the bpmn-js-i18n repository.

Run the Example

You need a NodeJS development stack with npm installed to build the project.

To install all project dependencies execute

npm install

To start the example execute

npm start

To build the example into the public folder execute

npm run all