Skip to main content

Django JSON form field on steroids using react-json-schema-form

Project description

https://badge.fury.io/py/django-reactive.svg https://travis-ci.org/tyomo4ka/django-reactive.svg?branch=master https://codecov.io/gh/tyomo4ka/django-reactive/branch/master/graph/badge.svg

django-reactive integrates react-jsonschema-form (RJSF) in Django projects.

Motivation

In my opinion, JSON types is an very useful feature of Postgres which allows to combine relational and non-relational approaches to storing data. In many cases it leads to simpler database design.

The JSONField in Django provides a nice way of integrating json and jsonb Postgres types with the ORM. ORM can even include JSON fields in database queries. jsonb type also offers a way of indexing JSON documents. That makes it a powerful tool in the application design and opens a wide range of use cases, e.g. polymorphic behaviour, storing complex hierarchies and lists of related entities.

However, the main limitation of JSONField in Django is that it does not offer a good way of configuring such objects in default admin UI. Defining JSON objects inside the textarea is not practical for most use cases. django-reactive tries to address this problem by offering an integration between JSONField and an awesome react-jsonschema-form (RJSF) JS library and Python’s jsonschema <https://github.com/Julian/jsonschema> for backend validation. Such integration from our practice can significantly reduce an amount of work you need to spend on building custom forms for JSONField types.

In this case developers only need to define a JSON schema for such field and optionally UI schema to modify UI of such forms.

A simple example is shown below:

from django.db import models

from django_reactive.fields import ReactJSONSchemaField


class TestModel(models.Model):
    simple = ReactJSONSchemaField(
        help_text='Simple',
        schema={
            "title": "A registration form",
            "description": "A simple form example.",
            "type": "object",
            "required": [
                "firstName",
                "lastName"
            ],
            "properties": {
                "firstName": {
                    "type": "string",
                    "title": "First name"
                },
                "lastName": {
                    "type": "string",
                    "title": "Last name"
                },
                "age": {
                    "type": "integer",
                    "title": "Age"
                },
                "bio": {
                    "type": "string",
                    "title": "Bio"
                },
                "password": {
                    "type": "string",
                    "title": "Password",
                    "minLength": 3
                },
                "telephone": {
                    "type": "string",
                    "title": "Telephone",
                    "minLength": 10
                }
            }
        },
        ui_schema={
            "firstName": {
                "ui:autofocus": True,
                "ui:emptyValue": ""
            },
            "age": {
                "ui:widget": "updown",
                "ui:title": "Age of person",
                "ui:description": "(earthian year)"
            },
            "bio": {
                "ui:widget": "textarea"
            },
            "password": {
                "ui:widget": "password",
                "ui:help": "Hint: Make it strong!"
            },
            "date": {
                "ui:widget": "alt-datetime"
            },
            "telephone": {
                "ui:options": {
                    "inputType": "tel"
                }
            }
        },
    )

It will generate a form like this:

images/simple.png

Quick start

Install django-reactive:

pip install django-reactive

Add it to your INSTALLED_APPS:

INSTALLED_APPS = (
    ...
    'django_reactive.apps.DjangoReactJsonSchemaFormConfig',
    ...
)

Run example app

  • docker-compose up
  • poetry install
  • ./example/manage.py makemigrations
  • ./example/manage.py migrate
  • ./example/manage.py createsuperuser
  • ./example/manage.py runserver
  • open http://127.0.0.1:8000/admin
  • Go to “Test model” to check a few examples

Features

  • React, RJSF and other JS assets are bundled with the package.
  • Integration with default Django admin theme.
  • Backend and frontend validation.

Limitations

To implement this behaviour you can define an array schema with one property serving as a key of the object and do transformation in your JSON class. An example will be provided later.

Future development

  • Display description as tooltips
  • Polish styles and HTML generated by RJSF

Project details


Download files

Download the file for your platform. If you're not sure which to choose, learn more about installing packages.

Files for django-reactive, version 0.0.4
Filename, size File type Python version Upload date Hashes
Filename, size django_reactive-0.0.4-py3-none-any.whl (358.3 kB) File type Wheel Python version py3 Upload date Hashes View
Filename, size django-reactive-0.0.4.tar.gz (355.6 kB) File type Source Python version None Upload date Hashes View

Supported by

AWS AWS Cloud computing Datadog Datadog Monitoring Facebook / Instagram Facebook / Instagram PSF Sponsor Fastly Fastly CDN Google Google Object Storage and Download Analytics Huawei Huawei PSF Sponsor Microsoft Microsoft PSF Sponsor NVIDIA NVIDIA PSF Sponsor Pingdom Pingdom Monitoring Salesforce Salesforce PSF Sponsor Sentry Sentry Error logging StatusPage StatusPage Status page