Multilingual Sharepoint Framework Webpart Development
SharePoint Online has the feature which enables us to create the site for people residing in different regions of the world and speaking different languages. The feature is the MUI (Multilingual User Interface) enabling the users to view the site in the preferred language rather than using the default language which was selected at the site creation time. The feature supports displaying the elements of user interface in different language. The user created content is not translated to preferred language. Lists, document libraries, menus, controls, content types, list columns, etc. are supported by SharePoint to be viewed in different languages. SharePoint Online has the support where along with the user interface elements, SPFx (i.e. SharePoint Framework) webparts can be localized and viewed in the preferred language. The customized SharePoint Framework webparts has the capability of multilingual feature. The webpart needs to be developed once and will render content in different language based on the user’s language preference. The main aspect of the blog is to demonstrate how the SPFx webpart can be localized in French language.
Table of content
Multilingual SPFx Webpart Development
- Build your custom SPFx webpart by following the steps in this link or else you can also consult our Sharepoint Development team.
- After creation of the SPFx webpart, open the solution in any code editor. To open the code in Visual Studio Code, execute “code .” in the command prompt.
- Locate the locfolder which contains the en-us.js file by default. The default language for SPFx webpart is English.
- By default, the en-us.js file contains few strings in key-value pair in English.
- The loc folder contains also the TypeScript type file (mystrings.d.ts) where the localized strings are defined with their datatype.
- For each locale that one want to add to the webpart, a js file named in lowercase of locale is added in loc folder.
- Consider here the webpart is to be developed for French language. Add the fr-fr.js file inside loc folder.
Note: Only the text is translated to French. While the keys will remain same.
- Access the locale strings in main ts file of the webpart.
- The key is used by using the strings object. Make sure that the keys are defined in mystrings.d.ts file. Here, the welcome message and webpart description are localized.
- Run the gulp serve command in the command promptto view the webpart result.
- While testing the webpart in workbench, the webpart will render in the default English language.
- To test the webpart in locale configured for the webpart, execute gulp serve –locale=<language> command.
Example: Run gulp serve –locale=fr-fr for French language.
- Deploy the webpart and view the output. By default, the webpart will be rendered in English language.
- The same webpart for the user whose language is set to French will be displayed in French.
Note: Make sure to change the language
settings for the user in User Profile to reflect the change of the webpart.