Components and 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.
Component Categories
Forms in tSM are composed of two main types of components:
| Type | Purpose | Examples |
|---|---|---|
| Data Components | Capture and persist user input | Text Input, Date Picker, Select Box, Switch |
| Layout Components | 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 Components
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 Components
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 components 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.
Component 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 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.
Summary Table of Component 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 |