Cart Licenses Contact Support Online Creator Log in/Register
Try
Buy
v 1.9.50

Survey Creator Interface Localization


                        

// Override individual translations in an existing locale
const deuLocale = SurveyCreator.localization.getLocale("de");
deuLocale.ed.addNewQuestion = "Neue Frage";
deuLocale.ed.addNewTypeQuestion = "Neue {0}";

// Enable the Deutsch locale
SurveyCreator.localization.currentLocale = "de"; 

const options = { showLogicTab: true };            
                var creator = new SurveyCreator.SurveyCreator(options);
            
                
                    ReactDOM.render(
                    <React.StrictMode>
                        <SurveyCreator.SurveyCreatorComponent creator={creator} />
                    </React.StrictMode>,
                    document.getElementById("creatorElement")
                    );
                

                    
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Survey Creator Interface Localization, Survey Creator Example</title>
    
<meta name="viewport" content="width=device-width" />
    <script src="https://unpkg.com/react@17.0.1/umd/react.production.min.js"></script>
    <script src="https://unpkg.com/react-dom@17.0.1/umd/react-dom.production.min.js"></script>
    <script src="https://unpkg.com/@babel/standalone@7.2.5/babel.min.js"></script>
    <script src="/DevBuilds/survey-core/survey.core.min.js"></script>
    <script src="/DevBuilds/survey-core/survey.i18n.min.js"></script>
    <script src="/DevBuilds/survey-react-ui/survey-react-ui.min.js"></script>
    <link href="/DevBuilds/survey-core/defaultV2.min.css" type="text/css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.10/ace.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.10/ext-language_tools.js" type="text/javascript" charset="utf-8"></script>
    <!-- Uncomment to enable Select2
    <script src="https://unpkg.com/jquery"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
    -->
        <script src="/DevBuilds/survey-creator-core/survey-creator-core.min.js"></script>
        <link href="/DevBuilds/survey-creator-core/survey-creator-core.min.css" type="text/css" rel="stylesheet" />
        <script src="/DevBuilds/survey-creator-core/survey-creator-core.i18n.min.js"></script>
        <script src="/DevBuilds/survey-creator-react/survey-creator-react.min.js"></script>
        <style>
            :root {
                --tab-min-height: 600px;
            }
        </style>
    <link rel="stylesheet" href="./index.css">

</head>
<body style="margin: 0">
    
<div id="surveyContainer">
            <div id="creatorElement" style="height: 100vh;"></div>
</div>

<script type="text/babel" src="./index.js"></script>

</body>
</html>

Localization is the adaptation of a product to the local language of its users. Survey Creator supports UI translation into over 30 languages out of the box. Translated strings are shipped as dictionary files. The localization engine that works with the dictionaries is available as a separate script/module. Reference this script in the <head> tag of your page or import this module into the component that renders Survey Creator:

<script src="https://unpkg.com/survey-creator-core/survey-creator-core.i18n.min.js"></script>
import "survey-creator-core/survey-creator-core.i18n";

The default language for UI elements is English. To select another language, set the localization.currentLocale property. This demo shows Survey Creator UI translated into German.

If you want to change individual UI translations, get an object with all translation strings for a specific locale and override the required properties in this object. You can find a full list of available properties in the English dictionary. Refer to the JavaScript tab for a code example.

You can also introduce a custom locale to override multiple UI translations in a batch. Declare an object with your translations and assign it to the locales["localeName"] property. The following code shows how to do it in a separate TypeScript translation file (dictionary):

// custom-locale.ts
import { editorLocalization } from 'survey-creator-core';

const customLocaleStrings = {
  ed: {
    addNewQuestion: "New Question",
    deletePage: "Remove Page"
  }
};

editorLocalization.locales["customlocale"] = customLocaleStrings;
import './localization/custom-locale.ts'
import { localization } from "survey-creator-core";
// ...
// Activate the custom locale
localization.currentLocale = "customlocale";

If any translation strings are missing in your custom locale, they will be taken from the default English locale. You can specify the defaultLocale property to use another locale as default:

editorLocalization.defaultLocale = "fr";