json-tools/json-form

UI Schema extension: ability to hide / disable form elements.

1602 opened this issue · 3 comments

1602 commented

Use case

Depending on a value of country select address form should be different, for UK it should have postcode and county, for US its zip code and state.

Proposal

Introduce a node in UI schema which prescribes condition, action and scope. When condition met, action applied to elements listed in the scope.

1602 commented

Note to self: https://jsonforms.io/docs/uischema/rules example of spec implementing this feature.

1602 commented

So far I implemented 4 rules: disable, enable, hide, show. There's a demo for disable and hide rules: https://1602.github.io/json-form/

Disabled Enabled
image image

Here's how UI spec currently looks like:

"ui": {
    "rule": {
        "action": "disable|enable|show|hide",
        "path": "/path/to/value/to/validate",
        "condition": {
            "$schema": "https://json-schema.org/draft-06/schema#",
            "const": false,
            "default": false
        }
    }
},

It will fetch value at path /path/to/value/to/validate and examine it according to schema, then apply an action if value is valid against the schema.

There are few open question I'd like to resolve before shipping this.

  1. defaults
  2. relative paths
  3. how resulting value is affected

In more details below.

defaults

Currently ui.rule.condition schema relies on default keyword, otherwise result is surprising on undefined value. There's incompatible behaviour of json-schema package, required change described here: https://github.com/1602/json-schema/issues/43

relative paths

Consider the following scenario: array of items each of which has part of form depending on one of items property. How to make it so each of the items behave independently? Relative path would be a solution, so instead of /passengers/$index/passengerAge it would be ../passengerAge.

how resulting value is affected

Question: whether to erase disabled and hidden values. There're three options:

  1. It might remain in value, just invisible in UI (but will be sent to server when form submitted).
  2. It might be erased on resulting value (the one exposed by json-form component), but remain during editing, so that user can edit data in form without losing it.
  3. It might be erased immediately when hiding controls (this doesn't seem right).

I see when both 1 and 2 might be required, perhaps it should be configurable.

1602 commented

image

Array with local conditions also implemented, works when configured like that: "path": "../enabled"