Widgets Overview

This page introduces the building blocks used in tSM Form Designer — including Data Components, Layout Components, and tSM Widgets — and how they are configured for visual design, data persistence, and advanced behaviors.

Widget Categories

Forms in tSM are composed of two main types of widgets:

Type	Purpose	Examples
Data Widgets	Capture and persist user input	Text Input, Date Picker, Select Box, Switch
Layout Widgets	Structure and organize UI	Tabs, Cards, Panels, Accordions, Containers

A third category, tSM Widgets, includes specialized components that provide functionality across modules (CRM, DMS, Billing, etc.).

Basic Data Widgets

Commonly used for input collection:

• Text / Long Text
• Numeric fields
• Date & Time Pickers
• Checkboxes / Tri-state
• Switches and Sliders
• Select Boxes (Dropdowns / LOVs)
• File Upload

Layout Widgets

Control the structure and arrangement of other fields:

• Tabs / Accordions: Organize into logical views

• Cards / Panels: Visual blocks for grouping

• Buttons / Links: Trigger actions or navigation

• Static Content: Provide instructions or embedded HTML

These components do not persist data, but can be scripted to respond to form state (e.g. hidden when another field has a specific value).

tSM Widgets

These are advanced widgets integrated with specific modules and use cases. They support:

• Contextual behavior (e.g. adapt to user roles)
• Data binding to entities and relations
• Embedded logic, actions, or listings

Examples:

• Ticket List / Advice List / Ticket History
• DMS: Comments, Attachments, Notifications
• CRM, Audit, Inventory, Change Mgmt, etc.

Widget Configuration

Each component can be customized via the right-side panel in Form Designer. Configuration includes:

Common Properties

• Key: Unique field identifier in JSON Schema (camelCase)

• Title: Field label

• Placeholder / Tooltip

• CSS class / Label CSS: Styling

• Hide Title / Hidden / Read Only / Disabled

• Storage Method: Controls data persistence

• Default Value

  Layout Properties

Use margin, padding, and border (px, rem, %, em) to control box model layout.

Validations

Set required fields, min/max, regex patterns, etc.

Storage Behavior

Storage modes determine whether a field value is included in the submitted payload. Widget visibility does not change persistence automatically: a hidden field can still be submitted unless its storage mode excludes it.

Mode	Editable	Read-only	Persisted
ReadonlyBased	✅	❌	✅
Always	✅	✅	✅
Never	✅	✅	❌
Conditional	Depends on condition	Depends on condition	Only when persistentCondition is true
Computed - always saved	✅	✅	✅
Computed - not saved	✅	✅	❌

Conditional Persistence

Use persistent: "Conditional" when a field should remain in the form state but should only be submitted under a specific condition. Define the condition as a JEXL expression in persistentCondition:

{
  "widget": {
    "type": "text",
    "hidden": "${$value.select != 'a'}",
    "persistent": "Conditional",
    "persistentCondition": "${$value.select == 'a'}"
  }
}

persistentCondition is a final persistence gate:

• true allows the normal changed/default-value persistence rules to apply.
• false or an empty condition omits the field, even when it was edited or has a default value.
• It does not clear the control value and does not need a Form Effect.
• hidden and readonly remain independent presentation/interaction settings.

Multilingual Support

tSM supports multiple languages. Most translatable fields (title, placeholder, tooltip) include language selectors in the editor.

Summary Table of Widget Types

Category	Examples	Purpose
Basic Input	Text, Date, Select, Checkbox	Capture structured input
Layout Elements	Tabs, Cards, Panels, Accordions	Structure form visually
Action Elements	Buttons, Links	Trigger workflow or navigation
Static Content	Help Text, HTML content	Provide instructions or styling
Embedded Widgets	Ticket List, Comments, Attachment, LOV	Display related data, enable complex UIs