Formio translate/language

[SergeyMelnyk]

Hello everyone, how i can get any languages for builder? and it possible?

[cmcortez]

Yes, it is! Please review our multi-language form example available in our SDK: https://formio.github.io/formio.js/app/examples/language.html

[darshanksexathought]

@cmcortez how do you do this from react-formio ? cant find any doc on how to do this in react formio

[mm-dsibinski]

+1 to this issue. We can change the form's language in JS in then() after createForm() finishes, but how to achieve that in React FormIO? @travist ?

[darshanksexathought]

For React Formio , In the options, you can give something like this will convert all the matched keys to respective values even you can give component name also

<FormBuilder
          key={form._id}
          form={form}
          onChange={(schema) => onChange(schema, section, index)}
          onEditComponent={this.handleEdit}
          options={{
            template: 'bootstrap',
            iconset: 'fa',
            language: 'sp',
  i18n: {
    sp: {
      'First Name': 'Nombre de pila',
      'Last Name': 'Apellido',
      'Enter your first name': 'Ponga su primer nombre',
      'Enter your last name': 'Introduce tu apellido',
      'How would you rate the Form.io platform?': '¿Cómo calificaría la plataforma Form.io?',
      'How was Customer Support?': '¿Cómo fue el servicio de atención al cliente?',
      'Overall Experience?': '¿Experiencia general?',
      Survey: 'Encuesta',
      Excellent: 'Excelente',
      Great: 'Estupendo',
      Good: 'Bueno',
      Average: 'Promedio',
      Poor: 'Pobre',
      'Submit': 'Enviar'
    },
    ch: {
      'First Name': '名字',
      'Last Name': '姓',
      'Enter your first name': '输入你的名字',
      'Enter your last name': '输入你的姓氏',
      'How would you rate the Form.io platform?': '你如何评价Form.io平台？',
      'How was Customer Support?': '客户支持如何？',
      'Overall Experience?': '总体体验？',
       Survey: '调查',
      Excellent: '优秀',
      Great: '大',
      Good: '好',
      Average: '平均',
      Poor: '错',
      'Submit': '提交'
    }
  },/>

[mm-dsibinski]

@darshanksexathought yeah, I know that. I was wondering how, in the example you provided, I can change only the form's language, but not the builder. So let's say that I display FormBuilder in Spanish, but the form inside it in Chinese.

[darshanksexathought]

So just rephrasing your question you want the builder to be in Spanish and form inside it in Chinese? if this is not correct then give an example so that I can understand your problem clearly

[mm-dsibinski]

Yes, exactly. Imagine that an administrator, who is responsible for creating forms speak Spanish. So the FormBuilder and its elements for building forms (buttons, tabs etc.) should be in Spanish. However, the company also uses multi-language forms. So someone else translated the form to another languages like Chinese. Now the administrator wants to see the Chinese version of the form inside the FormBuilder. (S)he wants to see Chinese version to be sure everything looks and works fine (e.g. custom validation rules that can be defined in FormBuilder). But in the same time the FormBuilder should remain in Spanish, because the administrator may not know Chinese.

This is a real case scenario from our customers. We have another scenario, in which the FormBuilder is translated into different language, but the forms' content must always be displayed as user typed it (not translated). This is also impossible, because if you provide i18n translations to FormBuilder it also uses them on form's contents. But that's another story.

[darshanksexathought]

Okay there is no option to translate any language automatically only the predefined set of key-value pairs will be translated based on the required language

[mm-dsibinski]

I know that ;) I want to use predefined i18n json with translations, but still set different display languages for form and FormBuilder. But didn't find any way to do that.

[darshanksexathought]

of course, you can do it if you are using predefined keys then you can switch between the languages based on the user in both builder as well as form renderer so here you can switch between the languages like for builder if you want as I showed in the above example you can give the language based on the user similarly in the form render as well like this language: 'sp', this you can set dynamically based on the user so that it will pic the respective language based on the user

<Form
						options={{ readOnly: true ,
							language: 'sp',
							i18n: {
							  sp: {
								'First Name': 'Nombre de pila',
								'Text Field': 'Apellido',
								'Enter your first name': 'Ponga su primer nombre',
								'Enter your last name': 'Introduce tu apellido',
								'How would you rate the Form.io platform?': '¿Cómo calificaría la plataforma Form.io?',
								'How was Customer Support?': '¿Cómo fue el servicio de atención al cliente?',
								'Overall Experience?': '¿Experiencia general?',
								Survey: 'Encuesta',
								Excellent: 'Excelente',
								Great: 'Estupendo',
								Good: 'Bueno',
								Average: 'Promedio',
								Poor: 'Pobre',
								'Submit': 'Enviar'
							  },
							  ch: {
								'First Name': '名字',
								'Last Name': '姓',
								'Enter your first name': '输入你的名字',
								'Enter your last name': '输入你的姓氏',
								'How would you rate the Form.io platform?': '你如何评价Form.io平台？',
								'How was Customer Support?': '客户支持如何？',
								'Overall Experience?': '总体体验？',
								 Survey: '调查',
								Excellent: '优秀',
								Great: '大',
								Good: '好',
								Average: '平均',
								Poor: '错',
								'Submit': '提交'
							  }
							}}}/>

[mm-dsibinski]

Thanks for answering @darshanksexathought , but you still don't get me ;) Form component is all good. I know we can display it in a language provided as a language in options. What I want is to display FormBuilder component and set a different language for the builder and form the form displayed within that builder.

Let me show you a screenshot:

There's only a FormBuilder displayed. I want part 1 (so the form builder's elements itself) displayed with language A, but the form inside it (part 2) in language B.

[darshanksexathought]

Okay got it, if this is the requirement then its not possible with the current formiojs , but you can clone the repo and modify the code and take two language input in the options and modify the logic. but from the requirement standpoint, I don't know why a single person has to see two different languages on the same page, maybe I am thinking in a different way, is it like to show the preview of a different language there itself?, if so then you can have your custom button in your application that will open up a popup and you can render the created form over there and change the language dynamically.

[mm-dsibinski]

The issue originated from this bug: https://github.com/formio/formio.js/issues/3531 Actually I tried to workaround that by setting a non-existing language on the form definition. It would make the builder be translated, but the form's contents not.

Then I realized setting different languages for FormBuilder and the form within it might be a real use case (see my previous comment). Anyway, I don't want to make library code changes, I'd like to stick to standard. In that case I'll wait for https://github.com/formio/formio.js/issues/3531 and ignore the different languages setting for now.

[chencym321]

Hi, I render the form with follow code and form works fine and it does translate but I get an warning

react-jsx-dev-runtime.development.js:97 Warning: Failed prop type: Form: prop type options.readOnly is invalid; it must be a function, usually from the prop-types package, but received undefined.

does anyone have any idea about it?

<Form
    form={props.applicationForm}
    onSubmit={({ data }) => {
        props.submitApplication({ programGroupId: 'acs', applicationData: data });
    }}
    options={{
        readOnly: false,
        language: 'ch',
        i18n: {
            sp: {
            'First Name': 'Nombre de pila',
            'Last Name': 'Apellido',
            'Enter your first name': 'Ponga su primer nombre',
            'Enter your last name': 'Introduce tu apellido',
            'How would you rate the Form.io platform?': '¿Cómo calificaría la plataforma Form.io?',
            'How was Customer Support?': '¿Cómo fue el servicio de atención al cliente?',
            'Overall Experience?': '¿Experiencia general?',
            Survey: 'Encuesta',
            Excellent: 'Excelente',
            Great: 'Estupendo',
            Good: 'Bueno',
            Average: 'Promedio',
            Poor: 'Pobre',
            'Submit': 'Enviar'
            },
            ch: {
            'First Name': '名字',
            'Last Name': '姓',
            'Enter your first name': '输入你的名字',
            'Enter your last name': '输入你的姓氏',
            'How would you rate the Form.io platform?': '你如何评价Form.io平台？',
            'How was Customer Support?': '客户支持如何？',
            'Overall Experience?': '总体体验？',
            Survey: '调查',
            Excellent: '优秀',
            Great: '大',
            Good: '好',
            Average: '平均',
            Poor: '错',
            'Submit': '提交'
            }
        }
        }}
/>

[mm-dsibinski]

@chencym321 I've been seeing this same warning lately. However, I've never reported it - most of the issues I report are never fixed, so I decided to live with it ;)

[TanyaGashtold]

I am closing the issue as it was created too long ago and there are no new comments here. I hope it was resolved. If not, please reopen it. Thanks!

[abhishek0196]

How can we translate dynamic values?

lets say I have the following code

Formio.createForm(document.getElementById('formio'), 'https://wzddkgsfhfvtlmv.form.io/translations', {
 language: 'sp',
  i18n: {
    en: {
      'Submit': 'Complete'
    },
    sp: {
      'Submit': 'Enviar',
      'Please correct all errors before submitting.': 'Por favor, corrija todos los errores antes de enviar.',
      'My custom error message' : 'Mi mensaje de error personalizado',
      required : '{{field}} es requerido.',
      invalid_email: '{{field}} debe ser un correo electrónico válido.',
      error : 'Por favor, corrija los siguientes errores antes de enviar.',
    }
  }
}).then(function(form) {
  window.setLanguage = function(lang) {
    form.language = lang;
  };
});

Now, how do I update the value for {{field}} in "required" key?

P.S. code taken from wiki page of form io.

[TanyaGashtold]

@abhishek0196, in your example, {{field}} is a label of invalid component. So, you just need to add translation for labels: i18n: { en: { 'Submit': 'Complete' }, sp: { 'Submit': 'Enviar', 'Please correct all errors before submitting.': 'Por favor, corrija todos los errores antes de enviar.', 'My custom error message' : 'Mi mensaje de error personalizado', required : '{{field}} es requerido.', invalid_email: '{{field}} debe ser un correo electrónico válido.', error : 'Por favor, corrija los siguientes errores antes de enviar.', 'Your Name': 'translation 1', 'Unique Email Address': 'translation 2' }

[abhishek0196]

Sorry, I did not understand, how do I change the dynamic value. If possible can you please send a working code sample.

[TanyaGashtold]

In your example you need to add translation for the labels of the form components. Please pay attention to the bold text in my previous message. {{field}} will be replaced with translated text. Here is the working sample

Formio.createForm(document.getElementById('formio'), 'https://wzddkgsfhfvtlmv.form.io/translations', {
 language: 'sp',
  i18n: {
    en: {
      'Submit': 'Complete'
    },
    sp: {
      'Submit': 'Enviar',
      'Please correct all errors before submitting.': 'Por favor, corrija todos los errores antes de enviar.',
      'My custom error message' : 'Mi mensaje de error personalizado',
      required : '{{field}} es requerido.',
      invalid_email: '{{field}} debe ser un correo electrónico válido.',
      error : 'Por favor, corrija los siguientes errores antes de enviar.',
      'Your Name': 'translation 1',
      'Unique Email Address': 'translation 2'
    }
  }
}).then(function(form) {
  window.setLanguage = function(lang) {
    form.language = lang;
  };
});

[abhishek0196]

Ok thanks for the code snippet and your time let me try and get back to you.

[abhishek0196]

I tried this, but no luck. The translation still has braces.