How would you go about translating text inside components that have a custom render?

[socialsuiteDavid]

Are you requesting a feature, reporting a bug or asking a question?

question

What is the expected behavior?

text displayed to the user that is generated inside a custom render be translated when switching locales

In react I am trying to add localization/translation. It has been going well for all normal components. The issue I am having at the moment is that any component that uses custom rendering will obviously not have any translations applied since the rendering is being handled by me.

What is the expected way to translate these cases? Would I just get the locale currently set and apply the translation manually?

Thanks

[andrewtelnov]

@socialsuiteDavid You can use localizable string and translation strings. Please review this code sandbox example. Please let us know if you need more help on this.

Thank you, Andrew

[andrewtelnov]

@RomanTsukanov Let's add this into our documentation. We will need an Angular example at very least.

Thank you, Andrew

[socialsuiteDavid]

Hi @andrewtelnov thank you very much for your reply. Perhaps I'm using surveyjs in a bit of a weird (wrong?) way, but I am having trouble adapting that example to my particular use case.

I have converted that codesandbox: https://codesandbox.io/s/zealous-shirley-v6fh3y to be more like how I am doing things.

Note, line 77, I can pass the localized strings (myString) as the title as that is being handled by the surveyjs render by setting the title in the json but not into the text prop because that is being handled by the custom render.

Would the approach you showed still work in this case? ie. would I need to add the localizable string as a property and do it that way. or is it impossible unless the rendered component (CustomRender in my case) extends from SurveyQuestionElementBase?

[andrewtelnov]

@socialsuiteDavid Your code seems to work. However, you have to decide what do you need from your code. The approach that I have suggested will work in Creator 1) Creator will be able to change locale in the property grid and you will see the changes immediately 2) Changing property in Property Grid will apply to correct locale and JSON will be modified correctly. 3) This property will be available in Translation tab 4) The property will be editable on designer surface. User can modify it in property grid and in the question directly on designer surface.

In run-time, if a user decide to change the survey locale on the fly, your code will not re-render string in a new locale. If you don't need all functionality I have described above then you can use your approach.

Thank you, Andrew

[JaneSjs]

The Implement a Descriptive Text Element demo shows how to create a localizable property.