Adding Localization for Bold Report Viewer in Blazor Application

Published:

Updated:

In Bold Reports report viewer, we have the ability to localize the static text, such as tooltips, parameter blocks, and dialog text, and also change the culture for a more customized experience. By referring to the corresponding culture script files and setting the culture name to the locale property of the Report Viewer, we can seamlessly render the static text in a specific culture. This localization feature allows us to adapt the report viewer to different languages and cultural contexts, providing a more user-friendly and inclusive interface. With the added capability to change the culture, Bold Reports report viewer offers a comprehensive solution for catering to diverse user needs and enhancing the overall accessibility of the application.

Refer to this CDN links for Localization and Culture to get the Localization and Culture scripts for available Culture Code.

Please follow the below steps to add localization for the bold report viewer in the Blazor application:

Refer to the corresponding culture scripts files ej.localetexts.fr-FR.min.js and ej.culture.fr-FR.min.js in your _Layout.cshtml file in your blazor application.

    <script src=https://cdn.boldreports.com/5.1.20/scripts/l10n/ej.localetexts.fr-FR.min.js></script> 
    <script src=https://cdn.boldreports.com/5.1.20/scripts/i18n/ej.culture.fr-FR.min.js></script>

Pass the values for the locale property in the index.razor page.

    @code {
          // ReportViewer options.
          BoldReportViewerOptions viewerOptions = new BoldReportViewerOptions();
          // Used to render the Bold Report Viewer component on the Blazor page.
          public async void RenderReportViewer()
          {
            viewerOptions.ReportName = "sales-order-detail";
            viewerOptions.ServiceURL = "/api/BoldReportsAPI";
            viewerOptions.Locale = "fr-FR";
            await JSRuntime.InvokeVoidAsync("BoldReports.RenderViewer", "report-viewer", viewerOptions);
          }
          // Initial rendering of Bold Report Viewer.
          protected override void OnAfterRender(bool firstRender)
          {
            RenderReportViewer();
          }
          
          public class BoldReportViewerOptions
          {
            public string ReportName { get; set; }
            public string ServiceURL { get; set; }
            public string Locale { get; set; }
          }
        }

Set the culture name using the locale property in the boldreports-interop.js file in your Blazor application.

     // Interop file to render the Bold Report Viewer component with properties.
     window.BoldReports = {
     RenderViewer: function (elementID, reportViewerOptions) {
     $("#" + elementID).boldReportViewer({
        reportPath: reportViewerOptions.reportName,
        reportServiceUrl: reportViewerOptions.serviceURL,
        locale: reportViewerOptions.locale
             });
         }
     }

Save the changes and build and run the application. Now, the localization will be changed to “fr-FR” culture as follows.

Remember to adjust the version numbers in the CDN links if you are using a different version of Bold Reports. For more information on available culture codes and localization, refer to the CDN links for Localization and Culture page.

Was this article useful?

Dislike

Comments (0)

Adding Localization for Bold Report Viewer in Blazor Application

Access denied