Form.io Translations

by brendanbond

HTML

<script src="https://cdn.form.io/formiojs/formio.form.min.js"></script>
<link rel="stylesheet" href="https://cdn.form.io/formiojs/formio.form.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div class="btn-group" style="width:100%">
  <button type="button" class="btn btn-success btn-group-item" onclick="setLanguage('fr')">French</button>
  <button type="button" class="btn btn-primary btn-group-item" onclick="setLanguage('en')">English</button>
</div>
<div id="formio"></div>

JavaScript

const languages = {
  fr: true
};
Formio.createForm(document.getElementById('formio'), 'https://devformioapi.hema-quebec.qc.ca/api-dev/csssample', {
  language: 'fr'
}).then(function(form) {
  window.setLanguage = function(lang) {
    // If we already have loaded the language, then just set it with the sdk.
    if (languages[lang]) {
      return form.language = lang;
    }

    // Fetch the language from the Resource.
    Formio.fetch('https://bb-happy-time.form.io/translation/submission?data.language=' + lang).then(function(resp) {
      return resp.json();
    }).then(function(result) {
      // Ensure future sets will use the cached language.
      languages[lang] = true;

      // Add this language.
      form.addLanguage(lang, result[0].data.translations);

      // Set this language.
      form.language = lang;
    });
  }
});