Localization samples
Localized Hello World
Localizing via local dictionaries
This sample demonstrates a Hello World widget with a localized label. By using this approach, you can localize any resource in your widget.
Let’s assume your application supports three cultures: English, German and Bulgarian. Different dictionaries, which are objects that map resource keys to localized strings, are maintained. There should be a separate dictionary for each culture your app supports. In this case, we have three separate json
files in a dictionary folder ~/src/app/widgets/localization/dictionaries
:
• en,
• de,
• bg.
There are two different samples for working with these dictionaries: SSR with a custom implementation and CSR with i18n.
SSR sample with custom implementation
In this approach, we need a function to load the translations for the requested locale:
After that, you can use these dictionaries to fetch the necessary strings in your widget by requesting them with the currently selected culture:
The required labels are localized from the dictionary according to the requested culture of the page.
CSR sample with i18n
In this approach, you first need to configure i18n. You can reference this sample configuration:
Pass the i18n instance to react-i18next. Import the dictionaries and pass them as resources on the i18n initialization.
For all the i18n initialization options, see i18next documentation.
After that, you can use the localization with these dictionaries in your widget by using the Trans
tag with the needed key from the dictionary like this:
<Trans i18nKey="message" />
Set the currently selected culture:
i18n.changeLanguage(props.requestContext.culture);
Here is a sample integration:
The required labels are localized from the dictionary according to the requested culture of the page.
Localizing in widget designers
Another way to translate properties is manually through the widget designers. This can be done by exposing the localized resources as properties in the widget designer. In this example, it is demonstrated via the Content property. After the translation, the widget resolves the version of the properties for the current language of the page. Except for the Section widget, all the other widgets support property localization and each property can be localized independently. Additionally, when working on a synced page, you can override all translated versions with the current one by saving the widget with the option Save all translations.