Hi,

To translate text within an OWL component on a website with dynamically generated fields, the best approach is to move the translatable data to the Odoo backend. Create a new Odoo model to store form configuration data, including a translatable field for the text. Populate this model with your existing data.

Modify your OWL component to fetch the form configuration data from Odoo using an RPC call. Update your QWeb template to iterate over the fetched data and render the form fields dynamically. Then, use Odoo's built-in translation mechanism to translate the text in the database records. This leverages Odoo's translation system, supports dynamic content, and improves maintainability.

Sample code:

Python

from odoo import models, fields

class WebsiteFormConfig(models.Model):

    _name = 'website.form.config'

    _description = 'Website Form Configuration'

    form_type = fields.Selection([

        ('short', 'Short Form'),

        # Add other form types

    ], string='Form Type')

    section_key = fields.Char(string='Section Key')

    section_title = fields.Char(string='Section Title', translate=True)

JS

/** @odoo-module **/

import { Component, onWillStart } from "@odoo/owl";

import { useService } from "@web/core/utils/hooks";

export class MyFormComponent extends Component {

    setup() {

        this.orm = useService("orm");

        this.formConfig = [];

        onWillStart(async () => {

            this.formConfig = await this.fetchFormConfig();

        });

    }

    async fetchFormConfig() {

        return await this.orm.searchRead(

            "website.form.config",

            [['form_type', '=', 'short']], // Adjust domain as needed

            ['section_key', 'section_title'] // Adjust fields as needed

        );

    }

}

MyFormComponent.template = "your_module.my_form_template"; // Replace with your template

QWeb template

<t t-name="your_module.my_form_template">

    <div class="my-form">

        <t t-foreach="formConfig" t-as="section">

            <div t-attf-class="form-section #{section.section_key}">

                <label t-esc="section.section_title"/>

                <!-- Add your input field here -->

            </div>

        </t>

    </div>

</t>

Hope it helps