Search code examples
flaskflask-admin

Custom list view with Flask-Admin


I have a simple model Call and I'm using Flask-Admin to create/edit/delete instances of this model.

One of the field of Call is the path to an audio file. I would like to be able to play the file in the admin by adding some html code. I checked the template flask_admin/templates/bootstrap3/admin/model/list.html and it seems that the only way to do what I want is to add a cell at the end of the row, which means extending list.html, copying the whole block list_row and adding my cell.

Is it the only way? Or is there any way to add a "fake" field with my audio player (basically an html5 ) to the form?

flask_admin/templates/bootstrap3/admin/model/list.html

....

{% for c, name in list_columns %}
    <td class="col-{{c}}">
    {% if admin_view.is_editable(c) %}
        {% if form.csrf_token %}
            {{ form[c](pk=get_pk_value(row), value=get_value(row, c), csrf=form.csrf_token._value()) }}
        {% else %}
            {{ form[c](pk=get_pk_value(row), value=get_value(row, c)) }}
        {% endif %}
    {% else %}
        {{ get_value(row, c) }}
    {% endif %}
    </td>
{% endfor %}
<td>ADD MY CUSTOM CELL HERE?</td>
....

models.py

class Call(db.Model):
    __tablename__ = 'calls'
    id = db.Column(db.Integer, primary_key=True)
    name = db.Column(db.Unicode(64))
    path = db.Column(db.Unicode(128))

    def __unicode__(self):
        return self.name

Solution

  • There's a simpler way by using column_formatters:

    from flask import Markup
    
    class CallView(sqla.ModelView):
        def _mp3_formatter(view, context, model, name):
            return Markup('<a href="{}">{}</a>'.format(url_for('path_to_mp3_view', filename=model.path), model.name)
        column_formatters = {
           'path': _mp3_formatter
        }
    

    Or you can even pass a Jinja2 macro (which has to be present in the overriding template):

    class CallView(sqla.ModelView):
        column_formatters = dict(path=macro('render_path_mp3'))
    

    And in template:

    {% macro render_path_mp3(model, column) %}
       <a href="{{ url_for('path_to_mp3_view', filename=model.path) }}">{{ model.name }}</a>
    {% endmacro %}
    

    Creating the custom view function path_to_mp3_view has been left out as an exercise.. ;)