Loading...

How to make a SharePoint Web Part multilingual

How to make a SharePoint Web Part multilingual

If you want to easily allow users to have your SPFx Web Part in a language of their liking, this guide is for you. To enable this multi language feature, we need

  1. Define the keys and their types for localized strings in the mystrings.d.ts file like this:
declare interface ISvgToJsonWebPartStrings {
 saveConfiguration: string;
 libraryName: string;
 column: string;
 selectColumn: string;
}

declare module 'SvgToJsonWebPartStrings' {
 const strings: ISvgToJsonWebPartStrings;
 export = strings;
}

Depending on how much text you have in your Web Part, this can be a rather tedious task 😇.

(replace the SvgToJsonWebPartStrings with your Web Part Name)

  1. Now in the en-us.js file (it’s in the loc folder) you will define for each of your keys that you have in the mystrings.d.ts file, a key-value pair in english. If you also need de-de.js for german, or fr-fr.js for french or any other language, create a file with the name of that locale in the loc folder and provide a translated version of the values of the en-us.js file (Hello 👋 Copilot).

This should look a bit like this:

define([], function() {
 return {
 "saveConfiguration": "Konfiguration speichern",
 "LibraryName": "Bibliotheksname",
 "column": "Spalte",
 "selectColumn": "Wählen Sie eine Spalte"
 }
});
  1. Now replace all the hard coded strings like button texts, placeholders, labels, error messages etc. with strings.<keyname>, so for example strings.column.
  2. As a last step, you need to import the strings into the file you want to use them with something like import * as strings from 'SvgToJsonWebPartStrings';

If you now run gulp build and gulp serve again to try out your masterpiece in te workbench and want to see your newly added languages, append the URL https://<your tenant>.sharepoint.com/_layouts/15/workbench.aspx with ?locale=de-de or any other locale that you created.

web part in workbench with enable de-de locale

Congrats! You enabled a multi-language feature in your Web Part and also improved the logic of it. Now if you change a text, that will appear two or more times in your Web Part once it reflects this everywhere, so less manual changes!

If you want to have a look at the Web Part (which is still work in progress), you can do this here: react-svg-to-json-converter/. Let me know what you think!

Published on:

Learn more
Luise Freese: Consultant & MVP
Luise Freese: Consultant & MVP

Recent content on Luise Freese: Consultant & MVP

Share post:

Related posts

How to create SharePoint Sites using Graph

In the previous article I was showcasing how to create a SharePoint Site with PNP.PowerShell. In this article I want to elaborate how to creat...

13 hours ago

Reporting on SharePoint Online and OneDrive for Business item size with version history included using the Graph API

A Graph API based PowerShell script to report on storage usage in SharePoint Online and OneDrive for Business. The script allows you to genera...

21 hours ago

Microsoft Copilot 365 in Viva Glint will support the summarization of employee survey comments

Starting from November 2024, the Copilot 365 feature in Viva Glint will summarize employee survey comments and suggest actions by identifying ...

1 day ago

Microsoft Copilot extending to Teams and Outlook

Microsoft Copilot, an AI-powered tool that assists developers in writing code by suggesting lines of code based on a combination of the contex...

1 day ago

Viva Insights: Users can request delegate access

In a forthcoming update to Microsoft Viva Insights, users will be empowered to request delegate access from their managers, opening up a range...

1 day ago

Viva Engage: Mute conversations in feeds and digests

Microsoft Viva Engage is set to introduce its new Mute Conversations feature that will allow network admins and corporate communicators to rem...

1 day ago

Microsoft Teams: Automatic installation and update of the Network Device Interface (NDI) in Teams (Windows Only)

Microsoft Teams has released an update that enables automatic installation and updates of the Network Device Interface (NDI) in Teams for Wind...

1 day ago

Microsoft Copilot (Microsoft 365): Your AI assistant in the GCC environment

Microsoft 365 Copilot GCC is a powerful AI assistant designed to enhance productivity in the work environment, specifically in the GCC region....

1 day ago

Microsoft Teams: Town hall concurrent attendee increase to 50,000

Microsoft Teams has expanded its concurrent attendee limit for town hall instances from 20,000 to 50,000 for organizers with a Teams Premium l...

1 day ago
Stay up to date with latest Microsoft Dynamics 365 and Power Platform news!
* Yes, I agree to the privacy policy