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