Existing language strings for an application can be customized for any language in the Geocortex Web Designer. To provide a complete translation in an entirely new locale for Geocortex Web, please contact us.
Custom components often provide user facing UI with some degree of text. You may want to define their text as language strings for multiple reasons.
- It allows the text be to translated or changed without a corresponding change in the component code.
- It allows the language strings to be shared across different components.
- It consolidates the language strings and makes them easier to locate.
This article will cover creating a german and english translation for a custom component using language strings.
- Download and setup the Geocortex Web SDK.
- Check out the deployment instructions to learn more about deploying custom code to a Geocortex Web App.
First, we will start off with a component that uses a plain hard-coded text string in English.
Learn more about how to build custom components.
- Component Index
- App Config
Next, we are going to create the language resources for English and German.
Next we need to register the language resources with Geocortex Web.
Now that they have been registered, we can use the strings in our boilerplate component from earlier. Geocortex Web layout components, like
<Typography>, will automatically detect and translate language keys like
language-translatable-text-content in props and child content.
If you need to manually translate a language key, you can use the
useContext react hook with the UIContext to access the
translate function. Then you can pass the language key
language-translatable-text-content you defined in the language resources files to the
translate function and your text will be translated into whichever locale is most appropriate.
To test out a translation, add the URL parameter
locale=<language> to your local server.
- English UI
- German UI
Check out a live SDK sample that demonstrates how to internationalize your application to be supported by multiple locales.
Check out the Language String Reference
Learn more about creating and registering language strings