Custom MaterialArrayControlRenderer

General
1

Hi!
I’d like to customize MaterialArrayControlRenderer. It needs to use conditional rendering using data from schema.json.

{
  "title": "Node",
  "type": "object",
  "$schema": "http://json-schema.org/draft-07/schema#",
  "$id": "schema.json",
  "properties": {
    "nodes": {
      "type": "array",
      "items": {
        "type": "object",
        "required": ["unique_id", "name", "type"],
        "properties": {
          "unique_id": {
            "type": "string"
          },
          "name": {
            "type": "string"
          },
          "type": {
            "type": "string",
            "enum": ["action", "walk"]
          }
        },
        "allOf": [
          {
            "if": {
              "properties": {
                "type": {
                  "const": "action"
                }
              }
            },
            "then": {
              "type": "object",
              "properties": {
                "function": {
                  "type": "string"
                }
              }
            }
          },
          {
            "if": {
              "properties": {
                "type": {
                  "const": "walk"
                }
              }
            },
            "then": {
              "type": "object",
              "properties": {
                "text": {
                  "type": "string"
                  }
                }
              }
            }
          }
        ]
      }
    }
  }
}

But in MaterialArrayControlRenderer props I don’t have any information about fields data. Only data about row number. What helpers from @jsonforms/react can I use to get fields data?

[original thread by Alexandr Sashin]

2

Hi @alexandrsashin thanks for your interest in JSON Forms! All form data lives within the context so you need to get it from there. You can do this by customizing the withJsonFormsArrayLayoutProps which handles the mixture of React context and props, similar to Redux.

Alternatively you can do it manually within your component using Resolve utility which can be called liked this: Resolve.data(data, path). The data can be retrieved from the context, while the path is given already as a prop. The state can be accessed via the JsonFormsContext. For this we also provide the convenient useJsonForms() hook.

So the code could look like this:

const { core } = useJsonForms();
const arrayControlData = Resolve.data(core.data, path);

–
However I’m not sure why you need to access the data here. Is there something specific you want to achieve within the MaterialArrayControlRenderer?

3

[Alexandr Sashin]

I wanted to get field data only for debugging. Thank you for the answer!
useJsonForms() is very useful for me.