Early Adopter's guide to Umbraco v14 - Localization.

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>