📈
Valtimo Portal (obsolete)
  • Valtimo Portal documentation
  • Portal libraries (front-end)
  • Adding custom translations
  • Override views
  • Public tasks
  • GZAC
    • Connecting with Open Zaak
    • Connecting with the Objects Api
      • Tasks in the Objects Api
  • Form.io related
    • Adding custom form.io components
    • Form.io customClass
    • Missing form.io icons
Powered by GitBook
On this page

Was this helpful?

Adding custom translations

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

PreviousValtimo Portal documentationNextOverride views

Last updated 3 years ago

Was this helpful?

Translation resources are loaded through , 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.

ngx-translate-multi-http-loader
The text on the homepage to replace
Looking through the translation files in my Chrome developer tools
en.json
nl.json
The mapping of my locales folder in angular.json highlighted
My new custom translation resources (highlighted) added to my environment file
My new custom translation
The english translation resource for the 'bezwaar' process