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
Dynamics 365 Business Central: How to import/read files from OneDrive to Business Central via AL (Graph API)
Hi, Readers.We discussed Dynamics 365 Business Central: How to use OAuth 2.0 in AL with SecretText (Using codeunit 501 OAuth2) a few weeks ago...
Oversharing Control at Enterprise Scale | Updates for Microsoft 365 Copilot in Microsoft Purview
Minimize risks that come with oversharing and potential data loss. Use Microsoft Purview and its new Data Security Posture Management (DSPM) f...
Power Platform & M365 Dev Community Call – November 21st, 2024 – Screenshot Summary
Call Highlights  SharePoint Quicklinks: Primary PnP Website: https://aka.ms/m365pnp Documentation & Guidance SharePoint Dev Videos Issues...
Viva Engage: Community analytics update
Microsoft is set to roll out updates to its community analytics features for Viva Engage, allowing users to keep up with their community's act...
Microsoft Teams admin center: Manage external access policies for users in your organization
Microsoft Teams Admin Center is releasing a new feature that allows admins to manage external access policies for users in their organization ...
SharePoint: Enhanced functionalities to manage SharePoint Embedded Containers through SharePoint Admin Center
The most recent update to SharePoint, as described in this post by M365 Admin, enhances the functionality of SharePoint Embedded Containers fo...
Microsoft Fabric API for GraphQL – Everything you need to know!
Although API for GraphQL might not look like a groundbreaking feature at first glance and probably won’t be frequently used by data engineers ...
Use the Microsoft Graph to Report Service Principal Sign-In Activity
Service principal sign-in activity is a new insight available in the Entra admin center. As explained here, it's also possible to use PowerShe...
Increase Microsoft 365 adoption with ShareGate’s end-user training
To get the full value out of Microsoft 365, end users need to know how to use its apps and tools. See how our new turnkey courses can help ge...
Microsoft Teams: Updated Planner tab experience
Microsoft Teams is set to roll out an updated Planner tab experience that will bring a range of new features to users with a Microsoft 365 lic...