The Admin Site

This module plays (almost) nicely with the autogenerated django admin site.

Models

Let’s imagine that you’re building a new Django model, FavoriteColor, that will match a person with his/her favorite color.

class FavoriteColor(models.Model):
    person = models.ForeignKey(Person)
    color = models.CharField(max_length=100, choices=COLORS)

    def __unicode__(self):
        return "{}'s favorite color is {}".format(self.person, self.color)
    __str__ = __unicode__

The Admin module

Note

This takes into account that your URL configuration is admin-ready (with autodiscover and the URLs being loaded and pointing at /admin/ for example).

Using the normal Admin process, in your app, add the following admin.py file.

from django.contrib import admin
from .models import FavoriteColor

class FavoriteColorAdmin(admin.ModelAdmin):
    pass

admin.site.register(FavoriteColor, FavoriteColorAdmin)

If you’re reloading the devserver, and if you can access the demo site, you should be able to log in the admin and see that you have access to the default “favorite color” administration.

Although, for now, it’s not using the autocomplete widgets.

Agnocomplete-ready Admin

Note

The following customization uses selectize.js, but of course this would be almost the same with other JS front-ends. The loaded JS and CSS would be different, but the process would remain the same.

Add this form in the admin.py file:

import forms

class FavoriteColorModelForm(forms.ModelForm):
    person = fields.AgnocompleteModelField('AutocompletePerson')

    class Meta:
        fields = ('color', 'person')
        model = FavoriteColor

and make sure that the admin.ModelAdmin class is using it properly:

class FavoriteColorAdmin(admin.ModelAdmin):
    form = FavoriteColorModelForm

    class Media:
        css = {
            'screen': ('css/admin.css', 'css/selectize.css',)
        }
        js = (
            'js/jquery.js',
            'js/selectize.js',
            'js/demo/selectize.js',
        )

Detailed Media

css

The css/selectize.css file is the standard selectize stylesheet, provided by the selectize.js module.

But in order to have a correct look’n’feel, you’ll have to load this css/admin.css file, or another file with the following CSS instructions:

.form-row {
    overflow: visible;
}

javascript

Again, the js/jquery.js and js/selectize.js are the standard distribution, out of the shelves.

Note

The autogenerated admin already loads jQuery, but for some reason, selectize.js doesn’t play nice with it, so we’re reloading a duplicate. This issue will be addressed as quick as possible.

The js/demo/selectize.js is a script common to both demo pages and the admin page. You can browse it if you want, but it doesn very simple things:

• it selects the elements in the page with the attribute data-agnocomplete,
• it applies the selectize() function to each of them, using some standard options.

Of course, you can copy-paste this script, and adapt it to your needs. At least in your edit page, you have to apply the selectize function to your target elements (usually, select boxes).