In this post, I'll show you how to add a custom view URL to the list on the admin page index.
Here's what the result will look like:
I added a custom list to the index to apply the CSS style of the Django admin page.
Overriding 'app_list.html'
Step 1. Create the Template Directory
Create a directory /templates/admin in your Django Project. And create a file app_list.html in the directory.
The structure will look like below.
Django-Project ├── Dockerfile ├── README.md ├── app │ ├── projectname │ ├── core │ ├── manage.py │ ├── appname1 │ ├── templates │ │ └── admin │ │ ├── app_list.html │ └── appname2 Step 2. Find the Original app_list.html
Visit the Django GitHub repository.
Search for the 'app_list.html' file.
Step 3. Copy the Original Code
Copy the entire content of the 'app_list.html' file.
Step 4. Paste the Code into Your file
Paste the copied codes into your app_list.html file.
Step 5. Locate the Insertion Point
Let's see where could we insert our codes.
{% load i18n %} <!-- Insert your codes HERE! --> {% if app_list %} {% for app in app_list %} <div class="app-{{ app.app_label }} module{% if app.app_url in request.path|urlencode %} current-app{% endif %}"> <table> <caption> <a href="{{ app.app_url }}" class="section" title="{% blocktranslate with name=app.name %}Models in the {{ name }} application{% endblocktranslate %}">{{ app.name }}</a> </caption> <thead class="visually-hidden"> <tr> <th scope="col">{% translate 'Model name' %}</th> <th scope="col">{% translate 'Add link' %}</th> <th scope="col">{% translate 'Change or view list link' %}</th> </tr> </thead> Step 6. Add Your Custom Code
I add codes like below. Be mindful of the class names and tags to ensure proper styling and functionality.
{% load i18n %} <div class="module"> <table> <caption> <a href="#" class="section" title="new-table">{% translate 'Custom Admin View' %}</a> </caption> <thead> <tr> <th scope="col">{% translate 'Create API List' %}</th> <th scope="col">.</th> <th scope="col">.</th> </tr> </thead> <tbody> <tr> <th scope="row"> <a href="{% url 'my-api' %}">Custom Admin View</a> </th> <th scope="row"><a>.</a></th> <th scope="row"><a>.</a></th> </tr> </tbody> </table> </div> {% if app_list %} {% for app in app_list %} 
Top comments (0)