Search results

Localization of Bold Reports HTML5 JavaScript Report Viewer

Localization of HTML5 JavaScript Report Viewer allows you to localize the static text such as tooltip, parameter block, and dialog text based on a specific culture. To render the static text with specific culture, refer to the following corresponding culture script files and set culture name to the locale property of the Report Viewer.

* `ej.localetexts.fr-FR.min.js`
* `ej.culture.fr-FR.min.js`

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

Refer the ej.localetexts.fr-FR.min.js from cdn using the following code.

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

Refer the ej.culture.fr-FR.min.js from cdn using the following code.

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

Whether you want to get the localization script as local then install the BoldReports.Global NuGet package in your application.

 <script src="scripts/l10n/ej.localetexts.fr-FR.min.js"></script>
 <script src="scripts/i18n/ej.culture.fr-FR.min.js"></script>

You can edit and preview the Report Viewer localization using the following.

index.html

index.js

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>Localization</title>
    <meta name="description" content="Render the report in french locale" />
    <link rel="shortcut icon" href="favicon.ico" />
    <link href="https://cdn.boldreports.com/5.4.20/content/material/bold.reports.all.min.css" rel="stylesheet" />
    <link href="https://cdn.boldreports.com/5.4.20/content/material/bold.reportdesigner.min.css" rel="stylesheet" />

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdn.boldreports.com/external/jsrender.min.js"></script>

    <!-- Gauge -->
    <script src="https://cdn.boldreports.com/5.4.20/scripts/common/ej2-base.min.js"></script>
    <script src="https://cdn.boldreports.com/5.4.20/scripts/common/ej2-data.min.js"></script>
    <script src="https://cdn.boldreports.com/5.4.20/scripts/common/ej2-pdf-export.min.js"></script>
    <script src="https://cdn.boldreports.com/5.4.20/scripts/common/ej2-svg-base.min.js"></script>
    <script src="https://cdn.boldreports.com/5.4.20/scripts/data-visualization/ej2-circulargauge.min.js"></script>
    <script src="https://cdn.boldreports.com/5.4.20/scripts/data-visualization/ej2-lineargauge.min.js"></script>
    <script src="https://cdn.boldreports.com/5.4.20/scripts/data-visualization/ej2-maps.min.js"></script>

    <!-- Reports -->
    <script src="https://cdn.boldreports.com/5.4.20/scripts/common/bold.reports.common.min.js"></script>
    <script src="https://cdn.boldreports.com/5.4.20/scripts/common/bold.reports.widgets.min.js"></script>
    <script src="https://cdn.boldreports.com/5.4.20/scripts/common/bold.report-designer-widgets.min.js"></script>
    <script src="https://cdn.boldreports.com/5.4.20/scripts/bold.report-viewer.min.js"></script>
    <script src="https://cdn.boldreports.com/5.4.20/scripts/bold.report-designer.min.js"></script>

    <!-- Data Visulaization -->
    <script src="https://cdn.boldreports.com/5.4.20/scripts/data-visualization/ej.bulletgraph.min.js"></script>
    <script src="https://cdn.boldreports.com/5.4.20/scripts/data-visualization/ej.chart.min.js"></script>

    <!-- Codemirror -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.47.0/codemirror.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.47.0/addon/hint/show-hint.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.47.0/addon/hint/sql-hint.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.47.0/mode/sql/sql.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.47.0/mode/vb/vb.min.js"></script>

    <link href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.47.0/codemirror.css" rel="stylesheet" />
    <link href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.47.0/addon/hint/show-hint.css" rel="stylesheet" /> 
</head>

<body>
    <div class="splash">
        <div class="message">JavaScript Reports</div>
        <div class="loader">
            <div class="bounce1"></div>
            <div class="bounce2"></div>
            <div class="bounce3"></div>
        </div>
    </div>
    <style>
        html {
            height: 100%;
        }

        body {
            height: 100%;
            margin: 0;
            width: 100%;
            overflow: hidden;
        }

        ej-sample,
        ej-reportdesigner {
            display: block;
            height: inherit;
            width: inherit;
        }

        .splash {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translateY(-50%) translateX(-50%);
        }

        .message {
            text-align: center;
            font-size: 40px;
            margin-bottom: 20px;
        }

        .loader {
            margin: auto;
            width: 70px;
            text-align: center;
            position: relative;
        }

        .loader>div {
            width: 18px;
            height: 18px;
            background-color: black;
            border-radius: 100%;
            display: inline-block;
            -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
            animation: sk-bouncedelay 1.4s infinite ease-in-out both;
        }

        .loader .bounce1 {
            -webkit-animation-delay: -0.32s;
            animation-delay: -0.32s;
        }

        .loader .bounce2 {
            -webkit-animation-delay: -0.16s;
            animation-delay: -0.16s;
        }

        @-webkit-keyframes sk-bouncedelay {

            0%,
            80%,
            100% {
                -webkit-transform: scale(0);
            }

            40% {
                -webkit-transform: scale(1);
            }
        }

        @keyframes sk-bouncedelay {

            0%,
            80%,
            100% {
                -webkit-transform: scale(0);
                transform: scale(0);
            }

            40% {
                -webkit-transform: scale(1);
                transform: scale(1);
            }
        }
    </style>
    <script src="http://cdn.boldreports.com/5.4.20/scripts/l10n/ej.localetexts.fr-FR.min.js"></script>
<script src="http://cdn.boldreports.com/5.4.20/scripts/i18n/ej.culture.fr-FR.min.js"></script>
<div id="viewer"></div>
    <script src="index.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            document.getElementsByClassName("splash")[0].style.display = "None";
        });
    </script>
</body>

</html>

$(function () {
                var dataValue = "";
                var apiRequest = new Object({
                    password: "demo",
                    userid: "guest"
                    });

                $.ajax({
                    type: "POST",
                    url: "https://on-premise-demo.boldreports.com/api/get-user-key",
                    data: apiRequest,
                    success: function (data) {
                        dataValue = data.Token;
                        var token = JSON.parse(dataValue);

                        $("#viewer").boldReportViewer(
                            {
                                reportServiceUrl: "https://on-premise-demo.boldreports.com/ReportService/api/Viewer",
                                serviceAuthorizationToken: token.token_type + " " + token.access_token,
                                reportPath: '/Sample Reports/Sales Order Detail',
                                //Render Report Viewer in French locale
                                locale: "fr-FR"
                            });
                    }
                });
            });

Please provide additional information

Thank you for your feedback and comments.We will rectify this as soon as possible!