ListField shows <ul> instead of <input> in edit / create post

Question

I am using Flask, mongoengine for a project, and I am trying to get basic material working from http://docs.mongodb.org/manual/tutorial/write-a-tumblelog-application-with-flask-mongoengine/

After implementing all of the above links, I added a new field for “tags” to “Mail,” and when I try to create a message, my tags do not show an input window.

Any help is appreciated.

My code and screenshot below

class Post(db.DynamicDocument): created_at = db.DateTimeField(default=datetime.datetime.now, required=True) title = db.StringField(max_length=255, required=True) slug = db.StringField(max_length=255, required=True) comments = db.ListField(db.EmbeddedDocumentField('Comment')) tags = db.ListField(db.StringField(max_length=30)) # New field I added 

form template

 {% macro render(form) -%} <fieldset> {% for field in form %} {% if field.type in ['CSRFTokenField', 'HiddenField'] %} {{ field() }} {% else %} <div class="clearfix {% if field.errors %}error{% endif %}"> {{ field.label }} <div class="input"> {% if field.name == "body" %} {{ field(rows=10, cols=40) }} {% else %} {{ field() }} {% endif %} {% if field.errors or field.help_text %} <span class="help-inline"> {% if field.errors %} {{ field.errors|join(' ') }} {% else %} {{ field.help_text }} {% endif %} </span> {% endif %} </div> </div> {% endif %} {% endfor %} </fieldset> {% endmacro %} 

render form code

 {% extends "admin/base.html" %} {% import "_forms.html" as forms %} {% block content %} <h2> {% if create %} Add new Post {% else %} Edit Post {% endif %} </h2> <form action="?{{ request.query_string }}" method="post"> {{ forms.render(form) }} <div class="actions"> <input type="submit" class="btn primary" value="save"> <a href="{{ url_for("admin.index") }}" class="btn secondary">Cancel</a> </div> </form> {% endblock %} 

Answer 1

From what I can compile, your problem is that you tell WTF to display the tag field, but WTForms does not know how to handle this information.

From a look at the Flask-MongoEngine documentation, it seems that the ListField is simply a FieldList as WTForms refers to it .

Currently you are not actually defining the form yourself in WTForms, you are simply using the magic included in Flask-MongoEngine, so my first attempt was to add some more logic to your macro, add {% elif field.type == 'ListField' %} and try and find out what it contains to iterate to create your form. From a quick look at the source code, something like the following may work.

 {% elif field.type == 'ListField %} {# render_the_group_label #} {% for subfield in field.entries %} {% if subfield.type == 'StringField' %} {# render_the_subfield #} {% endif %} {% endfor %} ... 

This code will need to be processed, but hopefully it will point you in the right direction. Otherwise, I would definitely define the form separately in WTForms, to give you a bit more control over the code side. Fortunately, they provide an example csv tag that should help you if you need to go this route. I wrote a guide that uses a different route, using @property decorators to achieve a similar effect, which again can at least point you to the finish line.