Blazor WebDesigner Localization

In This Topic

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.

Set Blazor WebDesigner UI Language

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 }; } }

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.

Add Custom Localization using Resource Strings

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,

Copy the custom-resources.json file to the 'wwwroot' folder and rename the file to, say, 'fr-resources.json'.

Open 'fr-resources.json' file and translate the strings from the ‘resources’ node to a language, say French. Also, set the ‘lng’ node with an appropriate bundle language.
For example, here we are localizing the WebDesigner component for French language, so the strings must be translated to French language and 'lng' must be set to 'fr-FR'.

Note: In web designer, resources should be assigned to their specific namespace, so do not modify the ‘ns’ node when translating resources.

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" } } } ]

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"
       }
     }
   }
]

Note: As you may notice,
• We have modified only the resource values and left the bundle namespace (e.g., components) and resource section (e.g., appBar, menu) untouched.
• Some of the localization strings are skipped in the above example. The values for which localization strings are missing are by default displayed using EN localization data.

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() } }; } }

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()
           }
        };
    }
}