Controls become Labels in a forms based on nested arrays

General
1

I want to render a form based on a Json Schema that contains nested arrays and not able to see the fields from the inner array.

{
    "type": "object",
    "description": "Root",
    "title": "Root",
    "properties": {
      "Name": {
        "type": "string",
        "title": "Name"
      },
      "Id": {
        "type": "string",
        "title": "ID"
      },
      "A1": {
        "type": "array",
        "title": "A 1",
        "items": {
          "type": "object",
          "title": "A1 items",
          "properties": {
            "A1Field1": {
              "type": "string",
              "title": "A 1 Field 1"
            },
            "A11": {
              "type": "array",
              "title": "A 1 1",
              "items": {
                "type": "object",
                "title": "A 1 1 Items",
                "properties": {
                  "A11Field1": {
                    "type": "string",
                    "title": "A11Field1"
                  },
                  "A11Field2": {
                    "type": "string",
                    "title": "A11Field2"
                  },
                  "A11Field3": {
                    "type": "string",
                    "title": "A11Field3"
                  }
                }
              }
            }
          }
        }
      }
    }
  }

uiSchema:

{
    "type": "HorizontalLayout",
    "elements": [
      {
        "type": "Control",
        "scope": "#/properties/A1",
        "options": {
          "detail": {
            "type": "VerticalLayout",
            "elements": [
              {
                "type": "Control",
                "scope": "#/properties/A1Field1"
              },
              {
                "type": "Control",
                "scope": "#/properties/A11",
                "options": {
                  "detail": {
                    "type": "HorizontalLayout",
                    "elements": [
                      {
                        "type": "Control",
                        "scope": "#/properties/A11Field3"
                      },
                      {
                        "type": "Control",
                        "scope": "#/properties/A11Field2"
                      }
                    ]
                  }
                }
              }
            ]
          }
        }
      }
    ]
  }

I’ve also introduced my own HorizontalLayout and I can see that the uiSchema passed into the renderer at the top level is modified from what I have passed in:

{
    "type": "HorizontalLayout",
    "elements": [
        {
            "type": "Control",
            "scope": "#/properties/A1",
            "options": {
                "detail": {
                    "type": "VerticalLayout",
                    "elements": [
                        {
                            "type": "Control",
                            "scope": "#/properties/A1Field1"
                        },
                        {
                            "type": "Control",
                            "scope": "#/properties/A11",
                            "options": {
                                "detail": {
                                    "type": "HorizontalLayout",
                                    "elements": [
                                        {
                                            "type": "Label"
                                        },
                                        {
                                            "type": "Label"
                                        }
                                    ]
                                }
                            }
                        }
                    ]
                }
            }
        }
    ]
}

The controls bound to #/properties/A11Field3 and #/properties/A11Field2 have been replaced with empty labels.

image
image1890×656 6.1 KB

Any idea as to what might have caused this ?

Sebastian

2

Hi @sf17,

This is a very weird error. We typically don’t touch the UI Schema at all. The only exception are he Angular Material renderers which break with this convention and manage read-only via the UI Schema.

Which version of JSON Forms and which renderer set are you using? Could we reproduce this just by using the posted schemas in one of our seed apps?

3

Hi Stefan,

Thanks for your answer. I went and double checked all the code and found the issue - completely unrelated to JsonForms. It was a bug in my code while traversing the uiSchema to hydrate the enums, just before passing it to JsonForms.

Sebastian

1 Like