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

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

9 hours ago

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

11 hours ago

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

14 hours ago

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

15 hours ago

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

15 hours ago

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

15 hours ago

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

16 hours ago

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

16 hours ago

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

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