Horizontally rendering items in a WTForm (IndicoForm)

1

Hi guys,

I have to create an Invoice Form (that inherits IndicoForm, perhaps?) which contains an arbitrary long list of Invoice Items (a description + quantity + price of the item on the invoice).

Here’s what I have so far in my forms.py code (just a “skeleton”, so far, hence the min_entries=2, etc.):

class InvoiceItemForm(IndicoForm):

    description = StringField(_('Description'), [DataRequired()])
    number_of_units = IntegerField(_('Number of Units'), [DataRequired()])
    unit_price = FloatField(_('Unit price'), [DataRequired()])

class InvoiceForm(IndicoForm):

    sequential_number = StringField(_('Invoice #'), [DataRequired()])
    items = FieldList(FormField(InvoiceItemForm), min_entries=2)

, but it renders like this:

image
image848×484 13.1 KB

Quite an ugly rendering! :frowning:

Any way I can tell WTForms (or some other way) to render the individual fields of the 2 items horizontally, instead of vertically as shown above?

Anyway I can “remove” the Items-0 and Items-1 bullet points in the rendering?

Thanks!

2

:frowning: Does anyone have any idea? I’m stuck … :frowning:

3

Hi, first of all keep in mind that FieldList requires you to write JS code to add new fields (or sets of fields in this case).

This is the code rendering the list of FormFields, which in turn uses TableWidget to render the individual fields.

So I would try subclassing the FormField to set another widget and then use a custom JinjaWidget instead of the TableWidget rendering a new template that uses the layout you want.