Blazor WebDesigner Localization

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 Blazor WebDesigner 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).

@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:

{
   "ns": "bundle namespace",
   "lng": "bundle language",
   "resources":  Record<string,any>
}

To add custom localization to the blazor web designer UI,

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

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

   type=note

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

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

   type=note

   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.

3. Now that we have the translated resource bundles in the 'fr-resources.json' file, load this file and use Blazor WebDesigner API 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.

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