Here’s how you can add translations and language selectors to your app👇
In this example, we’ll add the possibility to switch to German in the app.
- Start by navigating to the Custom code tab and specifying the following code to connect the i18n JS library:
<script src="https://cdnjs.cloudflare.com/ajax/libs/i18next/24.2.1/i18next.min.js"></script>
- Create a new action of the JavaScript Code type (we’ll call it changeLanguage) and specify the following code:
window.i18next.changeLanguage({{params.lang}})
- Next, create another action (we’ll call it initTranslation) that will initialize all the translations and choose the default language:
a. First step - add a JavaScript action step with the following code:
window.i18next.init({
resources: {
en: {
translation: {
'english': 'English',
'german': 'German',
'welcome': 'Welcome!',
'total': 'There are {{{{total}}}} users in total'
},
},
de: {
translation: {
'english': 'Englisch',
'german': 'Deutsch',
'welcome': 'Willkommen!',
'total': 'Es gibt insgesamt {{{{total}}}} benutzer'
},
},
},
});
b. Second step - add an Execute Action step, select the changeLanguage action, and specify { lang: 'en' } in the Custom action params.
- Navigate to the App triggers section in the right side panel and assign the initTranslation action to the On App Load trigger.
The Delay actions and show loader checkbox must be selected - the app will wait until this action is executed.
- Add a Select component to the working area and add the languages you need to the Options field, for example:
[
{
"value": "en",
"title": {{window.i18next.t('english')}}
},
{
"value": "de",
"title": {{window.i18next.t('german')}}
}
]
-
Next, navigate to the component’s Triggers section and assign the changeLanguage action to the On Change trigger.
-
Click to expand the Action Arguments field next to the action here and add the following parameter:
{
lang: {{value}}
}
- Finally, add translations anywhere you need to the text by using the
window.i18next.t()function. In our example here, we’ve added translations to the Heading components:
-
{{window.i18next.t('welcome')}} -
{{window.i18next.t('total', { total: ui.table.value.length })}}
Done! Now when you select a different language in the Select component, your app content will be translated automatically.
