Given i made such a fuss about waiting for localisation to be put into the new backoffice. I suppose we should take a look at how you can localize you umbraco package in v14.
umb-localize Tag
you can use the <umb-localize> tag in your html, just as you might have used <localize> in Umbraco previously.
<umb-localize key="general_close"></umb-localize> LocalizeController
if your elements are extending UmbElementMixin you can use the localizeController which is included. (you can use it in non UmbElementMixin, you first need to initialize it)
this.localize.term('general_close'); Adding your own translations.
To add your own translations to the front end you now need to define them in a language file, and then add a manifest to include it in Umbraco.
Language file.
the format of the language file is 'section' 'key. So if you wanted a name and a description for your dashboard, you might have the following in a en-us.ts file.
export default { time: { name: 'Time Dashboard', description: 'what time the server thinks it is' } }; language manifest
In order to include this in the backoffice you do need to reference it in a manifest and include that.
const localizations: Array<ManifestLocalization> = [ { type: 'localization', alias: 'time.lang.enus', name: 'English (US)', weight: 0, meta: { culture: 'en-us' }, js: () => import('./files/en-us') }, { type: 'localization', alias: 'time.lang.engb', name: 'English (UK)', weight: 0, meta: { culture: 'en-gb' }, js: () => import('./files/en-us') }, ] What i found was my back office was running in en(gb) and there is currently no fallback, so i did have to define the language file twice once for en-us and once for en-uk.
Referencing the languages
now these are loaded you can get them with either <umb-element> or this.localize.term
e.g
<uui-box headline="${this.localize.term('time_name')}"> <div slot="header"> <umb-localize key="time_description"></umb-localize> </div> </uui-box> 
Top comments (0)