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 %}
SOCIAL SHARE CARD GENERATOR