How to load a custom JS file in Django admin home?

Question

I have a heavily customized Django admin where it's very simple to load a custom JS file for each of my ModelAdmins:

class MyModelAdmin(admin.ModelAdmin):
    class Media:
        js = ('js/admin/mymodel.js',)

But how do I do this for the admin "homepage," where all my admin models are listed?

Update #1: amending my question, since the solutions below aren't that useful if I cannot efficiently include Django's jQuery. So, how do I include Django's jQuery in the JS file? If I wrap my code with (as I do in my other ModelAdmin JS files):

(function ($) {
    // my code here...
})(django.jQuery);

I get the following error:

ReferenceError: django is not defined.

Thanks.

Update #2: I was able to include Django's jQuery successfully by following this answer: https://stackoverflow.com/a/10584539/585783

Answer 1

You can load custom js files only on Home admin page. *My answer explains how to load CSS and JavaScript files in Django.

For example, set BASE_DIR / 'templates' to DIRS in TEMPLATES and set BASE_DIR / 'static/' to STATICFILES_DIRS in settings.py as shown below so that Django can recognize templates and static folders just under django-project. *My answer explains how to set Django Templates and I recommand to set whitenoise following my answer to disable your browser to cache the static files of Django: in settings.py as shown below:

# "core/settings.py"

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [
            BASE_DIR / 'templates' # Here
        ],
        ...
    },
]

...

STATIC_URL = 'static/'
STATICFILES_DIRS = [
    BASE_DIR / 'static/' # Here
]

Then, create custom.js in static/admin/js/ and copy index.html from django/contrib/admin/static/admin/index.html in your virtual environment to templates/admin/ as shown below:

django-project
 |-core
 |  └-settings.py
 |-app1
 |-app2
 |-static
 |  └-admin
 |     └-js
 |        └-custom.js # Here
 └-templates
    └-admin
       └-index.html # Here

Then, set alert("Hello World"); to custom.js as shown below:

# "static/admin/js/custom.js"

alert("Hello World");

Then, set custom.js after {% block sidebar %} in index.html as shown below:

# "templates/admin/index.html"

# ...
{% block sidebar %}
{# ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ Here ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ #}
<script src="{% static 'admin/js/custom.js' %}" defer></script>
{# ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ Here ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ #}
<div id="content-related">
# ...

Now, Hello World is shown only on Home admin page as shown below:

In addition, you can load custom.js on all admin pages.

So, copy base.html from django/contrib/admin/static/admin/base.html in your virtual environment to templates/admin/ as shown below:

django-project
 |-core
 |  └-settings.py
 |-app1
 |-app2
 |-static
 |  └-admin
 |     └-js
 |        └-custom.js
 └-templates
    └-admin
       └-base.html # Here

Then, set custom.js after <link ... "admin/css/base.css" %}{% endblock %}"> in base.html as shown below, then Hello World is shown on all admin pages:

# "templates/admin/base.html"

# ...
<title>{% block title %}{% endblock %}</title>
<link rel="stylesheet" href="{% block stylesheet %}{% static "admin/css/base.css" %}{% endblock %}">
{# ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ Here ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ #}
<script src="{% static 'admin/js/custom.js' %}" defer></script>
{# ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ Here ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ #}
{% block dark-mode-vars %}
  <link rel="stylesheet" href="{% static "admin/css/dark_mode.css" %}">
# ...

Be careful, django/contrib/admin/static/admin/js/ has the js files for Django Admin so you should not use the same file names in it to add custom js files to Django Admin as long as you need to overwrite them.

And, running the code below can gether all static files in Django Project into static folder without deleting custom and overwritten js files.

python manage.py collectstatic

Answer 2

You can override templates/admin/index.html and add the JavaScript in the block extrahead:

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

{% block extrahead %}
    {{ block.super }}
    # add a <script> tag here with your JavaScript
{% endblock %}