Internationalization Guide


This will allow any piece of static text in the application to be modified dynamically.


n the UI code, there are three options for converting the text provided into translated text.

In addition, the application.yml file is an example of a file where dynamic values from the server, can be populated with an i18n identifier for translation. The json files used to generate the metadata wizards also make use of these identifiers and can be translated. They all use the same files.

Here is an example of the identifers and text found in the files.

action.delete-type=Delete { type }

The action.delete-type=Delete { type } example shows how dynamic text can be inserted into the translation as well. These values are determined by the application and are populated at runtime based on user interaction. Many of these values can be translated separately.


Choosing an identifier

To allow for easier identification of relevant strings the identifiers are provided in the following format


For example

<button>example text</button>
<!-- would become -->
<button translate="action.example-text">example text</button>

Where type is one of the provided types listed in the types section

type and text are separated by two dashes.

text is the text content, dash separated words, all lower case, with punctuation removed.


The following types are provided:

Localize Text Only

<!-- BAD -->
<!-- this will pull both the text AND the icon into the translation -->
<button i18n="action.some-text">
  some text
  <i class="fa fa-icon"></i>

<!-- GOOD -->
<!-- this will only localize the text -->
<!-- NOTE: ng-container does not create any new dom on the page -->
  <translate key="action.some-text">some text</ng-container>
  <i class="fa fa-icon"></i>

Updating Text

When updating text, update the identifier to match the new text field.

<!-- BAD -->
<!-- identifier does not match text after update -->
<label translate="">Address</label>

<!-- GOOD -->
<!-- identifier and text match -->
<label translate="label.address">Address</label>