Custom list view with Flask-Admin

Question

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

Ankh

Answer 1

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.. ;)

Dandrea

Great, thank you. I'll use the audio html 5 tag though. – Ankh

Answer 2

This is an old thread, but for future reference, there's now column_extra_row_actions and BaseListRowAction. More info here: http://flask-admin.readthedocs.io/en/latest/api/mod_model/

Yl