A while ago I’ve been asked to change the name of an SPFx Teams personal app and to localize it, I’ve never done something like that so I did my searches and luckily it came out that it’s a pretty easy thing to do!
To support localization in the manifest.json, like in my case to localize the application name in Teams, all you need to do is to specify in the Teams manifest.json what are the supported languages and also you have to create the files with the localization strings.
In the solution folder open the “teams” folder and in the manifest.json add the localizationInfo property:
{ "$schema": "https://developer.microsoft.com/en-us/json-schemas/teams/v1.16/MicrosoftTeams.schema.json",..."localizationInfo": { "defaultLanguageTag": "en-us", "additionalLanguages": [{ "languageTag": "it", "file": "it.json" }] },...}
The block specify that the default language of your application is, in this example, the english language and that the additional supported language is the italian one. The default language is the one of the strings defined in the manifest.json.
In the additional languages you can see that the file property contains the name of the file which contains the localized strings, that file must be in the same folder of the manifest.json file and must be included in the zip when packaging the application.
The localization file can be, following my italian example, like the following:
{"$schema": "https://developer.microsoft.com/en-us/json-schemas/teams/v1.16/MicrosoftTeams.Localization.schema.json","name.short": "Esempio di localizzazione","name.full": "Esempio di localizzazione nome completo","description.short": "Esempio di localizzazione","description.full": "Esempio di localizzazione descrizione completa"}
Now, you are probably wondering: how do I map the properties in the it.json file with the ones in the manifest.json?
The answer is a simple one: just use the path to each string that you want to localize.
For example the short name in the schema is:
{...name: { short: "the short name here"...
So in the localization file the property to that value will be:
"name.short": "The localized short name"
Pay attention that if you have arrays of element you can access those using indexes. Say that you want to change the name of the second static tab present in your manifest.json, you can do the following:
"staticTabs[1].name": "Localized name",
The result
To write this article I’ve created a simple sample solution that supports, as default language, english and, as secondary language, italian. The result of the localization is the following:
For the english language.
For the italian language.
If you want to have a look at the code of this article you can go here, if you want to have a look to a more detailed explanation you can have a look at the official documentation here.
And this is all for today!
Hope this helps!
Top comments (0)