Adding custom translations

Custom translation resources can be added to your implementation project. Here's how.

Translation resources are loaded through ngx-translate-multi-http-loader, which supports multiple locations for translation resources.

Translation resources can be either stored in your implementation, or at an external location. They are stored in a separate .json file for each language. For supporting English and Dutch for example, you would store en.json and nl.json at your preferred location.

Any translation resources uses throughout the app can be overwritten by using the same key in different translation resources and adding them to your environment file(s).

For example, if on the homepage I would like to overwrite the text 'How can we help you?'. I would do the following.

First I would look from which key the translation comes from. In this case, I'm using the network tab in my Chrome developer tools to look through the translation files. I can see the translation key is 'home.introduction.subtitle'

To overwrite the string on the homepage, I am adding en.json and nl.json to the folder src/assets/locales/home in my implementation project. They will have the following contents:

Next, in the angular.json file in the root of my implementation project, I can see that the folder src/assets/locales is mapped to ./custom-translate. If such a mapping is not available for the folder in which your custom translation resources are located, please add it to angular.json. Such a mapping is not necessary if you are storing your resources at an external location.

Now, to include my new custom translation, I have to add them to the array under translation.resources in my environment file like so.

Now if I save this environment file and look at my application in the browser, I can see that the string has successfully been replaced!

If you are adding a new process to your Portal implementation, a similar process applies of including translation files. The first key would then be the process' caseDefinitionId. After this key, some other properties, and translations for the process' statuses, properties and tasks are needed. Optionally, tips can be added as well, after which they will automatically and randomly be included in the tips carrousel. You can look at the following translation file for the 'bezwaar' process to see what properties are typically included.

Last updated