Default localization

Hi ,

Suppose I have only configured French & German question on SurveyBuilder. I want to display French & German in SurveyJS (respond Survey) so that when French is selected user can answer in French laungauage & When German is selected user can answer in German. How Can i get Values of locale (French & German ) configured on SurveyBuilder on SurveyJs(respond Survey) side while responding Question ?

Any help on this problem will be appreciated.

Hello Gregory,
Could you please look at this example?
In the "Test Survey" tab the user may choose the language. You may set survey.locale=myUserLocale; to the locale (language) you need based on your website options or try to get your using OS locale. Here is the question on stackoverflow.com best-way-to-determine-users-locale-within-browser).

Thank you,
Andrew
SurveyJS Team

Thanks , In my scenario user can respond to Survey in French or English. Therefore there should be provision on responder side to select the language. Suppose on Survey Builder Survey is configured with English & French Locale , On responder (Survey JS) side there should be an option for user to choose language ( either English or French ) to respond survey.

Here is the example that change survey locale based on html selector value.

Thank you,
Andrew
SurveyJS Team

Thanks , How i will know on responder side that SurveyBuilder is not configured in French or English. I don't want to show combo having all possible language option to Responder.

You may reduce the number of supported languages as this:

JavaScript
Survey.surveyLocalization.supportedLocales = ["en", "de", "es", "fr"];  

Or you may use:
creator.translation.locales - it will return the list of using locales in your survey JSON.

Thank you,
Andrew
SurveyJS Team

How I will get locale on SurveyJS side ? I don't want locale detail on SurveyBuilder side.

Do you mean SurveyJS Library? Could you please describe your task? You are starting asking one question and then asking another one, and I am loosing the context completely. As result we are getting a ping-pong instead of solving your task and go further.

So, you want to show the language selector for SurveyJS Library widget (runner), but you do not want to have the predefined languages and you want to fill the language selector based on survey JSON, am I correct?

We do not have the code for getting using locales (languages) in the SurveyJS Library.
As a workaround, you may save the using locales together with Survey JSON in a separate database column using creator.translation.locales code and then retrieve the list of locales together with survey JSON into your survey widget page. It should work nicely.

Thank you,
Andrew
SurveyJS Team

In fact, it should not be hard to implement survey.getUsedLocales() function that returns all locales that are used in the current survey. We can do it, if this is what you need. I can be useful for others as well.

Thank you,
Andrew
SurveyJS Team

Thanks Andrew , Please check my comments below.

Do you mean SurveyJS Library? Could you please describe your task? You are starting asking one question and then asking another one, and I am loosing the context completely. As result we are getting a ping-pong instead of solving your task and go further.
[Yuvraj] - Yes your understanding is correct.

So, you want to show the language selector for SurveyJS Library widget (runner), but you do not want to have the predefined languages and you want to fill the language selector based on survey JSON, am I correct?
[Yuvraj] - Yes I want to show language selector for SurveyJS Library widget (runner) depending on the laungauge configured on Survey Builder Side.

We do not have the code for getting using locales (languages) in the SurveyJS Library.
As a workaround, you may save the using locales together with Survey JSON in a separate database column using creator.translation.locales code and then retrieve the list of locales together with survey JSON into your survey widget page. It should work nicely.
[Yuvraj] - If we don't have any provision on SurveyJS Library widget (runner) side for determining the languages configured on SurveyBuilder Side , we can store various locale configured on Survey Builder in database & use it on SurveyJS Library widget (runner) side.

Good. We are on the same page now.
Let me work on survey.getUsedLocales() function. I believe I can implement it relatively easy. We need it for SurveyJS Creator as well, for "Test Survey" tab.
I will update the issue ASAP.

Thank you,
Andrew

Thanks a lot Andrew,

Are you planning to add getUsedLocales() function on SurveyBuilder Side ? Once it is implemented it would return various locale configured on Survey Builder Side & these locale can be stored in database.
Locales stored in database can be used to populate combo on SurveyJS Library widget (runner). On choosing a particular value of locale in combo we can invoke a method which will set value of locale in SurveyJS Library widget (runner) Model as below -

Survey.Model.locale = Value selected from combo.

And thus language on page will be rendered accordingly.Please let me know if my understanding is correct or not.

I am working on adding getUsedLocales() into the library: survey.getUsedLocales() - it will return all locales that used in the "localizable" strings in survey.
In this case, you do not need to store locales into database, only survey JSON as you do it now.
You will create SurveyJS widget based on JSON and SurveyJS widget (in fact Survey model) tells you what locales are here by calling new getUsedLocales() function.

Thank you,
Andrew
SurveyJS Team

I have added this function.
Here is the related issue on GitHub.
Please let me know if you was looking for this functionality.

Thank you,
Andrew
SurveyJS Team

Hi Andrew,

I still need some help . Let me explain you my requirement again.

1. On SurveyBuilder(survey-creator) side I have added couple of question. On Translation tab I have added two languages ( Bulgarian & Deutsch ) using 'select language to translate' combo. Added corresponding Bulgarian & Deutsch text using Google translator. And we have added save button which will save JSON in database.

2. On Surveyrunner (survey-angular) side - I want to display a combo which will have values of language as Bulgarian & Deutsch. Selecting particular value in combo it should change locale & text of Question should be translated accordingly. How I will get values of languages in order to populate combo box ?
   On which object getUsedLocales() method should be invoked ?

Please let me know if you have questions ?

Thanks,
Yuvraj

Hello,

According the commit info (https://github.com/surveyjs/survey-library/commit/03fdebde6dc5bb744da8ad3f0aa6940366e8c632) the getUsedLocales method can be invoked on the client side: survey.getUsedLocales().
Does it fir your scenario?

Thanks, Serge
SurveyJS Team

Hi,

In which version survey.getUsedLocales() method will be available so that i can download & test it.

Regards,
Yuvraj

In the v 1.0.99 that is being released right now. I hope tomorrow you can test it.

Thanks, Serge
SurveyJS Team

Thanks Serge,

I will take v 1.0.99 tommorow & test survey.getUsedLocales() method.

Also does "survey.onAfterRenderPage" is available in v 1.0.99 ?

Regards,
Yuvraj

Great! However, I suggest to move to v1.1.0 because of this issue.

Thank you,
Andrew
SurveyJS Team

Thanks.

Is there any way in to figure language name from Locale value in SurveyJS. Or I should use any other Java Script library ?

Hello,
var deLocaleName = Survey.surveyLocalization.localeNames["de"];
deLocaleName will be equal to "deutch".

Thank you,
Andrew
SurveyJS Team

Thanks this works fine. One last Question getUsedLocales() method returns array of values in which one value is default. What does default locale means ?

It is your default locale: Survey.surveyLocalization.defaultLocale
You know, I think I will replace the default locale with the real one. It doesn't make sense to show the 'default' locale in the html selector.

Thank you,
Andrew
SurveyJS Team

Alright & Thanks for your input. When are u planning to release default locale with the real one ?

I have just implemented this via this commit.
We will release the next minor on the next week, likely on Tuesday. The release will include this change.

Thank you,
Andrew
SurveyJS Team

Hi ,

I have implemented locale change feature on Survey Runner Side.

1.Added combo box on Survey runner side & it is populated with Languages using getUsedLocales() method.
2.On selection of combo box locale of language is changed by setting locale value to surveyModel.locale.

But I am facing on weired issue , After selecting locale value in combo box the value of locale is properly selected but the text displayed on combo is not changing.

for e.g If SurveyBuilder is configured with two languages English(default) & French , the combobox displayed on survey runner will show two values English & French. By default English will be selected & if select french language is selected , Question displayed on Survey runner are properly converted to French launguage, but the French value selected on combo box is not set, combobox always displays English language even if French language is selected.

This is because of surveyModel.render() method invoked in onchange() method. if I comment out following two line of code in onchange method Combo selection is working properly but the language of question is not changed.

select.onchange = function (val) {
// surveyModel.locale = langMap.get(val.target['value']);
// surveyModel.render();
};

Can you please tell if it is the correct way to set locale ? or do I need to take any other approach ?

I have added following piece of code in onAfterRenderSurvey method.

surveyModel.onAfterRenderSurvey.add((survey, options) => {
if (surveyModel.getUsedLocales().length > 1) {
let langMap = new Map<string, string>();
const select:any = document.createElement('select');
select.style.width = "100px";
surveyModel.getUsedLocales().forEach((localeVal) => {
if (localeVal == 'default') {
localeVal = Survey.surveyLocalization.defaultLocale;
}
var langName = Survey.surveyLocalization.localeNames[localeVal];
var langLocale = localeVal;
langMap.set(langName, langLocale);

var option = document.createElement("option");
option.value = langName;
option.text = langName;
select.add(option);
});

select.onchange = function (val) {
surveyModel.locale = langMap.get(val.target['value']);
surveyModel.render();
};

const header = document.querySelector('.sv_header');
header.appendChild(select);
}
});