How to translate values in the DB (single-choice, multiple-choice)

General Q&A
,
1

What is the best way to translate single-choice or multiple-choice options in the DB

2

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.

  1. Define your model as usual, include single-choice and or multiple-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>
  1. In your view, bind your object and field to a single-choice-dropdown, single-choice-radio or multiple-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 function t, 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>
  1. 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"
3

It seems not to work.
Text inside the tag is treated as plain text, not an expression.
Any ideas?

4

@viacheslav.yushchenk Can you please reply with the content of your view XML, sharedJS and translation files relevant to this functionality

5 
<?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>
6 
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;

}
7 
# translations/en_US.yml

t.yes: "¡Yes!"

t.no: "¡No!"
8

single-choice
single-choice786×593 12.7 KB

9

@viacheslav.yushchenk I’ve updated the original answer with the additional options that need to include on the single-choice radio.

10

@viacheslav.yushchenk We have updated and simplified the answer. Please let us know if you continue to run into any problems