formio
Content Component, HTMLElement Component not translating
I am using the dynamic transition method suggested by the FormIO documentation and there are specifically two components that are not being translated.
- HTMLElement:
{
"label": "HTML",
"attrs": [
{
"attr": "",
"value": ""
}
],
"content": "
This is the test of the html <a href="www.google.com">component
", "refreshOnChange": false, "key": "html", "type": "htmlelement", "input": false, "tableView": false } - Content Component:
{
"html": "
This is the TEST.
", "label": "Content", "refreshOnChange": false, "key": "content1", "type": "content", "input": false, "tableView": false, "lockKey": true, "isNew": true }
If the components are structured as above then the translation functionality doesn't work however based on this thread(https://github.com/formio/formio.js/issues/828) I created a custom JavaScript Code that was wrapping the content of these types of components like this: {{instance.t('Content')}}. But recently the code stopped working for no reason. Is there any other way to perform this operation?
But recently the code stopped working for no reason.
Can you be clearer? What version of the renderer are you running? Generally we'd like a minimally reproducible example (e.g. in our sandbox or a JSFiddle) so we can identify exactly what's going on
FormIO Version: "Application": 8.1.0 "Renderer": 4.15.0. "schema": "3.3.16"
I was trying some other CDN and the issue seems to be resolved if I use this CDN: https://cdn.jsdelivr.net/npm/[email protected]/dist/formio.form.min.js. But some of the forms which have simple branching logic stopped working. I faced this branching logic issue previously and FormIO suggested using this CDN: https://cdn.form.io/formiojs/4.15.0/formio.full.min.js. However, the translation functionality doesn't work with their suggested CDN.
Below is a small example where the text in the content component (This is the TEST) doesn't translate.
Formio.createForm(document.getElementById('formio'), { components: [ { type: 'textfield', key: 'firstName', label: 'First Name', placeholder: 'Enter your first name', input: true }, { html: '
This is the TEST
', label: 'Content', refreshOnChange: false, key: 'content', type: 'content', input: false, tableView: false }, { type: 'textfield', key: 'lastName', label: 'Last Name', placeholder: 'Enter your last name', input: true }, { type: 'survey', key: 'questions', label: 'Survey', values: [ { label: 'Great', value: 'great' }, { label: 'Good', value: 'good' }, { label: 'Poor', value: 'poor' } ], questions: [ { label: 'How would you rate the Form.io platform?', value: 'howWouldYouRateTheFormIoPlatform' }, { label: 'How was Customer Support?', value: 'howWasCustomerSupport' }, { label: 'Overall Experience?', value: 'overallExperience' } ] }, { type: 'button', action: 'submit', label: 'Submit', theme: 'primary' } ] }, { 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', complete: 'Presentación Completa', 'This is the TEST': 'Translated Text' } } }).then(function(form) { window.setLanguage = function(lang) { form.language = lang; }; });
On the latest version of the renderer, the HTML component is properly translating the text, but the content component is not. We will open a ticket for the content component. @viralP1 Please update your version of the renderer and see if this resolves your issue with the HTML component.
@viralP1 could you please check the latest version of formioJS (e.x. 4.19.1) and let us know if you still reproduce the issue? We didn't reproduce the issue with the content component https://jsfiddle.net/gdu2x3fp/.
