/
How to Add a New Language to the Central Server or Security Server UI?

How to Add a New Language to the Central Server or Security Server UI?

Support for multiple languages in the Central Server and Security Server UIs is available starting from version 7.6.0

This guide provides a step-by-step approach for adding a new language to central-server, security-server, and shared-ui components. It covers setting up translation files, configuring available languages, and managing shared language messages.

Step 1: Add Translation Files (Using ISO 639-1 Language Codes)

  1. File Naming

    1. Use the ISO 639-1 two-letter code (e.g., fr.json for French).

  2. File Locations

    1. Place app-specific messages in:

      1. src/central-server/admin-service/ui/src/locales/fr.json for central-server

      2. src/security-server/admin-service/ui/src/locales/fr.json for security-server

      3. src/shared-ui/src/locales/fr.json for shared messages in shared-ui

Step 2: Configure Available Languages and Shared Language Messages

Update the following files:

  • src/security-server/admin-service/ui/src/plugins/i18n.ts

  • src/central-server/admin-service/ui/src/plugins/i18n.ts

  1. Add available languages

// Define the available languages for the application export const availableLanguages = ['en','fr']; // includes existing and new language

Language selection menu will display available languages in same order as listed in availableLanguages

Updating localizations from third-party libraries

Some translations comes from external libraries:

  • @vee-validate/i18nhas default error messages for form field validation

  • Vuetify has default messages for UI components.

Detailed list of supported languages can be found here: Vuetify list and @vee-validate/i18n list

It is possible to add missing translations for not supported languages or change existing ones by updating locale files under:

  • src/shared-ui/src/locales

  • src/security-server/admin-service/ui/src/locales

  • src/central-server/admin-service/ui/src/locales

Few examples:

  • To change validation message for urlvalidation rule (source link) which has key: messages.url update one of X-Road locale JSON file by updating/adding this to it:

    { "validation": { messages: { "url": "Badly formated URL" } } }

It is important to add translations as part of validation object

  • Similar procedure can be used to update Vuetify’s built-in translations, for example to change text in empty table (API link) which has key: $vuetify.noDataText

    { "$vuetify": { "noDataText": "No data here" } }

Summary of changes

  1. Add the new language translation files to the specified directories.

  2. Configure available languages in the central-server and/or security-server i18n files.

Following these steps will successfully integrate the new language across components.

 Related articles