Custom field/widget for field inside of array

[gaelicmichael]

Prerequisites

• [√] I have read the documentation;
• [√] In the case of a bug report, I understand that providing a SSCCE example is tremendously useful to the maintainers.

Is there no way to create a custom field/widget for data inside an array?

We have a schema for editing a composite object that contains an array of objects. I have tried to use the uiSchema mechanism to create a custom editor (field and widget) for one of the elements in the objects in the array, but with no success. It does not seem to be recognized, as my custom editor component does not appear nor is there an error -- the standard, default editor appears.

I have successfully used the field/widget mechanism to customize the editor for an object element at the top-level, so I don’t know if there is a problem with attempting to customize object elements within arrays, or if I have not specified the identity of the object element properly. All of the examples in the documentation are extremely trivial -- rather than complex, real-world scenarios -- so I don’t know if nesting of this sort is supported.

An extract of the schema definitions I’ve tried is as follows:

#1 (widget)

...
"codesets" : {
  "type" : "array",
  "title" : "Codesets",
  "items": {
    "type" : "object",
    "properties" : {
      "reference" : {"type" : "string", "title" : "Source"},
      "termarray": {"type" : "string", "title" : "Codes"}
    }
  }
}

#2 (field)

...
"codesets" : {
  "type" : "array",
  "title" : "Codesets",
  "items": {
    "type" : "object",
    "properties" : {
      "reference" : {"type" : "string", "title" : "Source"},
      "termarray": {"type" : "object", "title" : "Codes", "properties": { "ta": {"type": "string"} }  }
    }
  }
}

I’ve tried all sorts of permutations:

const codeListUISchema = {
  codesets: {
    termarray: {
      "ui:widget": TermArrayComponent
    }
  }
}
const codeListUISchema = {
  codesets: {
    termarray: {
      "ui:field": "termarray"
    }
  }
}
const codeListUISchema = {
  termarray: {
    "ui:widget": TermArrayComponent
  }
}
... etc...

Version

Using react-jsonschema-form 1.0.3

[gaelicmichael]

I’ve just found a previous issue of the same nature that helped me solve this problem: #201

To solve this, one needs to insert "items" before the field inside the arrays.

[mravenash]

Hey Michael,
Do you have an example/sandbox of this issue. It will be really helpful.
Thanks
Avenash

[gaelicmichael]

I fixed it by following the example of the issue noted above. It was a shortage of clear documentation at the time that confused me, but I do now have it working as desired!