How to enter a list in WTForms?

Question

What I'm trying to do

I'm trying to enter a list of tags in flask that should become passable as a list but I can't figure out how to do it in flask, nor can I find documentation to add lists (of strings) in flask_wtf. Has anyone have experience with this?

Ideally I would like the tags to be selectively delete-able, after you entered them. So that you could enter.

The problem

Thus far my form is static. You enter stuff, hit submit, it gets processed into a .json. The tags list is the last element I can't figure out. I don't even know if flask can do this.

A little demo of how I envisioned the entry process:

How I envisioned the entry process:

1. The current tags are displayed and an entry field to add new ones.

    [Tag1](x) | [Tag2](x)

    Enter new Tag: [______] (add)

2. Hit (add)

    [Tag1](x) | [Tag2](x)

    Enter new Tag: [Tag3__]  (add)

3. New Tag is added

    [Tag1](x) | [Tag2](x) | [Tag3](x) 

    Enter new Tag: [______]

How I envisioned the deletion process:

1. Hitting the (x) on the side of the tag should kill it.

    [Tag1](x) | [Tag2](x) | [Tag3](x) 

2. Hit (x) on Tag2. Result:

    [Tag1](x) | [Tag3](x)

The deletion is kind of icing on the cake and could probably be done, once I have a list I can edit, but getting there seems quite hard. I'm at a loss here.

I basically want to know if it's possible to enter lists in general, since there does not seem to be documentation on the topic.

Answer 1

Your description is not really clear (is Tag1 the key in the JSON or is it Tag the key, and 1 the index?)

But I had a similar issue recently, where I wanted to submit a basic list in JSON and let WTForms handle it properly.

For instance, this:

{
    "name": "John",
    "tags": ["code", "python", "flask", "wtforms"]
}

So, I had to rewrite the way FieldList works because WTForms, for some reason, wants a list as "tags-1=XXX,tags-2=xxx".

from wtforms import FieldList
class JSONFieldList(FieldList):
    def process(self, formdata, data=None):
        self.entries = []
        if data is None or not data:
            try:
                data = self.default()
            except TypeError:
                data = self.default

        self.object_data = data

        if formdata:
            for (index, obj_data) in enumerate(formdata.getlist(self.name)):
                self._add_entry(formdata, obj_data, index=index)
        else:
            for obj_data in data:
                self._add_entry(formdata, obj_data)

        while len(self.entries) < self.min_entries:
            self._add_entry(formdata)

    def _add_entry(self, formdata=None, data=None, index=None):
        assert not self.max_entries or len(self.entries) < self.max_entries, \
            'You cannot have more than max_entries entries in this FieldList'
        if index is None:
            index = self.last_index + 1
        self.last_index = index
        name = '%s-%d' % (self.short_name, index)
        id = '%s-%d' % (self.id, index)
        field = self.unbound_field.bind(form=None, name=name, id=id, prefix=self._prefix, _meta=self.meta,
                                        translations=self._translations)
        field.process(formdata, data)
        self.entries.append(field)
        return field

On Flask's end to handle the form:

from flask import request
from werkzeug.datastructures import ImmutableMultiDict

@app.route('/add', methods=['POST'])
def add():
    form = MyForm(ImmutableMultiDict(request.get_json())
    # process the form, form.tags.data is a list

And the form (notice the use of JSONFieldList):

class MonitorForm(BaseForm):
    name = StringField(validators=[validators.DataRequired(), validators.Length(min=3, max=5)], filters=[lambda x: x or None])
    tags = JSONFieldList(StringField(validators=[validators.DataRequired(), validators.Length(min=1, max=250)], filters=[lambda x: x or None]), validators=[Optional()])

Answer 2

I found a viable solution in this 2015 book, where a tagging system is being build for flask as part of a blog building exercise.

It's based on Flask_SQLAlchemy.

Entering lists therefore is possible with WTForms / Flask by submitting the items to the database via, e.g. FieldList and in the usecase of a tagging system, reading them from the database back to render them in the UI.

If however you don't want to deal with O'Rielly's paywall (I'm sorry, I can't post copyrighted material here) and all you want is a solution to add tags, check out taggle.js by Sean Coker. It's not flask, but javascript, but it does the job.