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.

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('&nbsp;').after($previewButton)
.after('&nbsp;').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