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.

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.

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 persisted based on readonly/edit mode:

Mode	Editable	Read-only	Persisted
ReadonlyBased	✅	❌	✅
Always	✅	✅	✅
Never	✅	✅	❌
Computed - always saved	✅	✅	✅
Computed - not saved	✅	✅	❌

Multilingual Support

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

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

Widgets Overview

Widget Categories