Skip to main content

Internationalization (I18n)

The Sequential Workflow Designer supports internationalization (i18n). This allows you to translate the user interface into different languages.

Example

Check the Internationalization Example.

The designer doesn't provide built-in translations, but you can easily add your own translations. To do this, you need to create a function that returns the translation for a given key. The function accepts two arguments: the key and the default value. The default value is a default english translation. If you don't provide a translation for a key, the default value should be returned.

const DICTIONARY = {
  'controlBar.resetView': 'Reestablecer vista',
  'controlBar.zoomIn': 'Reestablecer vista',
  'controlBar.zoomOut': 'Disminuir el zoom',
  'controlBar.turnOnOffDragAndDrop': 'Activar/desactivar arrastrar y soltar',
  'controlBar.deleteSelectedStep': 'Eliminar paso seleccionado',
  'controlBar.undo': 'Deshacer',
  'controlBar.redo': 'Rehacer',
  'smartEditor.toggle': 'Alternar editor',
  'toolbox.title': 'Caja de herramientas',
  'toolbox.search': 'Buscar',
  'contextMenu.select': 'Seleccionar',
  'contextMenu.unselect': 'Deseleccionar',
  'contextMenu.delete': 'Eliminar',
  'contextMenu.resetView': 'Reestablecer vista',
  'contextMenu.duplicate': 'Duplicar',
};

function i18n(key: string, defaultValue: string): string {
  return DICTIONARY[key] || defaultValue;
}

Next, you need to pass the i18n function to the designer configuration.

const configuration = {
  i18n,
  // ...
};