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

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

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

16 hours ago

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

21 hours ago

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

1 day ago

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

1 day ago

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

1 day ago

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

1 day ago

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

1 day ago

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

1 day ago

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

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