bhch/react-json-form

Support for UI customizations

Opened this issue · 6 comments

bhch commented

Features:

  • Setting custom html class names on form elements
  • Providing custom text for button labels

Possible Solution:

Creating a new keyword called ui for this purpose:

Example:

{
    "type": "object",
    "properties": {
        // ...
    },
    "ui": {
        "htmlClass": "custom-class",
        "addButtonText": "Add key",
        "removeButtonText": "Remove key",
        // etc ...
    }
}

Here are my 2 cents on this:

First of all, I don't think adding UI customization to the JSON schema is the right way

  • it feels like a hack: it breaks the separation between data structure definitions and UI, and just moves the JSON schema further away from the spec
  • UI customization, in the context of django admin, is usually handled site-wide so this would not be a good solution if JSON fields are used in many models or as part of an admin interface package

Secondly, I think a better approach would be to:

  1. remove all styling from the base jsonform classes and limit them purely for logic control
  2. add default styling classes that match the default django admin interface
  3. these default styling classes should be injected as part of the fieldset creation
  4. allow overriding these default classes at the django settings level via a dictionary

So the settings dictionary could be something like this:

JSONFORM_STYLING = [
  	{
		"type": "input_text",
		"classes": "ui input text"
	},
	{
		"type": "button_array_add",
		"classes": "ui button blue"
	}
]

Let me know what you think.

bhch commented

I like what you've proposed and it's probably the better solution for styling.

However, how do we customize only certain elements of the form, e.g. changing the display text of "Add item" or "Add key" buttons?

To illustrate, you might have two arrays: one for "Animals" and other for "Birds". You might want to display "Add Animal" or "Add Bird" text on the respective add buttons.

This seems possible only by keeping this info in the schema.

That is a fair point.

What I was primarily referring to is general/global styling which is what I understood from having that top-level "ui" key.

For the JSON schema styling, it would be better to have style overrides at the property level.
That would, IMO, make it easier to implement and understand.

So each field type could look like:
{ "type": "text", "style": { "classes": "x y z" } }
where style could have extra keys depending on the field type.

Any update on this?

bhch commented

@Shivaank121 I'm currently doing a complete rewrite of this library. You'll be able to customize almost everything. It will have support for theming, plugins, etc.

I haven't published the changes yet, but it'll take at least a month to ship a functioning version.

Much appreciated! Thanks @bhch
Also wanted to know - In the new version, will there be a better way to connect autocomplete widgets to Django models search? Currently there is no way to render different labels and values in autocompletes on django change form.
If you prefer, I can create a separate issue in the django-jsonform repo to explain this in detail.