# Localization

The front-end of Valtimo supports localization. The front-end libraries include default translations for main application functionality. These translations can be extended and overridden in a variety of ways.

{% hint style="success" %}
From Valtimo front-end and back-end libraries version `12.0.0` and up, it is possible for an administrator to configure translations from the user interface.
{% endhint %}

## Admin configuration of translations

After following the above-mentioned steps, an administrator can now navigate to `/translation-management`. On this page, custom translation keys can be configured, which will be available directly in any custom component code using the `translate` pipe provided by `'@ngx-translate/core'`.

In addition, any existing translations can be overridden by supplying its exact key. In this example, the title displayed for Dashboard in the left sidebar is overridden by supplying the translation key it uses, which is `Dashboard`. Now, `My dashboard` is displayed when the application is set to English.

![Example of custom 'Dashboard' translation](https://290147654-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FG2PoMeT8OSmMoaW7kF6t%2Fuploads%2Fgit-blob-7ace58022be5d40ed0d1ad11c85e429044447506%2Fdashboard-translation.png?alt=media)

Any nested translations can also be overridden by using the dot notation. For example, notice `account.informationTitle` is defined in the translation files:

![EN translation file](https://290147654-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FG2PoMeT8OSmMoaW7kF6t%2Fuploads%2Fgit-blob-18fede2e53658849dde023045e3184ec6806255c%2Fen-translation-file.png?alt=media)

This translation is displayed in the right sidebar as "Information":

![Original sidebar translation](https://290147654-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FG2PoMeT8OSmMoaW7kF6t%2Fuploads%2Fgit-blob-c8fccf398548ffe27f748275977d9d3d28608fe1%2Foriginal-sidebar.png?alt=media)

We can override this text by providing the exact key using the dot notation, and then providing our own translations:

![Custom sidebar translation definition](https://290147654-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FG2PoMeT8OSmMoaW7kF6t%2Fuploads%2Fgit-blob-b079d41cd28785a2b6c7d5e0a7bf1377dcc42334%2Fcustom-account-translation.png?alt=media)

Finally, our custom translation is displayed in the sidebar on reloading the page:

![Custom sidebar translation result](https://290147654-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FG2PoMeT8OSmMoaW7kF6t%2Fuploads%2Fgit-blob-195a0c9fa7038987ef17d4b49a0d4cb2ecad8467%2Fcustom-translation-result.png?alt=media)