Introducing the Libero 🛡️

The SharePoint Framework (SPFx) is the versatile player, the libero, best known from the ‘Catenaccio’ tactic, you rely on when extending SharePoint with your own components. I will show you the idea behind SharePoint Framework multilinguality, how it works, and how to avoid common pitfalls.

Table of Contents

• SPFx localization
• Localization in SPFx
  • First Example: Matching Languages Through the Whole Chain of Command"
  • Second Example: Localization logic in SPFx
• The SharePoint Online language switcher
  • Training the Libero

SPFx localization

Microsoft has an introduction to localizing SPFx components here 🔗

When you scaffold an SPFx solution, it comes with a standard setup that you can easily extend by adding your own localized files.

The file choice or language selection is then handled by the SharePoint Framework at run-time in the context of your SharePoint Site, Page, or News.

We will take a look at how this plays with your SharePoint Site Language settings and how your libero interacts with your tactical coach."

Localization in SPFx

You may remember from my post about focusing on key languages 🔗 that SharePoint abstracts some of your locale settings, either from your browser or SharePoint profile, and matches these, when possible, with your site language settings.

This also happens for SPFx solutions, but in a different way. Let me explain with some examples, assuming I have an SPFx solution with the following setup in the loc folder:

• en-US for my English translations
• fr-FR for my French translations
• it-CH for my Italian translations for Swiss users

First Example: Matching Languages Through the Whole Chain of Command"

Second Example: Localization logic in SPFx

Now, let’s assume François changes the content priority in his SharePoint profile, setting Italian (Switzerland) as the first choice, followed by French (France). At this point, SPFx should select the it-CH localization file, but it instead defaults to en-US.

This means François ends up seeing the page in Italian because SharePoint’s multilingual publishing matches the site’s language settings. However, the SPFx component doesn’t recognize this and defaults to the English translation.

The SharePoint Online language switcher

Assuming you have your content in French and English, and your user has set the correct language, French, in their SharePoint profile, they will be presented with the French version of the page they have navigated to, and your SPFx web part, which also has fr-FR as a translation locale, will render French content.

We live in a perfect world until your user decides to switch to the English content. What happens then?

• Your page with the prepared content in English will be presented. You have likely created text content in English, and possibly referenced specific documents.
• However, your SPFx web part will still render content in French, despite the page displaying English content.

Serving content in a different language from the page’s content may be a deliberate choice, but I believe people using the language switcher expect the content to match the selected language.

Training the Libero

SPFx localization works in some cases, but it should be enhanced to provide a more understandable and intuitive approach to consuming content. In the next blog post, I will show you how to override the default SPFx behavior and take control of how SPFx chooses the locale and renders its content.