Using `LayoutGridField` for an array instead of an object

[efagerberg]

Prerequisites

• I have read the documentation

What theme are you using?

mui

What is your question?

Hello, I am wondering how one would set up their uiSchema to get it to render an array of fields.

I found the docs and the layout grid sandbox (sorry no anchor link) very helpful but it only really covers objects.

My specific scenario is I have a field in my schema which is an array of 3 element tuples (arrays with max and min items set). I would like each row to be layed out such that each element in the inner list is next to one another in that row.

Such a property may look similar to:

{
    "example": {
        "type": "array",
        "prefixItems": [
        {
            "maxItems": 3,
            "minItems": 3,
            "prefixItems": [
                {
                    "type": "integer"
                },
                {
                    "type": "integer"
                },
                {
                    "type": "integer"
                }
            ],
            "type": "array"
        },
        // more items
    ],
}

With the actual data coming in as

{
   example: [
      [6, 16, 50],
      [7, 14, 31],
      [7, 14, 31],
      [7, 14, 31],
      [7, 21, 38],
      [7, 21, 38],
      [7, 26, 50],
    ],
}

[nickgros]

I don't think LayoutGrid has support for array items, but it seems like a good idea...what do you think @heath-freenome ?

[heath-freenome]

@efagerberg @nickgros It's an intriguing use of JSON schema. Given that we are basically using dotted paths under the hood to render the fields, I wonder if just adding the index to the dotted path would work? If not, then we would have to enhance it to work with arrays. Something I may not have time to do in the near future. @efagerberg are you willing to check out the dotted path with an index and see?

[efagerberg]

Hey @heath-freenome

Here is my attempt. I started with the simplest version from the layout grid field sandbox (mui theme) and then tried adapting it to my example.

Simple Person

{
  "type": "object",
  "properties": {
    "person": {
      "title": "Person Info",
      "$ref": "#/definitions/Person"
    }
  },
  "definitions": {
    "PersonName": {
      "type": "object",
      "properties": {
        "first": {
          "title": "First Name",
          "minLength": 1,
          "maxLength": 200,
          "type": "string"
        },
        "middle": {
          "title": "Middle Name",
          "minLength": 1,
          "maxLength": 200,
          "type": "string"
        },
        "last": {
          "title": "Last Name",
          "minLength": 1,
          "maxLength": 1000,
          "type": "string"
        }
      },
      "required": [
        "first",
        "last"
      ]
    },
    "Person": {
      "type": "object",
      "properties": {
        "name": {
          "$ref": "#/definitions/PersonName"
        }
      },
      "required": [
        "name"
      ]
    }
  }
}

{
  "ui:field": "LayoutGridField",
  "ui:layoutGrid": {
    "ui:row": {
      "spacing": 2,
      "children": [
        {
          "ui:row": {
            "spacing": 2,
            "size": 12,
            "children": [
              {
                "ui:col": {
                  "size": 12,
                  "children": [
                    "person"
                  ]
                }
              }
            ]
          }
        },
        {
          "ui:row": {
            "spacing": 2,
            "children": [
              {
                "ui:columns": {
                  "size": 4,
                  "children": [
                    {
                      "name": "person.name.first",
                      "fullWidth": true
                    },
                    {
                      "name": "person.name.middle",
                      "fullWidth": true
                    },
                    {
                      "name": "person.name.last",
                      "fullWidth": true
                    }
                  ]
                }
              }
            ]
          }
        }
      ]
    }
  },
  "person": {
    "ui:field": "LayoutHeaderField"
  }
}

And here is a case similar to the example I posted

Object with Arrays

{
  "type": "object",
  "properties": {
    "example": {
      "type": "array",
      "items": {
        "type": "array",
        "minItems": 3,
        "maxItems": 3,
        "items": [
          {
            "type": "integer"
          },
          {
            "type": "integer"
          },
          {
            "type": "integer"
          }
        ]
      }
    }
  },
  "required": [
    "example"
  ]
}

{
  "ui:field": "LayoutGridField",
  "ui:layoutGrid": {
    "ui:row": {
      "spacing": 2,
      "children": [
        {
          "ui:row": {
            "spacing": 2,
            "size": 12,
            "children": [
              {
                "ui:col": {
                  "size": 12,
                  "children": [
                    "example"
                  ]
                }
              }
            ]
          }
        },
        {
          "ui:row": {
            "spacing": 2,
            "children": [
              {
                "ui:columns": {
                  "size": 4,
                  "children": [
                    {
                      "name": "example.0.0",
                      "fullWidth": true
                    },
                    {
                      "name": "example.0.1",
                      "fullWidth": true
                    },
                    {
                      "name": "example.0.2",
                      "fullWidth": true
                    }
                  ]
                }
              }
            ]
          }
        }
      ]
    }
  }
}

I also tried example.at(M).at(N) and example[M][N] which all gave the same result. Let me know if you had something different in mind for the UISchema.

[heath-freenome]

Hmmm, I doesn't seem to have worked as I expected. If I have any time in the next week or so to look at it I will. No promises though as work is pretty hectic.

[efagerberg]

Thanks so much

[heath-freenome]

@efagerberg I have a fix for you... Your UiSchema should look like:

{
  "ui:field": "LayoutGridField",
  "ui:layoutGrid": {
    "ui:row": {
      "spacing": 2,
      "children": [
        {
          "ui:col": {
            "size": 12,
            "children": [
              "example"
            ]
          }
        },
        {
          "ui:columns": {
            "size": 4,
            "children": [
              {
                "name": "example.0.0",
                "fullWidth": true
              },
              {
                "name": "example.0.1",
                "fullWidth": true
              },
              {
                "name": "example.0.2",
                "fullWidth": true
              }
            ]
          }
        }
      ]
    }
  },
  "example": {
    "ui:field": "LayoutHeaderField"
  }
}