ArtsAutosBooksBusinessEducationEntertainmentFamilyFashionFoodGamesGenderHealthHolidaysHomeHubPagesPersonal FinancePetsPoliticsReligionSportsTechnologyTravel
  • »
  • Technology»
  • Computers & Software»
  • Computer Science & Programming

Create Custom Button in Django Admin Change/Update Form

Updated on November 30, 2015

Here is the easiest way to add a button in Django admin change form.

Let say the project name is my_project.
The app name is my_app.
Here we will add a cancel button on Django Change form.

Create a file called custom_change_template.html in my_project/my_app/templates/admin/
in this file enter the code bellow:-

{% extends "admin/change_form.html" %}
{% load i18n %}
{% block submit_buttons_bottom %}
{{ block.super }}
<div class="submit-row list-group">

<button type="button" title="Cancel" class="list-group-item active" name="_cancel" onclick="location.href='/admin/order/project/';">
<span class="glyphicon step-backward"></span>
<span class="text">Cancel</span>
</button>
</div>
{% endblock %}

Explain

The line extends "admin/change_form.html" actually include the original form and it extend the from, after that line anything you add will be displayed in the form.

The load i18n according to djangoproject site documentation:-
Translations in Django templates uses two template tags and a slightly different syntax than in Python code. To give your template access to these tags, put {% load i18n %} toward the top of your template. As with all template tags, this tag needs to be loaded in all templates which use translations, even those templates that extend from other templates which have already loaded the i18n tag.

The Line block submit_buttons_bottom
We are adding cancel button in the same place where the Save button is being displayed.

And the line block.super placed before the "Cancel" HTML Code so that the Cancel button should appear after the "Save" button.

And at last the HTML for the Cancel Button:-

<div class="submit-row list-group">
<button type="button" title="Cancel" class="list-group-item active" name="_cancel" onclick="location.href='/admin/order/project/';">
<span class="glyphicon step-backward"></span>
<span class="text">Cancel</span>
</button>
</div>


How it's Look Like

Django Admin Cancel Button Custom Theme
Django Admin Cancel Button Custom Theme | Source
Django Admin Cancel Button Default Theme
Django Admin Cancel Button Default Theme | Source

Comments

    0 of 8192 characters used
    Post Comment

    No comments yet.