How to override django admin templates to add custom javascript?

Question

I have a model that I need to add some custom javascript processing to its admin form.

I have tried an implementation via the following guide: https://docs.djangoproject.com/en/1.5/ref/contrib/admin/#overriding-admin-templates

So I created my own change_form.html, and I overrode object-tools-items and put my js in there, but I'm not seeing it when I go to the change form. Then, just as a test, I put it directly into the real django change_form.html, but still nothing.

Then to see if that template is being used, I changed it - added data, created syntax errors, but still, it had no effect. So it seems like that template isn't being used at all. I grepped for change_form.html to see where it's rendered from, and I found it in contrib/admin/options.py:render_change_form(), so I set a breakpoint there, but it was never hit. But the HTML sure looks like it came from that template.

Can anyone give me some direction here please?

Answer 1

You can add custom css and js files to only one admin page or all admin pages. *I don't know how to add css and js files to all admin pages in only one app.

First, I explain how to add them to only Person admin page.

For example, you hava the custom css and js files as shown below:

django-project
 |-core
 |  |-settings.py
 |  └-static
 |     └-core
 |        └-admin
 |           └-app1 
 |              |-css
 |              |  |-custom1.css # Here
 |              |  └-custom2.css # Here
 |              └-js
 |                 |-custom1.js # Here
 |                 └-custom2.js # Here
 |-app1
 |  |-models.py
 |  └-admin.py
 └-app2

Now, set them to css and js in Media class in Person admin as shown below to add them to only Person admin page:

# "app1/admin.py"

@admin.register(Person)
class PersonAdmin(admin.ModelAdmin):
    class Media:
        css = {
            "all": (
                "core/admin/app1/css/custom1.css", # Here
                "core/admin/app1/css/custom2.css" # Here
            )
        }
        js = (
            "core/admin/app1/js/custom1.js", # Here
            "core/admin/app1/js/custom2.js" # Here
        )

Next, I explain how to add them to all admin pages.

So, set BASE_DIR / 'templates' to DIRS in TEMPLATES in settings.py as shown below:

# "core/settings.py"

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [
            BASE_DIR / 'templates', # Here
        ],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

Then, 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
 |  └-static
 |     └-core
 |        └-admin
 |           └-app1 
 |              |-css
 |              |  |-custom1.css
 |              |  └-custom2.css
 |              └-js
 |                 |-custom1.js
 |                 └-custom2.js
 |-app1
 |  |-models.py
 |  └-admin.py
 |-app2
 └-templates
    └-admin
       └-base.html # Here

Now, set them after <link ... "admin/css/base.css" %}{% endblock %}"> in base.html to add them to all admin pages as shown below without setting them to css and js in Media class in Person admin:

# "templates/admin/base.html"

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

Answer 2

You do not need to override admin templates to add your custom javascript to admin pages.

You can add your assets like this:

https://docs.djangoproject.com/en/dev/topics/forms/media/#assets-as-a-static-definition

And then you just need to override your forms that admin site uses.