How to implement a json schema type for nested accordion fields

[austinh]

Is it possible to implement a group of fields that is inside collapsible menus? Think accordian style separation. For example an "Advanced Fieldset" where if you click it and several fields are now visible. I am not looking for dependencies or conditionals, I want it always rendered, just hidden behind a tab. How would I achieve that with uniforms and json schema?

Another way to think of this is tabs but just vertical. Can't seem to find any examples. I want to use just one json schema - not multiple.

[kestarumper]

Hi @austinh,
There are a few approaches to this and it depends on how much information you want to encode into the schema.
The biggest question is how the fields will know that they belong to the same group and what layout should be used.

The most straightforward approach is to use custom written component that renders an accordion and a group of fields inside it.
Assuming a very simple layout, you could use NestField that will render child fields in a linear manner. E.g.

import { NestField } from 'uniforms-unstyled';

<Accordion>
    <NestField fields={['fieldA', 'fieldB' /* ... */]} grouped showInlineError />;
</Accordion>

or, assuming the the group of fields is indicated as an object type in JSON schema. See playground example:

const schema = {
  "title": "Address",
  "type": "object",
  "properties": {
    "address": {
      "type": "object",
      "properties": {
        "city": {
          "type": "string"
        },
        "state": {
          "type": "string"
        },
        "street": {
          "type": "string"
        },
        "zip": {
          "type": "string",
          "pattern": "[0-9]{5}"
        }
      },
      "required": [
        "street"
      ]
    }
  }
}
<Accordion>
    <AutoField name="address" />
</Accordion>

// or create a custom handler in `createAutofield(...)` that understands that `<AutoField name="address" />` should render an accordion

Another helper would be the <AutoFields element="section" fields={['fieldA', 'fieldB']} omitFields={['fieldC', 'fieldD']} />; that allows to render many fields that doesn't have to be a JSON schema object type. You can list any fields you want.

Presented approaches assume that the layout is known. It's not encoded into the schema itself.

However, if you want to encode that layout information into the schema, then you have to come up with its format yourself and create a component (field component) that reads that information from the schema (e.g. use uniforms keyword to store metadata on fields or any other custom keyword - requires some configuration to e.g. Ajv).

You can also have a look at our product called Forminer, which integrates both form schema and form layout.

[austinh]

Thanks! Yes I am looking to embed it into the json schema itself because the fields will be dynamic - ie: provided by an API call, so i wont know the layout ahead of time.