Django Admin - Redesign and Customization

Often the default Django admin page is great and it is all we need for our projects but sometimes we may want to expand what default admin interface can do. We have a lot of tools in Django to customize it to our own needs and in this article, we'll learn how to customize the admin interface and add multiple features:

Let's setup your project, add models into models.py and register your models.

Run following commands - 
 

Python manage.py makemigrations
Python manage.py migrate

Now we have created following models, Here is how they look like in Admin panel - 
 

Django Admin - Redesign and Customization

Le's check how we can add multiple features in Django admin panel. Here is a list of customizations - 
 

1. Changing order of Fields

By default, the admin will display fields in the detail view in the same order as defined in the model. But we can change that by making a few edits to the admin.py file without going to models.py and changing the order of different fields.

Movie model:
title
length
release_year

title=['release_year', 'title', 'length']

Movie_Model:
release_year
title
length

admin.py

from django.contrib import admin
from .models import Movie, Customer


class MovieAdmin(admin.ModelAdmin):
    title = ['release_year', 'title', 'length']


admin.site.register(Movie, MovieAdmin)
admin.site.register(Customer)

2. Adding Search and Filters

Currently, we have only a few entries in our models, but what if the entries increase to hundreds or thousands due to more number of users? To get data of a particular entry will become tedious if we go by looking at each entry. Therefore we need to add a search bar or a filter feature to allow entries to be accessed easily.

Search by the following elements:
search_fields = ['title', 'length', 'release_year']
search_fields = ['first_name', 'last_name', 'phone']

Filter by the following elements:
list_filter = ['release_year']
list_filter = ['last_name']

app_folder / admin.py

from django.contrib import admin
from .models import Movie, Customer


class MovieAdmin(admin.ModelAdmin):
    # Let you to search with title name, release year and length of duration of movie
    search_fields = ['title', 'length', 'release_year']
    # There will be a filter on release year
    list_filter = ['release_year']


class CustomerAdmin(admin.ModelAdmin):
    # Let you to search with first name, last name and phone number of the customer
    search_fields = ['first_name', 'last_name', 'phone']
    # There will be a filter on last name
    list_filter = ['last_name']


admin.site.register(Movie, MovieAdmin)
admin.site.register(Customer, CustomerAdmin)

3. Viewing Additional Fields

In admin interface, normally we see only one field of our models in the list view. We can add more fields to view with list_display.

list_display=['title', 'release_year']
list_display=['first_name', 'last_name', 'phone']

admin.py

from django.contrib import admin
from .models import Movie, Customer


class MovieAdmin(admin.ModelAdmin):
  list_display =['title', 'release_year']
  
class customerAdmin(admin.ModelAdmin):
  list_display =['first_name', 'last_name', 'phone']


admin.site.register(Movie, MovieAdmin)
admin.site.register(Customer, CustomerAdmin)

4. Editing List View

You can add the ability to edit attribute values directly from the list view instead of going to the detail view

editable_list = ['phone']

admin.py

from django.contrib import admin
from .models import Movie, Customer


class CustomerAdmin(admin.ModelAdmin):
    editable_list = ['phone']


admin.site.register(Movie)
admin.site.register(Customer, CustomerAdmin)

5. Admin Template

Sometimes you may want to change the layout and user interface of admin interface for which you need to add your own templates into the project which will then be reflected to your django admin interface.

Create a folder templates in the root folder and inside it, create another folder admin. Now add your html file inside the admin folder.

{% extends "admin/base.html" %}

{% block title %}{% if subtitle %}{{ subtitle }} | {% endif %}{{ title }} | {{ site_title|default:_('Django site admin') }}{% endblock %}

{% block branding %}
<h1 id="site-name" style="font-family: cursive;" ><a href="{% url 'admin:index' %}">Video Rental Administration</a></h1>
{% endblock %}

{% block nav-global %}{% endblock %}

Here, the heading in the admin interface has changed due to the addition of html file. Sometimes template doesn't get applied to the interface, to avoid that, make sure you've done correct template configuration in the settings.py file.

import os

TEMPLATES=[

'DIRS': [os.path.join(BASE_DIR, 'templates')],

]

This how you can customize the admin template in Django as per your requirements.