Layout Configuration

Layout configuration in tSM defines how widgets are grouped, arranged, and visually rendered in a form. Layout is expressed in JSON Schema via the layout field and is enhanced with tSM-specific widget and config extensions.

Layouts allow you to go beyond linear field rendering — enabling columns, sections, tabs, cards, nested containers, and conditional logic.

Key Structure

A typical layout block looks like:

{
  "type": "layout",
  "widget": { "type": "dtl-fluent-card" },
  "config": { "header": "Customer Info", "collapsible": true },
  "items": ["customerName", "customerSegment"]
}

Supported Layout Types

Widget Type	Description	Notes
dtl-fluent-section	Simple vertical grouping with a legend	Good for logical separation
dtl-fluent-card	Boxed area with a header	Supports collapsibility
dtl-fluent-columns	Split layout into horizontal columns	Must define config.columns
dtl-fluent-tab	Tabbed views (multi-pane)	Requires config.tabs

Example – Two Columns

{
  "type": "layout",
  "widget": { "type": "dtl-fluent-columns" },
  "config": {
    "columns": [
      { "width": 6, "content": ["firstName"] },
      { "width": 6, "content": ["lastName"] }
    ]
  }
}

• This creates a two-column layout with 50/50 split.
• You can place individual fields or nested layout containers inside columns.

Tabs Layout

{
  "type": "layout",
  "widget": { "type": "dtl-fluent-tab" },
  "config": {
    "tabs": [
      { "label": "Main", "items": ["fieldA", "fieldB"] },
      { "label": "Details", "items": ["fieldC"] }
    ]
  }
}

• Tab headers are defined via config.tabs
• Tabs can include fields or further layouts

Conditional Logic in Layout

You can use JEXL expressions inside layout config for dynamic behavior:

"config": {
  "hidden": "${$context.form.customerSegment != 'B2B'}"
}

• This hides the layout container if the segment is not B2B
• readonly, disabled, and collapsible can also be dynamic

Nesting Layouts

Layouts can contain other layouts:

{
  "type": "layout",
  "widget": { "type": "dtl-fluent-card" },
  "items": [
    {
      "type": "layout",
      "widget": { "type": "dtl-fluent-columns" },
      "config": { ... }
    },
    "notes"
  ]
}

Nested layouts enable powerful combinations — such as cards with columns inside, or tabs containing sections.

Best Practices

• Use dtl-fluent-card for visual grouping and better UX
• Avoid too deep nesting (3+ levels) — may complicate readability
• Use config.collapsible to improve performance on long forms
• Prefer tabs over endless scrolling
• Test dynamic visibility (hidden) in runtime, not just in the designer