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.5k
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
O'Reilly Superstream: Building a RAG App to Chat with Your Data
pamelafox
0
120
AI Tour Mexico: Production-ready RAGwith Azure AI Search
pamelafox
0
180
AI Tour Mexico: Securing AI Apps on Azure
pamelafox
0
180
RAGHack: Kickoff and RAG 101
pamelafox
0
430
RAGHack: Building RAG apps in Python
pamelafox
0
230
Deploying an AI App to aPrivate Network on Azure
pamelafox
1
130
Securing AI: Data Access Control for RAG
pamelafox
1
130
Handling User Auth for a SPA App on Azure
pamelafox
1
71
Securing AI Apps on Azure:Add User Login to AI Apps using MSAL SDK
pamelafox
2
85
Other Decks in Technology
See All in Technology
【shownet.conf_】持続可能な次世代Wi-Fi運用に向けて
shownet
PRO
0
360
ドキュメントとの付き合い方を考える
leveragestech
1
140
コード✕AIーソフトウェア開発者のための生成AI実践入門~
yuhattor
3
830
UE5の雑多なテク
ryuichikawano
0
410
分析者起点の企画を成功させた連携面の工夫
lycorptech_jp
PRO
1
260
スタサプ ForSCHOOLアプリのシンプルな設計
recruitengineers
PRO
3
600
Oracle Database 23ai 新機能#4 Real Application Clusters
oracle4engineer
PRO
0
160
【shownet.conf_】トポロジ図の歩き方
shownet
PRO
0
520
軽いノリで"自動化"に取り組んではいけないという話
tetsuyaooooo
1
510
ガバメントクラウド開発と変化と成長する組織 / Organizational change and growth in developing a government cloud
kazeburo
4
780
LINEヤフー新卒採用 コーディングテスト解説 アルゴリズム問題編
lycorp_recruit_jp
0
13k
Assisted reorganization of data structures
ennael
PRO
0
260
Featured
See All Featured
Designing Dashboards & Data Visualisations in Web Apps
destraynor
228
52k
Visualization
eitanlees
143
15k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
364
22k
The Language of Interfaces
destraynor
154
24k
Raft: Consensus for Rubyists
vanstee
136
6.6k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
7
580
Design by the Numbers
sachag
278
19k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
92
16k
The World Runs on Bad Software
bkeepers
PRO
65
11k
StorybookのUI Testing Handbookを読んだ
zakiyama
26
5.1k
Facilitating Awesome Meetings
lara
49
6k
Building Your Own Lightsaber
phodgson
102
6k
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