Resolve form field arguments dynamically when a form is instantiated

Overview

django-forms-dynamic

Resolve form field arguments dynamically when a form is instantiated, not when it's declared.

Tested against Django 2.2, 3.2 and 4.0 on Python 3.6, 3.7, 3.8, 3.9 and 3.10

Build Status pypi release

Installation

Install from PyPI

pip install django-forms-dynamic

Usage

Passing arguments to form fields from the view

The standard way to change a Django form's fields at runtime is override the form's __init__ method, pass in any values you need from the view, and poke around in self.fields:

class SelectUserFromMyTeamForm(forms.Form):
    user = forms.ModelChoiceField(queryset=User.objects.none())

    def __init__(self, *args, **kwargs):
        team = kwargs.pop("team")
        super().__init__(*args, **kwargs)
        self.fields["user"].queryset = User.objects.filter(team=team)
def select_user_view(request):
    form = SelectUserFromMyTeamForm(team=request.user.team)
    return render("form.html", {"form": form})

This works, but it doesn't scale very well to more complex requirements. It also feels messy: Django forms are intended to be declarative, and this is very much procedural code.

With django-forms-dynamic, we can improve on this approach. We need to do two things:

  1. Add the DynamicFormMixin to your form class (before forms.Form).
  2. Wrap any field that needs dynamic behaviour in a DynamicField.

The first argument to the DynamicField constructor is the field class that you are wrapping (eg forms.ModelChoiceField). All other arguments (with one special-cased exception detailed below) are passed along to the wrapped field when it is created.

But there's one very important difference: any argument that would normally be passed to the field constructor can optionally be a callable. If it is a callable, it will be called when the form is being instantiated and it will be passed the form instance as an argument. The value returned by this callable will then be passed into to the field's constructor as usual.

Before we see a code example, there's one further thing to note: instead of passing arbitrary arguments (like team in the example above) into the form's constructor in the view, we borrow a useful idiom from Django REST framework serializers and instead pass a single argument called context, which is a dictionary that can contain any values you need from the view. This is attached to the form as form.context.

Here's how the code looks now:

from dynamic_forms import DynamicField, DynamicFormMixin


class SelectUserFromMyTeamForm(DynamicFormMixin, forms.Form):
    user = DynamicField(
        forms.ModelChoiceField,
        queryset=lambda form: User.objects.filter(team=form.context["team"]),
    )
def select_user_view(request):
    form = SelectUserFromMyTeamForm(context={"team": request.user.team})
    return render("form.html", {"form": form})

This is much nicer!

Truly dynamic forms with XHR

But let's go further. Once we have access to the form, we can make forms truly dynamic by configuring fields based on the values of other fields. This doesn't really make sense in the standard Django request/response approach, but it does make sense when we bring JavaScript into the equation. A form can be loaded from the server multiple times (or in multiple pieces) by making XHR requests from JavaScript code running in the browser.

Implementing this "from scratch" in JavaScript is left as an exercise for the reader. Instead, let's look at how you might do this using some modern "low JavaScript" frameworks.

HTMX

To illustrate the pattern we're going to use one of the examples from the HTMX documentation: "Cascading Selects". This is where the options available in one <select> depend on the value chosen in another <select>. See the HTMX docs page for full details and a working example.

How would we implement the backend of this using django-forms-dynamic?

First, let's have a look at the form:

class MakeAndModelForm(DynamicFormMixin, forms.Form):
    MAKE_CHOICES = [
        ("audi", "Audi"),
        ("toyota", "Toyota"),
        ("bmw", "BMW"),
    ]

    MODEL_CHOICES = {
        "audi": [
            ("a1", "A1"),
            ("a3", "A3"),
            ("a6", "A6"),
        ],
        "toyota": [
            ("landcruiser", "Landcruiser"),
            ("tacoma", "Tacoma"),
            ("yaris", "Yaris"),
        ],
        "bmw": [
            ("325i", "325i"),
            ("325ix", "325ix"),
            ("x5", "X5"),
        ],
    }

    make = forms.ChoiceField(
        choices=MAKE_CHOICES,
        initial="audi",
    )
    model = DynamicField(
        forms.ChoiceField,
        choices=lambda form: form.MODEL_CHOICES[form["make"].value()],
    )

The key bit is right at the bottom. We're using a lambda function to load the choices for the model field based on the currently selected value of the make field. When the form is first shown to the user, form["make"].value() will be "audi": the initial value supplied to the make field. After the form is bound, form["make"].value() will return whatever the user selected in the make dropdown.

HTMX tends to encourage a pattern of splitting your UI into lots of small endpoints that return fragments of HTML. So we need two views: one to return the entire form on first page load, and one to return just the HTML for the model field. The latter will be loaded whenever the make field changes, and will return the available models for the chosen make.

Here are the two views:

def htmx_form(request):
    form = MakeAndModelForm()
    return render(request, "htmx.html", {"form": form})


def htmx_models(request):
    form = MakeAndModelForm(request.GET)
    return HttpResponse(form["model"])

Remember that the string representation of form["model"] (the bound field) is the HTML for the <select> element, so we can return this directly in the HttpResponse.

These can be wired up to URLs like this:

urlpatterns = [
    path("htmx-form/", htmx_form),
    path("htmx-form/models/", htmx_models),
]

And finally, we need a template. We're using django-widget-tweaks to add the necessary hx- attributes to the make field right in the template.

{% load widget_tweaks %}
<!DOCTYPE html>

<html>
  <head>
    <script src="https://unpkg.com/[email protected]"></script>
  </head>
  <body>
    <form method="POST">
      <h3>Pick a make/model</h3>
      {% csrf_token %}
      <div>
        {{ form.make.label_tag }}
        {% render_field form.make hx-get="/htmx-form/models/" hx-target="#id_model" %}
      </div>
      <div>
        {{ form.model.label_tag }}
        {{ form.model }}
      </div>
    </form>
  </body>
</html>

Unpoly

Let's build exactly the same thing with Unpoly. Unpoly favours a slightly different philosophy: rather than having the backend returning HTML fragments, it tends to prefer the server to return full HTML pages with every XHR request, and "plucks out" the relevant element(s) and inserts them into the DOM, replacing the old ones.

When it comes to forms, Unpoly uses a special attribute [up-validate] to mark fields which, when changed, should trigger the form to be submitted and re-validated. The docs for [up-validate] also describe it as "a great way to partially update a form when one field depends on the value of another field", so this is what we'll use to implement our cascading selects.

The form is exactly the same as the HTMX example above. But this time, we only need one view!

def unpoly_form(request):
    form = MakeAndModelForm(request.POST or None)
    return render(request, "unpoly.html", {"form": form})
urlpatterns = [
    path("unpoly-form/", unpoly_form),
]

And the template is even more simple:

{% load widget_tweaks %}
<!DOCTYPE html>

<html>
  <head>
    <script src="https://unpkg.com/[email protected]/unpoly.min.js"></script>
  </head>
  <body>
    <form method="POST">
      <h3>Pick a make/model</h3>
      {% csrf_token %}
      <div>
        {{ form.make.label_tag }}
        {% render_field form.make up-validate="form" %}
      </div>
      <div>
        {{ form.model.label_tag }}
        {{ form.model }}
      </div>
    </form>
  </body>
</html>

The include argument

There's one more feature we might need: what if we want to remove a field from the form entirely unless another field has a particular value? To accomplish this, the DynamicField constructor takes one special argument that isn't passed along to the constructor of the wrapped field: include. Just like any other argument, this can be a callable that is passed the form instance, and it should return a boolean: True if the field should be included in the form, False otherwise. Here's an example:

class CancellationReasonForm(DynamicFormMixin, forms.Form):
    CANCELLATION_REASONS = [
        ("too-expensive", "Too expensive"),
        ("too-boring", "Too boring"),
        ("other", "Other"),
    ]

    cancellation_reason = forms.ChoiceField(choices=CANCELLATION_REASONS)
    reason_if_other = DynamicField(
        forms.CharField,
        include=lambda form: form["cancellation_reason"].value() == "other",
    )

Known gotcha: callable arguments

One thing that might catch you out: if the object you're passing in to your form field's constructor is already a callable, you will need to wrap it in another callable that takes the form argument and returns the actual callable you want to pass to the field.

This is most likely to crop up when you're passing a custom widget class, because classes are callable:

class CancellationReasonForm(DynamicFormMixin, forms.Form):
    ...  # other fields

    reason_if_other = DynamicField(
        forms.CharField,
        include=lambda form: form["cancellation_reason"].value() == "other",
        widget=lambda _: forms.TextArea,
    )

Why the awkward name?

Because django-dynamic-forms was already taken.

Code of conduct

For guidelines regarding the code of conduct when contributing to this repository please review https://www.dabapps.com/open-source/code-of-conduct/

You might also like...
A drop-in replacement for django's ImageField that provides a flexible, intuitive and easily-extensible interface for quickly creating new images from the one assigned to the field.

django-versatileimagefield A drop-in replacement for django's ImageField that provides a flexible, intuitive and easily-extensible interface for creat

A pickled object field for Django

django-picklefield About django-picklefield provides an implementation of a pickled object field. Such fields can contain any picklable objects. The i

Full control of form rendering in the templates.

django-floppyforms Full control of form rendering in the templates. Authors: Gregor Müllegger and many many contributors Original creator: Bruno Renié

Twitter Bootstrap for Django Form

Django bootstrap form Twitter Bootstrap for Django Form. A simple Django template tag to work with Bootstrap Installation Install django-bootstrap-for

Full control of form rendering in the templates.

django-floppyforms Full control of form rendering in the templates. Authors: Gregor Müllegger and many many contributors Original creator: Bruno Renié

Twitter Bootstrap for Django Form - A simple Django template tag to work with Bootstrap

Twitter Bootstrap for Django Form - A simple Django template tag to work with Bootstrap

This is a sample Django Form.

Sample FORM Installation guide Clone repository git clone https://github.com/Ritabratadas343/SampleForm.git cd to repository. Create a virtualenv by f

Basic Form Web Development using Python, Django and CSS

thebookrain Basic Form Web Development using Python, Django and CSS This is a basic project that contains two forms - borrow and donate. The form data

MAC address Model Field & Form Field for Django apps

django-macaddress MAC Address model and form fields for Django We use netaddr to parse and validate the MAC address. The tests aren't complete yet. Pa

Tweak the form field rendering in templates, not in python-level form definitions. CSS classes and HTML attributes can be altered.

django-widget-tweaks Tweak the form field rendering in templates, not in python-level form definitions. Altering CSS classes and HTML attributes is su

Tweak the form field rendering in templates, not in python-level form definitions. CSS classes and HTML attributes can be altered.

django-widget-tweaks Tweak the form field rendering in templates, not in python-level form definitions. Altering CSS classes and HTML attributes is su

:package: :fire: Python project management. Manage packages: convert between formats, lock, install, resolve, isolate, test, build graph, show outdated, audit. Manage venvs, build package, bump version.
:package: :fire: Python project management. Manage packages: convert between formats, lock, install, resolve, isolate, test, build graph, show outdated, audit. Manage venvs, build package, bump version.

THE PROJECT IS ARCHIVED Forks: https://github.com/orsinium/forks DepHell -- project management for Python. Why it is better than all other tools: Form

Django query profiler - one profiler to rule them all.  Shows queries, detects N+1 and gives recommendations on how to resolve them
Django query profiler - one profiler to rule them all. Shows queries, detects N+1 and gives recommendations on how to resolve them

Django Query Profiler This is a query profiler for Django applications, for helping developers answer the question "My Django code/page/API is slow, H

Django query profiler - one profiler to rule them all.  Shows queries, detects N+1 and gives recommendations on how to resolve them
Django query profiler - one profiler to rule them all. Shows queries, detects N+1 and gives recommendations on how to resolve them

Django Query Profiler This is a query profiler for Django applications, for helping developers answer the question "My Django code/page/API is slow, H

Automatically resolve RidderMaster based on TensorFlow & OpenCV
Automatically resolve RidderMaster based on TensorFlow & OpenCV

AutoRiddleMaster Automatically resolve RidderMaster based on TensorFlow & OpenCV 基于 TensorFlow 和 OpenCV 实现的全自动化解御迷士小马谜题 Demo How to use Deploy the ser

A raw implementation of the nearest insertion algorithm to resolve TSP problems in a TXT format.

TSP-Nearest-Insertion A raw implementation of the nearest insertion algorithm to resolve TSP problems in a TXT format. Instructions Load a txt file wi

A Project to resolve hostname and receive IP

hostname-resolver A Project to resolve hostname and receive IP Installation git clone https://github.com/ihapiw/hostname-resolver.git Head into the ho

A django model and form field for normalised phone numbers using python-phonenumbers

django-phonenumber-field A Django library which interfaces with python-phonenumbers to validate, pretty print and convert phone numbers. python-phonen

A django model and form field for normalised phone numbers using python-phonenumbers

django-phonenumber-field A Django library which interfaces with python-phonenumbers to validate, pretty print and convert phone numbers. python-phonen

Releases(1.0.0)
Owner
DabApps
We design and build bespoke web and mobile applications that help our clients succeed
DabApps
Quick example of a todo list application using Django and HTMX

django-htmx-todo-list Quick example of a todo list application using Django and HTMX Background Modified & expanded from https://github.com/jaredlockh

Jack Linke 54 Dec 10, 2022
Django React - Purity Dashboard (Open-Source) | AppSeed

Django React Purity Dashboard Start your Development with an Innovative Admin Template for Chakra UI and React. Purity UI Dashboard is built with over

App Generator 19 Sep 19, 2022
PEP-484 stubs for Django

pep484 stubs for Django This package contains type stubs and a custom mypy plugin to provide more precise static types and type inference for Django f

TypedDjango 1.1k Dec 30, 2022
Create a netflix-like service using Django, React.js, & More.

Create a netflix-like service using Django. Learn advanced Django techniques to achieve amazing results like never before.

Coding For Entrepreneurs 67 Dec 08, 2022
Django-Docker - Django Installation Guide on Docker

Guía de instalación del Framework Django en Docker Introducción: Con esta guía p

Victor manuel torres 3 Dec 02, 2022
Django project starter on steroids: quickly create a Django app AND generate source code for data models + REST/GraphQL APIs (the generated code is auto-linted and has 100% test coverage).

Create Django App 💛 We're a Django project starter on steroids! One-line command to create a Django app with all the dependencies auto-installed AND

imagine.ai 68 Oct 19, 2022
Integarting Celery with Django to asynchronous tasks 📃

Integrating 🔗 Celery with Django via Redis server ,To-Do asynchronously 👀task without stopping the main-flow 📃 of Django-project . It increase your speed 🚀 and user experience 🤵 of website

Rushi Patel 4 Jul 15, 2022
A Django backed for PostgreSQL using Psycopg 3

A Django backend for PostgreSQL using Psycopg 2 The backend passes the entire Django test suite, but it needs a few modifications to Django and to i

Daniele Varrazzo 42 Dec 16, 2022
Build reusable components in Django without writing a single line of Python.

Build reusable components in Django without writing a single line of Python. {% #quote %} {% quote_photo src="/project-hail-mary.jpg" %} {% #quot

Mitchel Cabuloy 277 Jan 02, 2023
Automatically deletes old file for FileField and ImageField. It also deletes files on models instance deletion.

Django Cleanup Features The django-cleanup app automatically deletes files for FileField, ImageField and subclasses. When a FileField's value is chang

Ilya Shalyapin 838 Dec 30, 2022
I managed to attach the Django Framework to my Telegram Bot and set a webhook

I managed to attach the Django Framework to my Telegram Bot and set a webhook. I've been developing it from 10th of November 2021 and I want to have a basic working prototype.

Valentyn Vovchak 2 Sep 08, 2022
Stream Framework is a Python library, which allows you to build news feed, activity streams and notification systems using Cassandra and/or Redis. The authors of Stream-Framework also provide a cloud service for feed technology:

Stream Framework Activity Streams & Newsfeeds Stream Framework is a Python library which allows you to build activity streams & newsfeeds using Cassan

Thierry Schellenbach 4.7k Jan 02, 2023
Django Phyton Web Apps template themes

Django Phyton Web Apps template themes Free download source code project for build a modern website using django phyton web apps. Documentation instal

Mesin Kasir 4 Dec 15, 2022
The uncompromising Python code formatter

The Uncompromising Code Formatter “Any color you like.” Black is the uncompromising Python code formatter. By using it, you agree to cede control over

Python Software Foundation 30.7k Jan 03, 2023
This repository contains django library management system project.

Library Management System Django ** INSTALLATION** First of all install python on your system. Then run pip install -r requirements.txt to required se

whoisdinanath 1 Dec 26, 2022
Cookiecutter Django is a framework for jumpstarting production-ready Django projects quickly.

Cookiecutter Django Powered by Cookiecutter, Cookiecutter Django is a framework for jumpstarting production-ready Django projects quickly. Documentati

10.1k Jan 08, 2023
Django-powered application about blockchain (bitcoin)

Django-powered application about blockchain (bitcoin)

Igor Izvekov 0 Jun 23, 2022
Redia Cache implementation in django.

django-redis Recipe APP Simple Recipe app which shows different kinds off recipe to the user. Why Cache ? Accessing data from cache is much faster tha

Avinash Alanjkar 1 Sep 21, 2022
Domain-driven e-commerce for Django

Domain-driven e-commerce for Django Oscar is an e-commerce framework for Django designed for building domain-driven sites. It is structured such that

Oscar 5.6k Jan 01, 2023
A Django web application that shortens long URLs. This is a demo project to show off my tech abilities.

Django URL Shortener This project is just a complete and production-ready URL shortener web application to show off my tech and coding abilities. Impo

Seyyed Ali Ayati 5 Jan 26, 2022