Skip to main content

Localization

All components supports localization (i.e. get translated to a specific language) through the Microsoft Graph Toolkit localization feature. The localization process covers the following elements:

  • Static labels in components (i.e. translations).
  • Use defined labels from component attributes data (ex: filter names, tab names, etc.)

Localize components

The language is managed globally on the page for all components. By default all components are displayed in English using en-us locale. Use the pnp-language-provider component and locale attribute to change the language:

<pnp-language-provider id="languageSwitcher" locale="fr-fr">
</pnp-language-provider>

You can also programmatically change the language using Javascript:

document.getElementById("languageSwitcher").setAttribute('locale','ro-ro')

!!! notice

  • You can use the show-picker attribute to test the language switching behavior.
  • If no language provider is present on the page, the default language will be en-us.

Localize data

You can also localize the data passed as attribute for specific components using localized string format like this:

{
"default":"Default string for en-us",
[key: locale culture]: "FR",
}

The following components are localizable:

ComponentProperty in configuration
pnp-search-verticalstabName
pnp-search-filtersdisplayName

Example for search verticals

[
{
"key":"all",
"tabName":{
"default":"All",
"fr-fr":"Tout le contenu",
"ro-ro":"Toate"
},
"tabValue":"",
"isLink":false,
"linkUrl":null,
"openBehavior":0
}
]
info

If the label shouldn't be localized, you can also use a string value instead of an object (Ex: "tabName": "Non localized value").