Localization of SPFx webparts in Microsoft Teams tabs

19.03.19 08:03 PM Comment(s) By Martin Laplante

This post was prompted by a conversation with Bob German, a Partner Technology Architect for Microsoft.

In his talk at the Collaboration Summit in Branson MO, he touted the localization features of developing custom tabs for Teams using SPFx.

We chatted a bit after that, and discussed the fact that Microsoft Teams has a language setting that is independent of the language settings in the Office 365 user profile, which SharePoint uses. I was of the opinion that even within a Teams tab, the SPFx webpart would follow the SharePoint language setting. So let's try it out.

There is some very useful very complete guidance for localizing SharePoint SPFx webparts here

https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/guidance/localize-web-parts

It is simple to create a small example webpart and localize the manifest, the property pane, and the content using the SharePoint guidance. In this case, it was localized in English and Dutch. Turning that webpart into a Microsoft Teams tab is just a matter of adding an extra manifest file and zipping it.

Add the webpart's sppkg file to your site catalog and ensure that the “Make this solution available to all sites in the organization” option is checked, so that the web part can be used from Microsoft Teams, then Deploy.

Then in Teams, select "Manage team" then the Apps tab, then "More apps" and "Upload a custom app". Upload the "manifest.zip" file created earlier, which refers to the app in your app catalog. Then click on the app name and click on Install, then setup and Save. Let's have a look.

Here, both my Teams language setting and my SharePoint language setting are English.

Let's change the Teams language setting. You can do that by clicking on your picture then on Settings and selecting a new language.

I picked Dutch and re-started the Teams app. So now the Teams interface, near the top of the screenshot, is mostly in Dutch, while the webpart is still in English.

If we do it the other way around, with the Teams setting in English and SharePoint in Dutch, we have the opposite effect, the Teams interface is in English and the webpart/tab is in Dutch. So the SharePoint language setting determines the language of the localization of the custom tab.

We will go further still. Go to the SharePoint site that was created when the team was created. Go to the site settings and remove Dutch as an alternate language of that site without removing it as your personal language preference.

Go back to Teams and now the webpart is back to English. This is because the language of the tab is not just determined by your Office 365 profile language setting, it is determined by the ability of the associated SharePoint site to render its interface in that language, as though the tab was a webpart on that site.

Many thanks to my colleague Srikanta Barik for his help.

Localization of SPFx webparts in Microsoft Teams tabs

Martin Laplante

Subscribe to our newsletter