Container Widgets

🧩 Container Widgets Overview

Container widgets in the tSM Form Designer serve as structural components that help organize and manage complex form layouts. They allow you to group, repeat, or present multiple fields in an intuitive and user-friendly way. These widgets do not represent a single input field – instead, they act as wrappers, that contain and structure other widgets.

Container widgets are essential when building advanced forms where data needs to be logically grouped or dynamically repeated. Depending on the use case, they can display data in sections, expandable panels, repeated lists, or tabular formats.

Available Container Widgets

🔹 Object

Groups multiple related fields into a single logical unit. Often used for nested structures or grouped input sections.

🔹 Array

Enables repeating a defined set of fields multiple times. Each repetition shares the same structure, perfect for lists of similar entries.

🔹 Accordion

A collapsible container that shows or hides its inner fields. Ideal for keeping forms compact and improving readability.

🔹 Accordion Array

Combines repetition with collapsibility. Each repeated item is displayed as its own collapsible accordion panel.

🔹 Table

Displays array data in a grid layout. Supports adding, editing, and deleting rows. Useful for structured data entry where tabular layout is required.

Use these widgets to improve form clarity, enhance user interaction, and handle complex data structures more efficiently.

---

Table

This component is used to generate a table. It is possible to edit the scheme and insert columns, set the default sorting and the number of displayed records.

• Selector: dtl-fluent-editgrid
• Type: Layout Component
• Properties:
  • buttons ({ add: boolean; addText: string; action: boolean; } = { add: true, addText: '', action: true }): Configured in the editor under widget.buttons.
  • fluentFormsInputComponents (QueryList<FluentFormsInputOptions>): Not directly configurable in the editor.
  • pageSize (number = null): Configured under config.pageSize.
  • rowsPerPageOptions (string = null): Configured under config.rowsPerPageOptions.
  • customClass (string): Configured under config.customClass.
  • inherited ( = ): Not directly configured.
  • hidden (boolean): Not directly configured.
  • readonly (boolean): Not directly configured.
  • layoutingType ('runtime' | 'design'): Not directly configured.
  • order (string[] = []): Configured under config.order.
  • numberOfRows ({ value: number; onlyForEmpty: boolean; }): Configured under config.numberOfRows.
  • headers (CellGroupModel[][]): Configured under config.headers.
  • footers (CellGroupModel[][]): Configured under config.footers.

{
  "type": "array",
  "items": {
    "type": "object",
    "properties": {
      "col0": {
        "type": "string",
        "widget": {
          "type": "text",
          "validationMessages": {},
          "notitle": true
        }
      },
      "col1": {
        "type": "string",
        "widget": {
          "type": "text",
          "validationMessages": {},
          "notitle": true
        }
      }
    }
  },
  "config": {
    "numberOfRows": {
      "value": 0,
      "onlyForEmpty": true
    },
    "headers": [
      [
        { "title": "Column0" },
        { "title": "Column1" }
      ]
    ]
  },
  "widget": {
    "type": "dtl-fluent-editgrid",
    "notitle": true
  }
}

---

Object layout

This field type represents an object containing a set of named properties. It is used to collect data that is organized into related groups.
See JSON Schema Object for more details.

• Selector: dtl-fluent-section
• Type: Layout Component
• Properties:
  • cloneKey (string = ""): Default empty string.
  • legend (string = null): Not present in the editor form model.
  • fluentFormsInputComponents (QueryList<FluentFormsInputOptions> = null): Not present in the editor form model.
  • inputBordersShowing (boolean = false): Default value is false.
  • compactMode (boolean = false): Default value is false.

{
  "type": "object",
  "properties": {},
  "widget": {
    "type": "dtl-fluent-section"
  }
}

---

Array

The array field type is used to collect and store a list of values or objects.
See JSON Schema Array for more details.

• Selector: dtl-fluent-fieldset
• Type: Layout Component
• Properties:
  • viewDefer (boolean = false): Determines if the view should be deferred.
  • enableAppendNext (boolean = false): Enables appending additional items.
  • appendStep (number = 1): Number of items to append at once.
  • legend (string = ""): The fieldset legend.
  • buttons ({ add: boolean; addText: string; action: boolean; } = { add: true, addText: '', action: true }): Button configuration.
  • disableLegendForEmpty (boolean = false): Hides legend if the fieldset is empty and read-only.
  • fluentFormsInputComponents (QueryList<FluentFormsInputOptions>): List of input components.
  • numberOfRows ({ value: number; onlyForEmpty: boolean; } = null): Number of rows configuration.

{
  "type": "array",
  "widget": {
    "type": "dtl-fluent-fieldset"
  },
  "items": {},
  "config": {
    "numberOfRows": {
      "value": 0,
      "onlyForEmpty": true
    }
  }
}

---

Accordion array

This field type collects array data with each item wrapped inside an accordion tab.
See JSON Schema Array for more details.

• Selector: dtl-fluent-accordion-array
• Type: Layout Component
• Properties:
  • headerPointer (string = ""): Configured under config.headerPointer.
  • subheaderPointer (string = ""): Configured under config.subheaderPointer.
  • innerFormValidationError (string = ""): Configured under config.innerFormValidationError.
  • lazyValidationMessages (array = []): Configured under config.lazyValidationMessages.
  • buttons (object = { add: true, addText: '', action: true }): Button configuration.
  • fluentFormsInputComponents (QueryList<FluentFormsInputOptions>): For dynamic input components.

{
  "type": "array",
  "widget": {
    "type": "dtl-fluent-accordion-array"
  },
  "items": {},
  "config": {}
}

---