gaetk2.forms package - form handling via WTForms

gaetk2.forms aims at making Bootstrap 4 Forms <`Bootstrap 3 Forms and WTForms play nice together. This means for the normal form you don’t have to write any HTML.

There is also some unmaintained legacy code for Bootstrap 3 Forms.

Together with wtforms-appengine you can get a very smooth form handling experience.

wtfbootstrap4(form)

Takes a form instance and changes the widgets within to conform to bootstrap / HTML5 layout including labels, error-messages, etc.

So usage would look like this:

# Define an Datastore / NDB - Model
from google.appengine.ext import ndb
class pay_Lastschriftmandat(ndb.Model):
    kundennr = ndb.StringProperty(required=True)
    kontoinhaber = ndb.StringProperty(required=True)
    iban = ndb.StringProperty()
    bic = ndb.StringProperty()
    datum = ndb.DateTimeProperty()
    mandatsreferenz = ndb.StringProperty(required=True)
    glaeubigernr = ndb.StringProperty(required=True)
    updated_at = ndb.DateTimeProperty(auto_now=True)
    created_at = ndb.DateTimeProperty(auto_now_add=True)

# build the WTForm from Model
from wtforms_appengine.ndb import model_form
LastschriftmandatForm = model_form(
    pay_Lastschriftmandat,
    only=['bic', 'iban', 'datum']
)

# Render form
from gaetk2.forms import wtfbootstrap3
class View(gaetk2.handlers.DefaultHandler):
    def get(self):
        # instantiate form
        form = LastschriftmandatForm()
        # style form
        form = wtfbootstrap3(form)
        self.render({'form': form}, 'view.html')

Now you could render it in your template like this:

<form method="POST">
  <div class="form-body form-group">
    {% for field in form %}
      {% if field.flags.required %}
        {{ field(required=True) }}
      {% else %}
          {{ field() }}
      {% endif %}
    {% endfor %}
  </div><!-- /form-body -->
  <div class="text-right">
    <button type="submit" id="{{ domid }}-submit-button" form="{{ domid }}-form" data-loading-indicator="true" class="btn btn-primary" autocomplete="off">{{ buttonname }}</button>
  </div>
</form>

See also wtfbootstrap3() for legacy support.

Todo

• Add validation. Use https://validators.readthedocs.io/en/latest/
• Add some standard way to render a complete Form not just fields.

Module contents

gaetk2.forms.wtfbootstrap3(form)

changes a WTForms.Form Instance to use html5/bootstrap Widgets.

gaetk2.forms.wtfbootstrap4(form)

changes a WTForms.Form Instance to use html5/bootstrap Widgets.