Form multilanguage - sheaphillips/common-hosted-form-service GitHub Wiki

Home > CHEFS Capabilities > Form Multilanguage

Internalization

can be referred to as the design and development of the content, of a product, application, or document, so that it can be localized for target audiences that vary in culture, region, or language. It can also be referred to as the process of designing software to support multiple languages, cultures, and regions.

It involves considering various aspects of software development, such as user interface, data storage, and communication protocols, to ensure they are compatible with different languages and cultural norms. The benefits or importance of internalization is that

  1. it enhances user experience,
  2. it meets legal requirements,
  3. it improves localization, and
  4. it expands reach.

The list of languages currently supported by CHEFS is below:

  • Arabic : keyword: 'ar'
  • German : keyword: 'de'
  • English : keyword: 'en'
  • Español (Spanish) : keyword: 'es'
  • فارسی (Farsi) : keyword: 'fa'
  • Français (French) : keyword: 'fr'
  • हिंदी (Hindi) : keyword: 'hi'
  • Italian : keyword: 'it'
  • 日本語 (Japanese) : keyword: 'ja'
  • 한국어 (Korean) : keyword: 'ko'
  • ਪੰਜਾਬੀ (Punjabi) : keyword: 'pa'
  • Portuguese: keyword: 'pt'
  • Русский (Russian) : keyword: 'ru'
  • Tagalog (Filipino) : keyword: 'tl'
  • Українська (Ukrainian) : keyword: 'uk'
  • Tiếng Việt (Vietnamese) : keyword: 'vi'
  • 简体中文 (Simplified Chinese) : keyword: 'zh'
  • 繁體中文 (Traditional Chinese) : keyword: 'zhTW'

The example below shows the CHEFS homepage in the English language, and after the language switch to the French language, it shows looks like in the French Language.

After the switching to the French language Screenshot 2023-05-26 143204

Attention Form Designers:

Designing multi-language forms is a different process from translation in CHEFS and Form.io. Please follow the steps below on how to design one

Steps:

  1. Drag the component called "Hidden" onto your Form (this is found on the "Advanced Data" section)
  2. In the logic tab of the component, click on the "Add Logic" button
  3. For the Logic Name field let's type "translations"
  4. For the Trigger type, select "javascript"
  5. copy and paste the code below into the Text Area of the javascript
   const { root} = instance;
   const i18 = root.i18next;
   i18.addResources("en", "translation", {"Last Name": "Last Name", "First Name": "First Name" });
   i18.addResources("fr", "translation", {"Last Name": "Nom de famille", "First Name": "Prénom" });
  1. Add more language(s) by copying and pasting a new line to the end of the file,
  2. Change "fr" to the shortcode of the languages you want in your translation
  3. put in the comma separated list of translations ("English phrase" : "translated phrase",)

If you had lots of phrases to translate you can format your translation file like this

   const { root} = instance;
   const i18 = root.i18next;
   // repeat this section for each language
   i18.addResources("en", "translation", {
      "First Phrase": "First translated phrase", // repeat one of these lines for each translated phrase
      "Second Phrase": "Second translated phrase",  
      "Third Phrase": "Third translated phrase" // last translation line has no comma
   });
   // end repeat section for each language

If you want the sample code for the top 14 languages in BC you copy the following code to get you started:


const { root } = instance;
const i18 = root.i18next;

// English translations
i18.addResources("en", "translation", {
  "First Phrase": "First translated phrase",
  "Second Phrase": "Second translated phrase",
  "Third Phrase": "Third translated phrase",
  "Last Name": "Last Name",
  "First Name": "First Name"
});

// French translations
i18.addResources("fr", "translation", {
  "First Phrase": "Première phrase traduite",
  "Second Phrase": "Deuxième phrase traduite",
  "Third Phrase": "Troisième phrase traduite",
  "Last Name": "Nom de famille",
  "First Name": "Prénom"
});


// Arabic translations
i18.addResources("ar", "translation", {
  "First Phrase": "العبارة المترجمة الأولى",
  "Second Phrase": "العبارة المترجمة الثانية",
  "Third Phrase": "العبارة المترجمة الثالثة",
  "Last Name": "الكنية",
  "First Name": "الاسم الأول"
});

// Chinese (Simplified) translations
i18.addResources("zh", "translation", {
  "First Phrase": "翻译后的第一句",
  "Second Phrase": "翻译后的第二句",
  "Third Phrase": "翻译后的第三句",
  "Last Name": "姓氏",
  "First Name": "名字"
});

// Chinese (Traditional) translations
i18.addResources("zhTW", "translation", {
  "First Phrase": "翻譯後的第一句",
  "Second Phrase": "翻譯後的第二句",
  "Third Phrase": "翻譯後的第三句",
  "Last Name": "姓氏",
  "First Name": "名字"
});

// German translations
i18.addResources("de", "translation", {
  "First Phrase": "Erster übersetzter Satz",
  "Second Phrase": "Zweiter übersetzter Satz",
  "Third Phrase": "Dritter übersetzter Satz",
  "Last Name": "Nachname",
  "First Name": "Vorname"
});

// Hindi translations
i18.addResources("hi", "translation", {
  "First Phrase": "पहला अनुवादित वाक्य",
  "Second Phrase": "दूसरा अनुवादित वाक्य",
  "Third Phrase": "तीसरा अनुवादित वाक्य",
  "Last Name": "उपनाम",
  "First Name": "नाम"
});

// Italian translations
i18.addResources("it", "translation", {
  "First Phrase": "Prima frase tradotta",
  "Second Phrase": "Seconda frase tradotta",
  "Third Phrase": "Terza frase tradotta",
  "Last Name": "Cognome",
  "First Name": "Nome"
});

// Japanese translations
i18.addResources("ja", "translation", {
  "First Phrase": "最初の翻訳されたフレーズ",
  "Second Phrase": "2番目の翻訳されたフレーズ",
  "Third Phrase": "3番目の翻訳されたフレーズ",
  "Last Name": "姓",
  "First Name": "名"
});

// Korean translations (continued)
i18.addResources("ko", "translation", {
  "First Phrase": "첫 번째 번역된 구절",
  "Second Phrase": "두 번째 번역된 구절",
  "Third Phrase": "세 번째 번역된 구절",
  "Last Name": "성",
  "First Name": "이름"
});

// Persian (Farsi) translations
i18.addResources("fa", "translation", {
  "First Phrase": "اولین عبارت ترجمه شده",
  "Second Phrase": "دومین عبارت ترجمه شده",
  "Third Phrase": "سومین عبارت ترجمه شده",
  "Last Name": "نام خانوادگی",
  "First Name": "نام"
});


// Portuguese translations
i18.addResources("pt", "translation", {
  "First Phrase": "Primeira frase traduzida",
  "Second Phrase": "Segunda frase traduzida",
  "Third Phrase": "Terceira frase traduzida",
  "Last Name": "Último Nome",
  "First Name": "Primeiro Nome"
});

// Punjabi translations
i18.addResources("pa", "translation", {
  "First Phrase": "ਪਹਿਲਾਂ ਅਨੁਵਾਦਿਤ ਵਾਕ",
  "Second Phrase": "ਦੂਜਾ ਅਨੁਵਾਦਿਤ ਵਾਕ",
  "Third Phrase": "ਤੀਜਾ ਅਨੁਵਾਦਿਤ ਵਾਕ",
  "Last Name": "ਆਖਰੀ ਨਾਂ",
  "First Name": "ਪਹਿਲਾ ਨਾਂ"
});

// Russian translations
i18.addResources("ru", "translation", {
  "First Phrase": "Первая переведенная фраза",
  "Second Phrase": "Вторая переведенная фраза",
  "Third Phrase": "Третья переведенная фраза",
  "Last Name": "Фамилия",
  "First Name": "Имя"
});


// Spanish translations
i18.addResources("es", "translation", {
  "First Phrase": "Primera frase traducida",
  "Second Phrase": "Segunda frase traducida",
  "Third Phrase": "Tercera frase traducida",
  "Last Name": "Apellido",
  "First Name": "Nombre"
});


// Tagalog translations
i18.addResources("tl", "translation", {
  "First Phrase": "Unang salitang isinalin",
  "Second Phrase": "Pangalawang salitang isinalin",
  "Third Phrase": "Ikatlong salitang isinalin",
  "Last Name": "Apelyido",
  "First Name": "Pangalan"
});


// Ukrainian translations
i18.addResources("uk", "translation", {
  "First Phrase": "Перший перекладений фраза",
  "Second Phrase": "Другий перекладений фраза",
  "Third Phrase": "Третій перекладений фраза",
  "Last Name": "Прізвище",
  "First Name": "Ім'я"
});

// Vietnamese translations
i18.addResources("vi", "translation", {
  "First Phrase": "Cụm từ dịch đầu tiên",
  "Second Phrase": "Cụm từ dịch thứ hai",
  "Third Phrase": "Cụm từ dịch thứ ba",
  "Last Name": "Họ",
  "First Name": "Tên"
});