Form Designer

The Form Designer is a graphical, drag-and-drop interface within tSM that allows users to build and configure forms for any entity — such as Tickets, Customers, Orders, or custom modules. It empowers both technical and non-technical users to manage UI layouts without code, while still supporting advanced configurations under the hood.

What You Can Do in the Form Designer

• Visually design the layout of forms using widgets
• Configure widget properties: labels, bindings, validation rules
• Control visibility, styling, and dynamic behaviors
• Connect forms to entities, characteristics, and APIs
• Preview and publish forms within the tSM environment

Getting Started

1. Access the Designer
   Navigate to the Configuration → Form Designer section in tSM.
2. Create or Select a Form
   Choose whether to start from scratch or modify an existing form.
3. Build the Layout
   Use the drag-and-drop toolbox to place widgets into layout containers (columns, cards, sections, etc.).
4. Configure Each Widget
   Define how each field behaves:
   • Bind to a characteristic or property
   • Set default values
   • Add visibility or validation logic (JEXL-enabled)
   • Customize styling (CSS classes)
5. Define the Schema
   Each form is backed by a JSON Schema that describes the data structure and UI layout. This schema is automatically updated but can be manually adjusted for advanced cases.
6. Publish and Test
   Once finalized, publish the form and test it in runtime (with real data, context, and scripts active).

Core Concepts

Concept	Description
Widget	A visual component like Text Field, Select Box, Date Picker, etc.
Layout	How widgets are arranged: columns, tabs, cards, or sections
Binding	Connects a field to a characteristic or entity property
JEXL Expression	Used to define conditional visibility, default values, or validation
JSON Schema	Describes the structure of the form: fields, layout, widgets, config

Layout Example

A typical form might include:

• A section for general info (Name, Type)
• A collapsible card for advanced options
• A multi-column layout for address fields
• A conditional tab that appears only if a field value matches

This is implemented using layout containers like:

{
  "type": "layout",
  "widget": { "type": "dtl-fluent-card" },
  "config": { "header": "Advanced", "collapsible": true },
  "items": ["customField1", "customField2"]
}

Important Notes

• $context variables (e.g., $context.form, $context.entity) do not resolve inside the Form Designer — they are only evaluated at runtime.
• Validation errors, visibility rules, and calculated values based on context must be tested in the real UI or via the JEXL Debug Console.