Django Admin: Widgetry & Witchery
Download as KEY, PDF5 likes2,288 views
The document discusses Django Admin and ways to improve its functionality and interface. It describes how Django Admin works, including how it generates forms for models and restricts fields. It then outlines some limitations of Django Admin, such as its default widgets and save options. Solutions proposed include using custom widgets, forms, and templates to add features like preview buttons and number fields. The conclusion discusses potential replacements for Django Admin using technologies like Backbone.js and Tastypie to build a more flexible admin interface.
![How Django Admin Works
from django.contrib import admin
from app import admin
from app.courses.models import Course
from app.courses.forms import CourseAdminForm
class CourseAdmin(ModelAdmin):
base_model = Course
restrict_fields = ['instructors', 'teaching_assistants', ]
form = CourseAdminForm
fieldsets = [
(None, {
'fields': [
'name',
'topic',
'active',
]
}),
('Dates', {
'fields': [
'start_date',
'end_date',
'start_date_string',
'duration_string',
]
})
]
admin.site.register(Course, CourseAdmin)
https://docs.djangoproject.com/en/dev/ref/contrib/admin/](https://image.slidesharecdn.com/djangoadmin-120831001830-phpapp01/85/Django-Admin-Widgetry-Witchery-6-320.jpg)
![Solution: Horrible Hacks
templates/admin/change_form.html
var topicPageRegEx = //topics/topic//i;
var isTopicPage = topicPageRegEx.exec(window.location.href);
if (isTopicPage) {
var previewHosts = {'admin': 'site', 'admin.coursera.org': 'www.coursera.org'};
var previewUrl = 'http://' + previewHosts[window.location.host] + '/course/' + $
('input[name="short_name"]').val();
var $previewUrl = $('<input type="hidden" name="_previewurl">').val(previewUrl);
var $previewButton = $('<input type="submit" name="_saveandpreview" value="Save and Preview" class="btn
btn-info">');
var $saveButton = $('.form-actions input[name="_save"]')
$saveButton.after(' ').after($previewButton)
.after(' ').after($previewUrl);
}
admin/options.py
if "_saveandpreview" in request.POST:
return HttpResponseRedirect(request.POST['_previewurl'])](https://image.slidesharecdn.com/djangoadmin-120831001830-phpapp01/85/Django-Admin-Widgetry-Witchery-14-320.jpg)
Django Admin: Widgetry & Witchery
- 1. Django Admin Widgetry & Witchery Pamela Fox @pamelafox
- 2. Coursera: What we do
- 3. Our Backend
- 4. Why We Need Admin
- 5. Why Django Admin? Creates forms for adding/editing/searching models Restricts fields based on admin roles
- 6. How Django Admin Works from django.contrib import admin from app import admin from app.courses.models import Course from app.courses.forms import CourseAdminForm class CourseAdmin(ModelAdmin): base_model = Course restrict_fields = ['instructors', 'teaching_assistants', ] form = CourseAdminForm fieldsets = [ (None, { 'fields': [ 'name', 'topic', 'active', ] }), ('Dates', { 'fields': [ 'start_date', 'end_date', 'start_date_string', 'duration_string', ] }) ] admin.site.register(Course, CourseAdmin) https://docs.djangoproject.com/en/dev/ref/contrib/admin/
- 7. ...And a few words on how it doesn’t work.
- 8. ☹: The Look & Feel !=
- 9. Solution: Twitter Bootstrap https://github.com/gkuhn1/django-admin-templates-twitter-bootstrap
- 10. ☹: The Default Widgets BooleanField FilePathField RegexField CharField FloatField SlugField ChoiceField ImageField TimeField TypedChoiceField IntegerField URLField DateField IPAddressField ComboField DateTimeField GenericIPAddressField MultiValueField DecimalField MultipleChoiceField SplitDateTimeField EmailField TypedMultipleChoiceField ModelChoiceField FileField NullBooleanField ModelMultipleChoiceField
- 11. Solution: Custom Widgets TransloaditUpload WysiHTMLEditor NumberField NumberRangeField AutoCompleteTextInput UniqueShortName
- 12. Custom Widgets admin/common/widgets.py: class NumberField(HiddenInput): class Media: js = ( settings.ADMIN_MEDIA_PREFIX + 'js/numberfields.js', ) def render(self, name, value, attrs=None): input = super(NumberField, self).render(name, value, attrs=attrs) final_attrs = self.build_attrs(attrs) units = final_attrs.get('units', '') html = u""" <div class="number-field"> %(input)s <input type="number" min="1" class="number-range-field-num input-mini"> <span class="number-range-field-units">%(units)s<span> </div> """ % {'input': input, 'units': units} return mark_safe(html) course/admin.py course/forms.py from app import admin from django.forms import ModelForm from app.courses.models import Course from app.common.widgets import NumberField from app.courses.forms import CourseAdminForm class CourseAdminForm(ModelForm): class CourseAdmin(ModelAdmin): class Meta: base_model = Course widgets = { 'duration_string': NumberField( form = CourseAdminForm attrs={'units': 'weeks'}) }
- 13. ☹: Default Save Options !=
- 14. Solution: Horrible Hacks templates/admin/change_form.html var topicPageRegEx = //topics/topic//i; var isTopicPage = topicPageRegEx.exec(window.location.href); if (isTopicPage) { var previewHosts = {'admin': 'site', 'admin.coursera.org': 'www.coursera.org'}; var previewUrl = 'http://' + previewHosts[window.location.host] + '/course/' + $ ('input[name="short_name"]').val(); var $previewUrl = $('<input type="hidden" name="_previewurl">').val(previewUrl); var $previewButton = $('<input type="submit" name="_saveandpreview" value="Save and Preview" class="btn btn-info">'); var $saveButton = $('.form-actions input[name="_save"]') $saveButton.after(' ').after($previewButton) .after(' ').after($previewUrl); } admin/options.py if "_saveandpreview" in request.POST: return HttpResponseRedirect(request.POST['_previewurl'])
- 15. In conclusion...
- 16. Our Future Admin Stack? https://github.com/PaulUithol/backbone-tastypie https://github.com/joshbohde/django-backbone-example