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.

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:

The original 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

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

• Footer, Header, Scripts, Sidenav
• All other pages (profile, icons tables) are processed in the same way

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__)

@app.route('/')
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:

Future Steps

• Add SQLite Database and SQLAlchemy ORM
• Add Authentication (register and login)
• Connect the dashboard to real data
• Deployment

Argon Dashboard Resources

• Live demo - something to click on
• Sources - published on Github
• App info - read more about this product
• Documentation - learn to build an customize the app

Enjoy this? Read more about Flask Dashboards.  

Thank you!