Fluent Array

The dtl-fluent-array widget is used for visualization and management of arrays in a form. It allows dynamic addition and removal of items.

It is now possible to insert layouts (tabs, columns, etc.) directly into the array.

{
  "type": "object",
  "widget": {
    "type": "dtl-fluent-section"
  },
  "properties": {
    "array": {
      "type": "array",
      "widget": {
        "type": "dtl-fluent-array"
      },
      "items": {
        "type": "object",
        "widget": {
          "type": "dtl-fluent-object"
        },
        "properties": {
          "text": {
            "type": "string",
            "title": "Text",
            "widget": {
              "type": "text"
            }
          },
          "textarea": {
            "type": "string",
            "title": "Textarea",
            "widget": {
              "type": "textarea"
            }
          }
        }
      },
      "config": {
        "numberOfRows": {
          "value": 0,
          "onlyForEmpty": true
        }
      }
    }
  },
  "layout": [
    {
      "type": "layout",
      "items": [
        {
          "propertyKey": "array",
          "type": "layout",
          "items": [
            {
              "type": "layout",
              "items": [
                {
                  "type": "layout",
                  "widget": {
                    "type": "dtl-fluent-card"
                  },
                  "items": [
                    "array!.text"
                  ]
                },
                "array!.textarea"
              ],
              "config": {
                "columns": [
                  {
                    "width": 6,
                    "content": [
                      1
                    ]
                  },
                  {
                    "width": 6,
                    "content": [
                      0
                    ]
                  }
                ],
                "innerPageLayout": false
              },
              "widget": {
                "type": "dtl-fluent-columns"
              }
            }
          ],
          "widget": {
            "type": "dtl-fluent-array"
          }
        }
      ],
      "config": {
        "columns": [
          {
            "width": 6,
            "content": [
              0
            ]
          },
          {
            "width": 6
          }
        ],
        "innerPageLayout": false
      },
      "widget": {
        "type": "dtl-fluent-columns"
      }
    }
  ]
}

Widget Reference

For a complete list of configuration options for the dtl-fluent-array widget, see the Advanced Widgets Reference.