Search code examples
pythonflaskflask-wtformswtforms

WTFForms totally automatize form generation

I have the following form, using basic HTML generation :

enter image description here

I'm trying now to use WTF Forms plugins with Flask. For now I did that to generate my inputs. My problem is that I don't know how to makes bootstrap row using the class of each input. (e.g : input class is col-md-12 so create one row with only this input. If following input class is col-md-6, create a row for multiple inputs).

class SupplierForm(Form):
    supplierInfo_name = StringField(
        lazy_gettext('NAME'),
        [validators.required()],
        render_kw={
            'class': 'col-md-12 form-control',
            'onfocus': "searchSupplier()",
            'onfocusout': "ocrOnFly(true, this); removeRectangle()",
            'onfocusin': "ocrOnFly(false, this)"
        },
    )
    supplierInfo_address = StringField(
        lazy_gettext('ADDRESS'),
        [validators.required()],
        render_kw={
            'class': 'col-md-12 form-control',
            'onfocusout': "ocrOnFly(true, this); removeRectangle()",
            'onfocusin': "ocrOnFly(false, this)"
        }
    )
    supplierInfo_postal_code = StringField(
        lazy_gettext('ZIP_CODE'),
        [validators.required()],
        render_kw={
            'class': 'col-md-6 form-control',
            'onfocusout': "ocrOnFly(true, this); removeRectangle()",
            'onfocusin': "ocrOnFly(false, this)"
        }
    )
    supplierInfo_city = StringField(
        lazy_gettext('CITY'),
        [validators.required()],
        render_kw={
            'class': 'col-md-6 form-control',
            'onfocusout': "ocrOnFly(true, this); removeRectangle()",
            'onfocusin': "ocrOnFly(false, this)"
        }
    )
    supplierInfo_vat_number = StringField(
        lazy_gettext('VAT_NUMBER'),
        [validators.required()],
        render_kw={
            'class': 'col-md-12 form-control',
            'onfocusout': "ocrOnFly(true, this); removeRectangle()",
            'onfocusin': "ocrOnFly(false, this)"
        }
    )
    supplierInfo_siret_number = StringField(
        lazy_gettext('SIRET_NUMBER'),
        [validators.required()],
        render_kw={
            'class': 'col-md-6 form-control',
            'onfocusout': "ocrOnFly(true, this); removeRectangle()",
            'onfocusin': "ocrOnFly(false, this)"
        }
    )
    supplierInfo_siren_number = StringField(
        lazy_gettext('SIREN_NUMBER'),
        [validators.required()],
        render_kw={
            'class': 'col-md-6 form-control',
            'onfocusout': "ocrOnFly(true, this); removeRectangle()",
            'onfocusin': "ocrOnFly(false, this)"
        }
    )

My HTML for now, all the input are display line by line

{% macro render_field(field) %}
<div class="form-group">
    <label for="{{ field.id }}">
        {{ field.label }}
    </label>
    <div class="input-group mb-2">
        <div onclick="drawRectangle(document.getElementById('{{ field.id }}'))" class="input-group-prepend">
            <div class="input-group-text"><i class="fas fa-eye" aria-hidden="true"></i></div>
        </div>
        {{ field(**kwargs)|safe }}
        {% if field.errors %}
            <ul class=errors>
                {% for error in field.errors %}
                    <li>{{ error }}</li>
                {% endfor %}
            </ul>
        {% endif %}
    </div>
</div>
{% endmacro %}
    
<form method=post>
    {% for field in form %}
        {{ render_field(field) }}
    {% endfor %}
    <p><input type=submit value=Register>
</form>
Solution

  • I finally manage to do what I want. I override the Fied class of WTFORMS to add custom attributes that I can use into a custom StringField class