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
- 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)
- Now in the
en-us.js
file (it’s in theloc
folder) you will define for each of your keys that you have in themystrings.d.ts
file, a key-value pair in english. If you also needde-de.js
for german, orfr-fr.js
for french or any other language, create a file with the name of that locale in theloc
folder and provide a translated version of the values of theen-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"
}
});
- Now replace all the hard coded strings like button texts, placeholders, labels, error messages etc. with
strings.<keyname>
, so for examplestrings.column
. - 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.
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 moreRelated posts
Power Platform & M365 Dev Community Call – February 27th, 2025 – Screenshot Summary
Call Highlights  SharePoint Quicklinks: Primary PnP Website: https://aka.ms/m365pnp Documentation & Guidance SharePoint Dev Videos Issues...
RealTime News Updates in SharePoint Online with SPFx
Recently, I discovered the Socket.IO endpoint in Microsoft Graph, which has enabled me to implement real-time functionality in SharePoint Onli...
Copilot Interpreter Agent in Teams Meetings
This is a fascinating topic! How does that sound – enabling nearly real-time live translations in meetings? Yes, a bit like scifi but it...
Microsoft SharePoint: We will retire creating personal pages from SharePoint “start” (Preview)
Microsoft will retire the ability to create personal pages from SharePoint start (Preview) between mid-March 2025 and early April 2025. Users ...
Microsoft 365 Copilot: Chat sessions will have titles generated by large language models (LLM)
Microsoft 365 Copilot will use large language models to generate titles for chat sessions starting March 2025. This feature, requiring a Micro...
Microsoft Teams: Meeting transcription supports multiple spoken languages
Meeting participants can now set their own spoken language during meetings, allowing each participant to communicate in their preferred langua...
Microsoft Teams: Opening Calls in a small window in Teams
Allowing users to open calls in a small window to reduce disruptions in Teams. Product Microsoft Teams Release phase Targeted Release Release ...
Microsoft Teams: Translated Intelligent meeting recap
Intelligent meeting recap supports meetings where multiple languages were spoken, making it easy for you to catch up quickly on the key points...
Microsoft Teams: Copilot only during call
Copilot is only available during the live call session and will not be accessible after the call ends. No recording or transcription is requir...