I want to use custom render in my array form of JSON forms

General
1

I am trying to use custom renderer in my array form, I have gone through the discussion, and found a technique but that is making my array form into a accordion
The schema I am using is

{
    type: "object",
    properties: {
      comments: {
        type: "array",
        items: {
          type: "object",
          properties: {
            date: {
              type: "string",
              format: "date",
            },
            message: {
              type: "string",
            },
            enum: {
              type: "string",
              enum: ["foo", "bar"],
            },
          },
        },
      },
    },
  };

and uiSchema is

{
    type: "VerticalLayout",
    elements: [
      {
        type: "Control",
        scope: "#/properties/comments",
        options: {
          detail: {
            type: "VerticalLayout",
            elements: [
              {
                type: "Control",
                scope: "#/properties/bnm",
                options: {
                  format: "textArea",
                },
              },
            ],
          },
        },
      },
    ],
  };

Help me to modify the schema and uiSchema so that I can easily render any custom components in array JSON forms, also I don’t want to make acccordion out of array, I want to use the default array form. Also I am using options.format : ‘accordion’, as my tested to render custom components.

2

Hi @akash1907,

We have two different array renderers in the React Material code base:

  • A table renderer, and
  • A “layout” renderer

The table renderer is by default used for shallow objects and renders them in a table like UI. For rendering the controls, the cells registry is used.

The layout renderer is much more generic and solely relies on the renderers registry. It can handle arbitrary items in arrays (e.g. nested objects), however it renders them vertically and not in a compact table like UI.

By using the options.detail within the UI Schema, you are triggering the layout renderer. We don’t support UI Schemas for tables.

If you want to customize the table rendering in React Material, then you need to provide custom cells instead of renderers. Conceptually they are very similar, just the bindings are slightly different.

3

Okay so can you please provide how to attain custom cells to render my custom components,
I am rendering my custom components by uiSchema
{
type: “Control”,
scope: “#/properties/bnm”,
options: {
format: “textArea”,
},
},
I am providing options.format to uniquely render any custom components

4

We don’t support declarative UI Schemas for cells. So in case you would like to have that, then you first need to implement a custom table renderer which is able to delegate UI Schemas to cells. At the moment the UI Schemas for cells are always generated on the fly.