DEV Community

Arjun Adhikari
Arjun Adhikari

Posted on • Edited on

Integrate Django Jazzmin theme to Django Admin | AdminLTE Dashboard

#django #adminlte #jazzmin #dashboard

Hello Geeks,
First of all, I would like to thank you for reaching here. No doubt you're gonna be a successful Django developer ahead.

Introduction

In this blog, I am guiding to integrate django-jazzmin theme to the Django project.
According to their documentation :

Django Jazzmin is intended as a drop-in app to jazz up your Django admin site, with plenty of things you can easily customise, including a built-in UI customizer.

The default admin dashboard provided by Django isn't best fitted for our need every time and we need to customize a lot to match the theme with our need. And some of us may not prefer to go with the default theme which looks like this :
question.png

For the developers who want to get the customized and better-looking admin dashboard for Django, django-jazzmin is the one which has better UI components with features like :

  • Drop-in admin skin, all configuration optional
  • Select2 drop-downs
  • Bootstrap 4 & AdminLTE UI components
  • Search bar for any given model admin
  • Modal windows instead of popups
  • Customisable side menu
  • Customisable top menu
  • Customisable user menu
  • Responsive
  • Customisable UI (via Live UI changes, or custom CSS/JS)
  • Based on the latest adminlte + bootstrap

which looks like this:

list_view.png

To achieve a good looking AdminLTE dashboard on our Django project, we need to follow a sequence of instructions.

Instructions

Navigate to your workspace:

# Terminal
# =========

$ mkdir - ~/workspace/integrate-django-jazzmin
$ cd ~/workspace/integrate-django-jazzmin
Enter fullscreen mode Exit fullscreen mode

Setup Virtual Environment (Optional) 

# Terminal
# =========

$ python -m virtualenv venv

created virtual environment CPython3.8.6.final.0-64 in 116ms
  creator CPython3Posix(dest=/home/ubuntu/workspace/integrate-django-jazzmin/venv, clear=False, global=False)
  seeder FromAppData(download=False, pip=bundle, setuptools=bundle, wheel=bundle, via=copy, app_data_dir=/home/ubuntu/.local/share/virtualenv)
    added seed packages: pip==20.2.4, setuptools==50.3.2, wheel==0.35.1
  activators BashActivator,CShellActivator,FishActivator,PowerShellActivator,PythonActivator,XonshActivator
Enter fullscreen mode Exit fullscreen mode

This will set up a virtualenv named venv which isolates libraries and dependencies from the global installation.
Now, activate the virtual environment.

$ source venv/bin/activate
Enter fullscreen mode Exit fullscreen mode

Installing libraries

Now, we are good to install the libraries we need to set up the Django project.

$ pip install django django-jazzmin
Enter fullscreen mode Exit fullscreen mode

This will install the django and django-jazzmin library.

Create Django Project

It's time to create a Django project.

$ django-admin startproject dj_jazzmin_demo .
Enter fullscreen mode Exit fullscreen mode

For a better demonstration of the theme, I'm going to create a Django app named blog.

$ python manage.py startapp blog
Enter fullscreen mode Exit fullscreen mode

which created directory structure like this:

# Directory Structure
# ====================
.
├── blog
│   ├── admin.py
│   ├── apps.py
│   ├── __init__.py
│   ├── migrations
│   │   └── __init__.py
│   ├── models.py
│   ├── tests.py
│   └── views.py
├── dj_jazzmin_demo
│   ├── asgi.py
│   ├── __init__.py
│   ├── __pycache__
│   │   ├── __init__.cpython-36.pyc
│   │   └── settings.cpython-36.pyc
│   ├── settings.py
│   ├── urls.py
│   └── wsgi.py
└── manage.py
Enter fullscreen mode Exit fullscreen mode

Register Apps

Now, let's register the blog app inside INSTALLED_APPS in settings.py.
Add blog.apps.BlogConfig after the pre-registered django apps.
Also, we are good to add our theme to the django project. For that, register jazzmin theme to INSTALLED_APPS.
But, we're registering jazzmin on the top of other pre-registered apps because we want the theme to load earlier than other apps.

# dj_jazzmin_demo/settings.py
# =============================

INSTALLED_APPS = [
    # Pre-loading Third Party apps
    'jazzmin', 

    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',

    # Local Apps
    'blog.apps.BlogConfig',

]
Enter fullscreen mode Exit fullscreen mode

Create Model and ModelAdmin

Now, we have our app and theme registered in our project. Then, we can write models for the app blog.
Let's write a model named Post in models.py inside blog app.

# blog/models.py
# ================

from django.db import models
from django.utils.translation import ugettext_lazy as _

class Post(models.Model):
    '''Model definition for Post.'''

    title = models.CharField(_('Post'), max_length=50)
    content = models.TextField(_('Content'))
    is_publishable = models.BooleanField(_('Is Publishable ?'), default=False)
    created_at = models.DateTimeField(_('Created at '),auto_now_add=True)
    updated_at = models.DateTimeField(_('Updated at '),auto_now=True)

    class Meta:
        '''Meta definition for Post.'''

        verbose_name = 'Post'
        verbose_name_plural = 'Posts'

    def __str__(self):
        '''Unicode representation of Post.'''
        return self.title
Enter fullscreen mode Exit fullscreen mode

For making our app accessible via the admin dashboard, we're going to register the model Post in admin.py.

# blog/admin.py
# ==============

from django.contrib import admin
from .models import Post


@admin.register(Post)
class PostAdmin(admin.ModelAdmin):
    '''Admin View for Post'''

    list_display = (
        'title',
        'is_publishable',
        'created_at',
        'updated_at',
    )
    list_filter = (
        'is_publishable',
        'created_at',
        'updated_at',
    )
Enter fullscreen mode Exit fullscreen mode

Make Migrations and Migrate Models

Now, we're good to make migrations and migrate the model we created.

# Terminal
# =========

$ python manage.py makemigrations blog
Migrations for 'blog':
  blog/migrations/0001_initial.py
    - Create model Post
Enter fullscreen mode Exit fullscreen mode 
# Terminal
# =========

$ python manage.py migrate
Operations to perform:
  Apply all migrations: admin, auth, blog, contenttypes, sessions
Running migrations:
  Applying contenttypes.0001_initial... OK
  Applying auth.0001_initial... OK
  Applying admin.0001_initial... OK
  Applying admin.0002_logentry_remove_auto_add... OK
  Applying admin.0003_logentry_add_action_flag_choices... OK
  Applying contenttypes.0002_remove_content_type_name... OK
  Applying auth.0002_alter_permission_name_max_length... OK
  Applying auth.0003_alter_user_email_max_length... OK
  Applying auth.0004_alter_user_username_opts... OK
  Applying auth.0005_alter_user_last_login_null... OK
  Applying auth.0006_require_contenttypes_0002... OK
  Applying auth.0007_alter_validators_add_error_messages... OK
  Applying auth.0008_alter_user_username_max_length... OK
  Applying auth.0009_alter_user_last_name_max_length... OK
  Applying auth.0010_alter_group_name_max_length... OK
  Applying auth.0011_update_proxy_permissions... OK
  Applying auth.0012_alter_user_first_name_max_length... OK
  Applying blog.0001_initial... OK
  Applying sessions.0001_initial... OK
Enter fullscreen mode Exit fullscreen mode

For accessing the admin panel, we need to create a superuser which has the privilege to access the admin dashboard and perform operations over there.

# Terminal
# =========

$ python manage.py createsuperuser
Username (leave blank to use 'ubuntu'): ubuntu
Email address: 
Password: 
Password (again): 
Superuser created successfully.
Enter fullscreen mode Exit fullscreen mode

Enjoy the output

Finally, we've completed the procedure to create a basic Django project and integrate django-jazzmin theme.
Now, we can run our django project.

# Terminal
# =========

$ python manage.py runserver

Watching for file changes with StatReloader
Performing system checks...

System check identified no issues (0 silenced).
November 13, 2020 - 19:46:51
Django version 3.1.3, using settings 'dj_jazzmin_demo.settings'
Starting development server at http://127.0.0.1:8000/
Quit the server with CONTROL-C
Enter fullscreen mode Exit fullscreen mode

We have our Django project running. To access it through a web browser, visit the URL http://127.0.0.1:8000/admin/ on a web browser. It loads to a different login interface than default login UI provided by Django.

Screenshot from 2020-11-14 01-35-56.png

After entering credentials, we're navigated to a jazzy looking admin interface provided by django-jazzmin.

Screenshot from 2020-11-14 01-39-00.png

Let's surf through beautiful interfaces provided by django-jazzmin.

  1. Add Post UI
    Screenshot from 2020-11-14 01-45-27.png

  2. List Display UI
    Screenshot from 2020-11-14 01-45-46.png

  3. Delete Post UI
    Screenshot from 2020-11-14 01-45-56.png

  4. Filtering through fields
    Screenshot from 2020-11-14 01-46-13.png

For now, we've successfully integrated django-jazzmin theme to our django_project. In the next part of the blog, we will be customizing admin dashboard through API provided by django-jazzmin.

Thanks for reading.

Top comments (5)

Collapse
 
saifeddine_mabrouk_d55f39 profile image
Saifeddine Mabrouk •

"user_avatar": "profile.get_photo_url", it s not working

class Profile(models.Model):
account = models.OneToOneField(User, on_delete=models.CASCADE)
phone=models.CharField(max_length=16)
photo = models.ImageField(upload_to='user_photos/', null=True, blank=True)

def __str__(self) -> str:
    return self.account.username

def get_photo_url(self):
    if self.photo:
        return self.photo.url
    return '/path/to/default/avatar.jpg'
Enter fullscreen mode Exit fullscreen mode
Collapse
 
omidmamadi profile image
Omid •

thanks a lottttttttt

Collapse
 
kaizakunonu profile image
Kaiza Ilomo •

Thanks a lot Arjun Adhikari for this note. It saved my final year project presentation.

Collapse
 
vickysongdev profile image
Victor •

Hi good day I've been trying to customise the django the way you did it but it's giving me error is not working

Collapse
 
nikhilthakur profile image
Nikhil Thakur •

All the date time fields displays as input[type=text] , how to solve this .

Read next

jurooravec profile image

django-components v0.94 - Templating is now on par with Vue or React

Juro Oravec -

yokwejuste profile image

Leveraging Headers for Dynamic Localization in Django

Steve Yonkeu -

doridoro profile image

Convert a Django function-based-view into a class-based-view (DetailView)

DoriDoro -

sanya_lazy profile image

Django REST Framework: From Zero to Hero

Sanya_Lazy -