Language translations

All texts in the user interface come from locale files that can be replaced or extended through an overlay.

Customizing translations

All text that is displayed can be customized. The default locale file contains standard translations and can be changed and extended by future updates. Use the overlay method to override the default locale file with a custom file. The default file will be merged with the custom file, with the keys in the custom file taking precedence.

Add more languages

Default provided languages are English and Swedish. Language files must be present in <overlay_dir>/assets/locales/ E.g. assets/locales/en.json

To add more languages add to the array in supportedLanguages and place file (using overlay method) in locales folder. E.g. add the following to the supportedLanguages array {code: 'de', name: 'Deutsch'} and add a file called assets/locales/de.json

Caution

supportedLanguages replaces the default list rather than extending it. Include English and Swedish in the array as well if you want to keep them.

Language selection

The language is resolved in this order:

1. The language stored in the fortifiedid-language cookie, set when the user picks a language.
2. fallbackLanguage from the configuration.
3. sv, if no fallback language is configured.

If the resolved language is not present in supportedLanguages, the first entry in that list is used instead. If a locale file is missing for the selected language, en.json is loaded.

Custom translation keys

To customise translations use localesMergePath to extend and merge with the provided default files.

Example of a custom extension/merge:

Default language file contains the translations keys

{
    "selector.header": "Choose authentication method",
    "selector.error": "An error occurred",
    "change_language": ""
}

The overlay directory contains a ui_config_overrides.json with "localesMergePath": "assets/custom_locales/". See Overlay.

A file is placed in <overlay_dir>/assets/custom_locales/en.json containing the following:

{
    "selector.header": "A different header"
}

The resulting merged language file used in the application will contain the following:

{
    "selector.header": "A different header",
    "selector.error": "An error occurred",
    "change_language": ""
}

For each language that will be customised, add language files <overlay_dir>/assets/custom_locales/<lang>.json

Scoped Translation Strings with Prefixing

You can scope your translation strings by prefixing them with the last segment of a path. This allows you to define translation strings that are specific to a particular page or context.

Example for Path-Based Prefixing

For example, given the path:

https://dev.fortifiedid.se/saml/authn/selector_root/

You can prefix your translation strings with the last part of the path, selector_root, to create translations specific to that page:

{
  "selector_root.selector.header": "A header specific to this page"
}

Add these translations to your translation file, and they will only apply to the specified path.

Forms Prefixing with Control IDs

For forms, you can also choose to scope translations by using a part of the path as described above or by prefixing with a control ID. This approach helps localize translations at a finer level of granularity for specific form elements.

Example of a control ID-based prefix:

{
  "min_control.forms.multiselectwidget.removed_item": "Item removed from the multiselect widget"
}

This flexibility in prefixing allows you to maintain organized and context-aware translations across your application.