language.html

<article class="docs-article">
    <section class="docs-section" id="internationalization">
        <div>
            <h1>Internationalization</h1>

            <p>This feature enable the user to add new language according to their preference.
                Currently we
                are providing you with six languages :
            <ol>
                <li>English</li>
                <li>Chinese</li>
                <li>Portuguese</li>
                <li>French</li>
                <li>Bulgarian</li>
                <li>German</li>

            </ol>
            </P>
            <h4>To add a new language</h4>
            <ul>
                <li>Select 'resourceBundles' folder from forms-flow-web/src</li>
                <li>Create a folder structure as shown below</li>
                <img src="./assets/images/image (20).png"></img>
                <li>Folder name should be the abbreviation of the required language (example :
                    Bulgarian- bg
                    )</li>
                <li>Create a file named resourceBundles.js inside the folder</li>
                <li>Now open folder 'en' from the same folder 'resourceBundles'</li>
                <li>Copy the content of en/resourceBundles.js and paste it to the newly created file
                </li>


                <li>Change 'EN' to 'BG'</li>
                <li>Copy each value from the "key": "value" and translate the same using google
                    translator to the required language </li>
                <li>Paste the the translated language to the new file</li>
                <li>Import the same file to forms-flow-web/src/resourceBundles/i18n.js like rest of the languages.</li>
                <li>You should add content of new translation file to
                    forms-flow-web/src/resourceBundles/formio_resourceBundles.js also.</li>

                <li>At 'resourceBundles/i18n.js' make the required changes as shown below for
                    'bg' : </li>
<li>
                <pre>
                <code class="hljs">
import i18n from "i18next";
import { initReactI18next } from "react-i18next";
import LanguageDetector from "i18next-browser-languagedetector";
import { RESOURCE_BUNDLES_ZH } from "./zh/resourceBundles";
import { RESOURCE_BUNDLES_EN } from "./en/resourceBundles";
import { RESOURCE_BUNDLES_FR } from "./fr/resourceBundles";
import { RESOURCE_BUNDLES_PT } from "./pt/resourceBundles";
import { RESOURCE_BUNDLES_BG } from "./bg/resourceBundles";
import { RESOURCE_BUNDLES_DE } from "./de/resourceBundles";
i18n
.use(LanguageDetector)
.use(initReactI18next)
.init({
                        
fallbackLng: 'en',
resources: {
fallbackLng: 'en',
"en": {
translation: RESOURCE_BUNDLES_EN
},
"zh-CN": {
translation: RESOURCE_BUNDLES_ZH
},
"pt":  {
translation: RESOURCE_BUNDLES_PT
},
"fr":  {
translation: RESOURCE_BUNDLES_FR
},
"bg":
{
translation: RESOURCE_BUNDLES_BG
},
"de":
{
translation: RESOURCE_BUNDLES_DE
}
                    
 }
});
                      
                    
export default i18n;
                      
                    
</code>
                </pre></li>
        </div>

        <li>Open forms-flow-api/src/formsflow_api/utils/translations/translations.py , copy any set of translations
            ,translate the values and paste it back to the file with required language key.</li>
        <li>You should add the proposed name and value of the language to
            forms-flow-web/public/config/languageData.json.</li>
        <li>Open <a href="http://localhost:3000 ">http://localhost:3000 </a>to see the changes.
        </li>
        <li>Internationalization is now done.</li>

        </ul>

        </div>
    </section>
</article>
<script>hljs.initHighlighting();</script>