Column formatters in Flask Admin interface

Question

Hi I have created a Flask admin interface. In one of the field(column), I would like to include a hyperlink.

class workout(db.Model):
    equipment = db.Column(db.String(100))
    place = db.Column(db.String(100))
    image = db.Column(db.Text)

or using Jinja2 macro in template:

I have to create a view which should include the above columns as well as I have to format the image column in the view.

I am really not so sure of how to create the view for the above mentioned custom class model.

from flask_admin.model.template import macro

class WorkoutView(ModelView):

in _macros.html file.

{% macro render_image() %}
<a href="#" id="upload_widget_opener">Upload images</a>
<script src="https://widget.cloudinary.com/global/all.js" type="text/javascript"></script>  

<script type="text/javascript">  
  document.getElementById("upload_widget_opener").addEventListener("click", function() {
    cloudinary.openUploadWidget({ cloud_name: 'mycloudname', sources: [ 'local', 'url', 'camera', 'image_search', 
                 'facebook', 'dropbox', 'google_photos' ], upload_preset: 'myuploadpreset'}, 
      function(error, result) { console.log(error, result) });
  }, false);
</script>

{% endmacro %}

IF I run the _macros.html file, it is good and I am getting the hyperlink as expected. Issue : I am not getting the hyperlink in the column which I formatted when I try to import the macros from _macros.html file

Is there any issue with my syntax in _macros.html or in app.py file ?

Answer 1

I think you are misuse SQLAlchemy and Flask-Admin. CustomModel class inherit from db.Model from SQLAlchemy and CustomModelView class inherit from ModelView from Flask-Admin to control the behavior of that Model in Flask-Admin. You can achieve your purpose as follows:

Use form_widget_args to add id attribute to form field;

Inherit create.html & edit.html to add javascript.

class ExampleModelView(ModelView):

    # ...

    edit_template = "admin/edit.html"
    create_template = "admin/create.html"

    form_widget_args = {
        "image": {
            "id": "cloudinary"
        }
    }

    # ...

# template inherit. "edit.html" is same as "create.html" except the first line.

{% extends "admin/model/create.html" %}
{% block tail %}
    {{ super() }}
    <script src="https://widget.cloudinary.com/global/all.js" type="text/javascript"></script>
    <script type="text/javascript">
        # js code to upload image and return response
    </script>
{% endblock %}