Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Django Admin: Widgetry & Witchery
Search
Pamela Fox
August 31, 2012
Technology
4
1.6k
Django Admin: Widgetry & Witchery
Why we chose to use Django admin, and how it worked, and, well, how it didn't work.
Pamela Fox
August 31, 2012
Tweet
Share
More Decks by Pamela Fox
See All by Pamela Fox
Enterprise AI in 2025?
pamelafox
0
260
Fast-track your AI app development with GitHub and Azure
pamelafox
1
170
GitHub Universe: Evaluating RAG apps in GitHub Actions
pamelafox
0
460
Learn Live: Creating a Website using GitHub Copilot
pamelafox
1
250
O'Reilly Superstream: Building a RAG App to Chat with Your Data
pamelafox
1
390
AI Tour Mexico: Production-ready RAGwith Azure AI Search
pamelafox
1
360
AI Tour Mexico: Securing AI Apps on Azure
pamelafox
0
790
RAGHack: Kickoff and RAG 101
pamelafox
1
760
RAGHack: Building RAG apps in Python
pamelafox
1
440
Other Decks in Technology
See All in Technology
ZOZOTOWNカート決済リプレイス ── モジュラモノリスという過渡期戦略
zozotech
PRO
0
290
Data & AIの未来とLakeHouse
ishikawa_satoru
0
730
エンジニアに定年なし! AI時代にキャリアをReboot — 学び続けて未来を創る
junjikoide
0
180
Spring Boot利用を前提としたJavaライブラリ開発方法の提案
kokihoshihara
PRO
2
200
クレジットカードの不正を防止する技術
yutadayo
16
7.3k
ステートレスなLLMでステートフルなAI agentを作る - YAPC::Fukuoka 2025
gfx
8
1.2k
コミュニティと共に変化する 私とFusicの8年間
ayasamind
0
470
Dart and Flutter MCP serverで実現する AI駆動E2Eテスト整備と自動操作
yukisakai1225
0
440
Black Hat USA 2025 Recap ~ クラウドセキュリティ編 ~
kyohmizu
0
530
仕様駆動 x Codex で 超効率開発
ismk
2
1.4k
コンピューティングリソース何を使えばいいの?
tomokusaba
1
160
QAを"自動化する"ことの本質
kshino
1
110
Featured
See All Featured
We Have a Design System, Now What?
morganepeng
54
7.9k
Unsuck your backbone
ammeep
671
58k
Documentation Writing (for coders)
carmenintech
76
5.1k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
253
22k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
249
1.3M
Designing for Performance
lara
610
69k
How to train your dragon (web standard)
notwaldorf
97
6.4k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Facilitating Awesome Meetings
lara
57
6.6k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
9
970
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
52
5.7k
Optimizing for Happiness
mojombo
379
70k
Transcript
Django Admin Widgetry & Witchery Pamela Fox @pamelafox Thursday, August
30, 12
Coursera: What we do Thursday, August 30, 12
Our Backend Thursday, August 30, 12
Why We Need Admin Thursday, August 30, 12
Why Django Admin? Creates forms for adding/editing/searching models Restricts fields
based on admin roles Thursday, August 30, 12
How Django Admin Works https://docs.djangoproject.com/en/dev/ref/contrib/admin/ 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) Thursday, August 30, 12
...And a few words on how it doesn’t work. Thursday,
August 30, 12
☹: The Look & Feel != Thursday, August 30, 12
Solution: Twitter Bootstrap https://github.com/gkuhn1/django-admin-templates-twitter-bootstrap Thursday, August 30, 12
☹: The Default Widgets BooleanField CharField ChoiceField TypedChoiceField DateField DateTimeField
DecimalField EmailField FileField FilePathField FloatField ImageField IntegerField IPAddressField GenericIPAddressField MultipleChoiceField TypedMultipleChoiceField NullBooleanField RegexField SlugField TimeField URLField ComboField MultiValueField SplitDateTimeField ModelChoiceField ModelMultipleChoiceField Thursday, August 30, 12
Solution: Custom Widgets WysiHTMLEditor TransloaditUpload UniqueShortName NumberField NumberRangeField AutoCompleteTextInput Thursday,
August 30, 12
Custom Widgets 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) admin/common/widgets.py: from django.forms import ModelForm from app.common.widgets import NumberField class CourseAdminForm(ModelForm): class Meta: widgets = { 'duration_string': NumberField( attrs={'units': 'weeks'}) } course/forms.py from app import admin from app.courses.models import Course from app.courses.forms import CourseAdminForm class CourseAdmin(ModelAdmin): base_model = Course form = CourseAdminForm course/admin.py Thursday, August 30, 12
☹: Default Save Options != Thursday, August 30, 12
Solution: Horrible Hacks 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); } templates/admin/change_form.html if "_saveandpreview" in request.POST: return HttpResponseRedirect(request.POST['_previewurl']) admin/options.py Thursday, August 30, 12
In conclusion... Thursday, August 30, 12
Our Future Admin Stack? https://github.com/PaulUithol/backbone-tastypie https://github.com/joshbohde/django-backbone-example Thursday, August 30, 12