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
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...
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...
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 ...
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...
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...
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...
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...
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....
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...