What is the best way to translate single-choice or multiple-choice options in the DB
At the time of writing this the best way to translate a single-choice or multiple-choice option would require the following:
In short, it requires that you define the single-choice or multiple-choice options in both the Data Model
, as per usual, but also in the View Component
that you want to use to present the options to the user.
- Define your model as usual, include
single-choice
and ormultiple-choice
fields:
<model name="model" label="Model">
<field name="answer" label="Answer" type="single-choice">
<option key="Yes">Yes</option>
<option key="No">No</option>
</field>
<field name="options" label="Options" type="multiple-choice">
<option key="Yes">Yes</option>
<option key="No">No</option>
<option key="Maybe">Maybe</option>
</field>
<display>{answer} - {options}</display>
</model>
- In your view, bind your object and field to a
single-choice-dropdown
,single-choice-radio
ormultiple-choice-checklist
component, and include the hardcoded options that the user can select in the component definition - make sure you use the same keys as in your data model.
Finally, use the built-in translate functiont
, or your own custom helper function, to translate the display value for these options.
<single-choice-dropdown bind="model.answer" label="{$:t('select_answer')}" >
<option key="Yes">{$:t('yes')}</option>
<option key="No">{$:t('no')}</option>
</single-choice-dropdown>
<single-choice-radio bind="model.answer" label="{$:t('select_answer')}" >
<option key="Yes">{$:t('yes')}</option>
<option key="No">{$:t('no')}</option>
</single-choice-radio>
<multiple-choice-checklist bind="model.options" label="{$:t('select_options')}" >
<option key="Yes">{$:t('yes')}</option>
<option key="No">{$:t('no')}</option>
<option key="Maybe">{$:t('maybe')}</option>
</multiple-choice-checklist>
- Make sure you add the correct key’s to your language yml files. In my case, the following would be required.
yes: "Yes"
no: "No"
maybe: "Maybe"
select_answer: "Select an answer"
select_options: "Select options"
It seems not to work.
Text inside the tag is treated as plain text, not an expression.
Any ideas?
@viacheslav.yushchenk Can you please reply with the content of your view XML, sharedJS and translation files relevant to this functionality
<?xml version="1.0" encoding="UTF-8"?>
<view title="Single Choice Test">
<var name="single_choice" type="single-choice">
<option key="yes">{$:i18nValue("Yes")}</option>
<option key="no">{$:i18nValue("No")}</option>
</var>
<single-choice-radio bind="single_choice" label="Yes or No?" />
<info>{$:i18nValue('Yes')}</info>
<info>{$:i18nValue('No')}</info>
</view>
function i18nValue(str) {
if(str) {
//Take text to key handle
var _key = str.toLowerCase().replace(/[^0-9a-zA-Z#]+/g, '_');
// All transaltions starts with t. as standard notation in this app
var parsedKey = _key && _key.substring(0,2) === 't.' ? _key : 't.'+_key;
var translation = t(parsedKey);
// If no translation was found we want to return the original string
return translation.substring(0,2) === 't.' ? str : translation;
}
return null;
}
# translations/en_US.yml
t.yes: "¡Yes!"
t.no: "¡No!"
@viacheslav.yushchenk I’ve updated the original answer with the additional options that need to include on the single-choice radio.
@viacheslav.yushchenk We have updated and simplified the answer. Please let us know if you continue to run into any problems