Changing UI texts and translations with the Loginapp Design Kit

The Loginapp UI supports Internationalization (i18n) with language and locale codes with 2-letter language and 2-letter locale codes.

The following i18n property files contain all the default reference translations for all languages that are provided with Airlock IAM:

 
Example
de.properties, en.properties, fr.properties, it.properties
 
Notice

Text and translation changes made via the Loginapp Design Kit apply only to UI texts.

Any non-UI-related text changes (such as email, SMS, or Cronto texts that are not part of the Loginapp UI) can instead only be changed in custom strings_*.properties files, as described in the section Customizing non-UI-related text elements in the Loginapp REST API.

Changing Loginapp UI texts

The Design Kit allows for easy changes to the default translations and/or adding new texts.

Language-specific texts and translations are stored in custom .properties files located at:
$CUSTOM_DIRECTORY/src/assets/custom/i18n

Only add uncommented customized translation keys to the custom .properties files, together with their adapted text/translation. Do not copy the full content of the reference .properties files into the corresponding custom .properties files.

Example

In the default configuration, the username field on the username/password Login page is labeled Username in English. This corresponds to the translation key:

 
Example
authentication.password.username = Username

To override this label with your own text, add the following entry to your custom en.properties file.

 
Example
authentication.password.username = Your username

 
Info

To identify which translation keys are used in a particular UI element, enable Show Translation Keys in the Loginapp Design Kit settings. The corresponding keys will then appear directly in the Design Kit development UI.

Alternatively, download the reference translation templates above, which include all built-in translation keys and their default values.

Adding a new language

New languages can be added by creating additional language property files.

  1. In $CUSTOM_DIRECTORY/src/sdk/config/custom.sdk.config.js uncomment config.languages and add the new language to the list of available languages.
  2. Create a corresponding language file in $CUSTOM_DIRECTORY/src/assets/custom/i18n (e.g. es.properties). The common way to add a new language is to copy and rename the en.properties for translation – see the linked properties files at the beginning of this article.
  3.  
    Notice

    Property files must be UTF-8 encoded.

  4. Add translations for all used text elements.
  5. The new language is now available in the Loginapp Design Kit, can be used in dev mode and will be included in the build artifact.
 
Notice

The IAM configuration must be adapted, too – it also defines the set of available languages.

  1. In the Config Editor, go to:
    Loginapp >> Language Settings
  2. Add the language to the Valid Languages list.

Depending on the used feature set, there may be other points in the configuration where the new language must be added, e.g., language choice in user registration self-service or user management in the Adminapp.

Internationalization may require the use of locale codes. For more information on adding locale codes, see Internationalization (i18n) with language and locale codes.