The problem¶

The current ArrayField input in Django admin displays a single input box. You're supposed to use a comma to separate the values. This is anything except user-friendly.

And this fails for two more reasons:

• If a value has a comma, then Django will interpret that value as two values
• Nested ArrayFields are not supported

Custom widget¶

I've created a Django app called django-jsonform which dynamically generates form inputs for ArrayField. This app was originally created for dynamic json forms, but it also supports ArrayField.

It looks like this:

Usage¶

First, install django-jsonform:

$ pip install django-jsonform

Second, add django_jsonform to your INSTALLED_APPS:

# settings.py

INSTALLED_APPS = [
    # ...
    'django_jsonform',
]

Now, we'll need to use the ArrayField provided by django-jsonform which is just a subclass of Django's default ArrayField. The only difference is that it will use the dynamic widget instead of a plain input field.

This is what you'll do in your models.py file:

# models.py

from django_jsonform.models.fields import ArrayField


class ShoppingList(models.Model):
    items = ArrayField(
        models.CharField(max_length=10, blank=True),
        size=8
    )

Register your model in the admin site and you should see a dynamic, user-friendly widget as shown in the image earlier.