Localization support with json files.

abhirastogi

created 5 years ago (modified 5 years ago)

Hi Sergey/Andrew,

We spoke earlier regarding the localization support in Dynamics CRM.

The localization tool uses an English localized file and generates other languages files. However, the tool follows below mentioned conventions to generate these files:

File extension should only be json or resx of the localization file.
The localization file should follow the LL-CC naming convention. Eg. For English the file name should be en-US.json, for Hindi: hi-IN.json. I have attached two such files with this mail.

The SurveyJS library uses a TypeScript file for localizations which gets compiled as a part of the library. Is there a way to add a support to consume the json files instead of ts files? Will your team support such a scenario out of the box?

Would be happy to schedule a call in case you have any questions around the same.

Thanks,
Abhishek

en-US.json hi-IN.json

Show previous comments (2)

Serge T 5 years ago

Hello,

Thanks for creating the issue.
I've checked the files you've sent. The english one looks for me as re-worked file from your repo - https://github.com/surveyjs/survey-library/blob/master/src/localization/english.ts. Am I right?

In this case will it be suitable for you to extract a part of our .ts file as a JSON? I've attached the sample below.

Thanks, Serge
SurveyJS Team

en-EN.json

Serge T 5 years ago

Hello Abhishek,

What is the scenario of usage of this localization JSON files?

In case of SurveyJS library this locales are always pre-compiled into the SurveyJS Library code and user can change locale at any time.
If localization strings will be loaded at runtime, the localization strings inside SurveyJS can be changed dynamically at any time using the simple code mapping from your format to ours.

But there is one issue: our localization has sub-objects as you can see from our JSON. And keys in different sub-objects can be the same. To overcome it you need to use composite keys e.g. for

JSON
{
  survey: {
    edit: "Edit",
...

the key should be the "survey.edit"

Thanks, Serge
SurveyJS Team

abhirastogi 5 years ago

Hi Team,

Correct me if I am wrong. My understanding is based on the compiled version of survey.react.js which gets created in packages\srvey-react\surevy.react.js

If I search for englishStrings in this file, I get all the strings that have come from english.ts file. Similarly when I search for ArabicStrings, I get the Arabic strings. I guess this is what you mean by "pre-compiled". We are looking some way to get these json strings get pre-compiled, the only change would be that these strings would get generated from a json file instead of a ts file.

I do not understand the mapping that you have mentioned above like { survey { edit: "Edit" } }. Could you please let me know if my understanding is correct.

Let me know a right time to discuss this over call.

Serge T 5 years ago

Hello Abhishek,

To illustrate my idea I've created a live sample for you. It's very simple and works for SurveyJS Library - https://jsfiddle.net/nta8pfg5/11/

JavaScript
// custom localization JSON
var customLocalizationStringsLoadedFromJSON = {
    "pagePrevText": {
        "Value": "Prev Page Custom Title"
    },
    "pageNextText": {
        "Value": "Next Page Custom Title"
    }
};

// mapping function
// gets strings from custom localization JSON
// and sets them to surveyLocalization
function applyLocalization(locale, customStrings) {
    for(var locStringId in customStrings) {
      Survey.surveyLocalization.locales[locale][locStringId] = customStrings[locStringId].Value;
  }
}

$( document ).ready(function() {

    // set custom strings to the "en" locale of SurveyJS
    applyLocalization("en", customLocalizationStringsLoadedFromJSON);

  window.survey = new Survey.Model({ 
      locale: "en",
      pages: [
      { questions: [
              { type: "text", name: "q1" }
      ]},
      { questions: [
          { type: "text", name: "q2" }
          ]}
  ]});

  $("#surveyElement").Survey({
      model:survey
  });
});

Does it fit your requirements?

Similar approach can be used for SurveyJS Creator, but keys in your JSON should be a bit complex:

JSON
{
    "survey.edit": {
        "Value": "edit"
    },
    "survey.externalHelpLink": {
        "Value": "Watch and learn how to create surveys"
    },
    .....
    // and so on
}

Thanks, Serge
SurveyJS Team

Serge T 5 years ago

Hello Abhishek,

We've discussed these questions with the team and would like to suggest you the following approach:

How to exclude all languages from the survey-react bundle? Unfortunately we can't exclude translations from your survey-react package due to they are used by other our customers. Since you are developing your own descendants of survey-react classes, you can for our repository and create your own custom build of survey library where you can exclude the localization files form the bundle. It is easy to do, just comment out his line https://github.com/surveyjs/survey-library/blob/master/src/entries/react.ts#L5 in the react build entry file.
Create a specific property in survey JSON to store localized strings. If you exclude other languages from the survey bundle. You can simply get your localization JSON and register it as a default strings set via the Survey.surveyLocalization.locales["en"] = myCustomLoclizationStrings; code. Thus your task can be solved without introducing a new property.

Thanks, Serge
SurveyJS Team

Localization support with json files.

Recently viewed tickets