Flask Dashboard Argon - Integrate the design

Hello Coder,

This article is part of the tutorial Flask Dashboard Argon - from Zero to Full-Stack. The final product, coded during this tutorial, can be accessed here.

Flask Dashboard Argon - Admin Panel coded in Flask

In this article explain the integration of Argon Dashboard design into an existing Flask application built in the previous step.  In order to use the design into our Flask application, all HTML must be converted to Jinja2 templates, the native templating system used by Flask.

Adding Jinja2 templating

Jinja2 can be installed easily using PIP or easy install

easy_install Jinja2
pip install Jinja2 # recommended

To test the installation and to accommodate with Jinja2 templates, just run:

$ python # lunch Python console
>>> from jinja2 import Template
>>> template = Template('Hello {{ my_variable }}!')
>>> template.render(my_variable='from Jinja2')
'Hello from Jinja2!'

Basically, this code snippet, load a simple HTML chunk represented by the string `Hello from {{ my_variable }}` and inject the value into the template. In a similar way we can build complex pages from smaller parts.

Convert HTML to Jinja2

The original page

Let's take a look at the untouched dashboard page, as we downloaded from the publisher. The index.html, saved in the root of the archive corresponds  to the main dashboard view:

Flask Argon Dashboard - Original Page

The original HTML

Flask Argon Dashboard - Original Page HTML

Now the mission is to translate the HTML into Jinja2 templates

Fortunately, we have developed tools to translate automatically HTML into Jinja2, and the result is:

Master page, where all other content will be injected

Flask Argon Dashboard - The Jinja2 Master Page

Now we can see a simplified structure compared to the HTML version. All page chunks are extracted and saved separate files:

Now, we need to use all those templates and see something closer to a real dashboard. In order to load the template the code of __init.py should be updated as bellow:

from flask import Flask, render_template

app = Flask(__name__)

def index():
    return render_template(  'layouts/default.html',
                             content=render_template( 'pages/index.html') )

The code is quite simple and intuitive, and the updates are:

  • import `render_template` helper to load and process the Jinja2 templates
  • index() method update to use the `render_template` helper

the result is similar with the original page, but now is rendered via Jinja2 templating:

Flask Argon Dashboard - Original Page

Future Steps

Argon Dashboard Resources

Enjoy this? Read more about Flask Dashboards.  

Thank you!

Show Comments

Get the latest posts delivered right to your inbox.