Blazor WebDesigner automatically sets the UI language the same as that of the browser for the localizations: English, Japanese, and simplified Chinese. This article discusses setting a blazor webdesigner UI language different from the browser for the supported localizations and adding custom localization for the languages that are not explicitly supported.
To set the UI language of Blazor WebDesigner, specify the Language API with-in the div tags while initializing the component. The supported values are 'en-US' (for English), 'ja-JP' (for Japanese), and 'zh-CN' (for simplified Chinese).
Index.razor |
Copy Code
|
---|---|
@page "/" @inject IJSRuntime JSRuntime <PageTitle>Index</PageTitle> <div id="designerContainer"> <ReportDesigner @ref="_designer" PreviewSettings=@_preview Language="ja-JP" /> </div> @code { private ReportDesigner _designer; private PreviewSettings _preview; public Index() { _preview = new PreviewSettings { CanPreview = false }; } } |
Check the complete HTML code provided below. Note that the code does not localize the viewer, see Blazor Viewer Localization for more information.
The localization file for Blazor WebDesigner is custom-resources.json. This file is automatically added to the project in the grapecity.activereports.blazor.designer\staticwebassets\docs\ folder when you install the MESCIUS.ActiveReports.Blazor.Designer NuGet package, which is required when using Blazor WebDesigner. In the 'custom-resources.json' file, you will find the resources stored in the file as shown:
Structure of custom-resources.json |
Copy Code
|
---|---|
{ "ns": "bundle namespace", "lng": "bundle language", "resources": Record<string,any> } |
To add custom localization to the blazor web designer UI,
Sample fr-resources.json |
Copy Code
|
---|---|
[ { "ns": "components", "lng": "fr-FR", "resources": { "appBar": { "btnPreview": "Aperçu", "btnFile": "Déposer", "btnHome": "Maison", "btnInsert": "Insérer", "textUnsavedChanges": "Modifications non enregistrées", "btnParameters": "Paramètres" }, "menu": { "btnClose": "Fermer", "titlePin": "Broche", "btnLayerList": "Couches", "btnGroupEditor": "Éditeur de groupe", "btnReportExplorer": "Explorateur" } } } ] |
Now that we have the translated resource bundles in the 'fr-resources.json' file, load this file and use LocalizationResources and Language APIs to localize the web designer. Here is the complete HTML code provided below. Note that the code does not localize the viewer, see Blazor Viewer Localization for more information.
Complete Index.razor |
Copy Code
|
---|---|
@page "/" @inject IJSRuntime JSRuntime <PageTitle>Index</PageTitle> <div id="designerContainer"> <ReportDesigner @ref="_designer" PreviewSettings=@_preview LocalizationResources=@_localizationResources Language="fr"/> </div> @code { private ReportDesigner _designer; private PreviewSettings _preview; public Index() { _preview = new PreviewSettings { CanPreview = false }; } private LocalizationResources[] _localizationResources; protected override async Task OnInitializedAsync() { _localizationResources = new LocalizationResources[]{ new LocalizationResources(){ Language = "fr", Resources =(await JSRuntime.InvokeAsync<object>("getJsonData", new object[] { "./fr-resources.json" })).ToString() } }; } } |