Skip to main content

Components configuration

Every component in the tSM Form Designer—whether it is a data component or a layout component—can be configured using the right sidebar. This configuration includes:

  1. Common Properties
    Basic options such as the component’s label (title), placeholder text, tooltips, CSS classes, visibility rules, etc.

  2. Validations and Related Settings
    Rules to ensure data integrity (e.g., required fields, specific formats). You can also manage component behavior such as read-only or disabled states.

  3. Size and Styling
    Height, width, CSS classes, or additional styling details.

  4. Individual Additional Properties
    Some components might have unique settings or special fields that are relevant only to them (for example, a default filter for a dropdown).

  5. Inherited Properties from the Widget Type
    Components in tSM are categorized by “widget type” (e.g., select, list, dialog). Each widget type often comes with its own set of common, specialized properties—these are inherited by all widgets of that type.

  6. Advanced Behaviors
    The Form Designer supports scripting for conditional logic (show/hide components, dynamic validations, etc.) or for more complex interactions.

Common Properties​

  • Key (string): The unique identifier for the field in the form data (also the key in the JSON schema). Changing it affects the data structure. Use camelCase (e.g., firstName, customerId).
  • Title (string): The label that appears beside the field (e.g., "First name").
  • Title Position (string): Position of the label (Left, Up, Right). A special option “Label position by form type” automatically uses “Up” for dialog forms and “Left” for detail forms.
  • Placeholder Text (string): A hint to guide users about what to input.
  • Tooltip (string): Additional information displayed on hover.
  • Optional CSS Class (string): CSS class for styling the component (e.g., text-2xl, bg-red-500, flex, w-full, gap-2, p-4).
  • Optional CSS Label Class (string): CSS classes to style the label (e.g., text-2xl, font-bold, text-red-200).
  • Hide Title (boolean = false): Hides the label but keeps the component visible.
  • Hidden (boolean = false): Makes the field invisible while retaining it in the form.
  • Read Only (boolean = false): Makes the input non-editable while still displaying its value.
  • Disabled (boolean = false): Disables interaction (the value is visible but grayed out).
  • Storage (string = "ReadonlyBased"): Controls how data is persisted (options: ReadonlyBased, Always, Never).
  • Default Value (any = null): Pre-fills the component when the form loads.

Other Configurable Options​

Components can also include validations (e.g., required, min/max length, regex patterns), conditional logic (to show/hide based on other fields), and explicit height/width or additional styling via CSS classes. Some components expose unique, module-specific properties not listed here.

Component Types​

Components are inherited from a specific type. Below is an ordered list (by order value) of the primary types, each with a brief description, their additional properties, and example widgets.

1. List​

A standard tSM listing (table) with features like filtering and profiles.

Icon:

Additional Properties: None.

Example Widgets: tsm-ticket-list-widget (Ticket List), tsm-customer-list-widget (Customer List), tsm-user-stock-items (Stock Item List).

2. Bookmark​

A simple table with limited functionalities and a fixed set of columns.

Icon:

Additional Properties: None.

Example Widgets: tsm-relationship-tab (Relationship Bookmark), tsm-orders-bookmark (Orders Bookmark), dtl-comments-widget (Comments Bookmark).

3. Audit List (History)​

An expandable list used to display the history of an entity (often labeled "History").

Icon:

Additional Properties:

  • ownerId (string): Identifies the owner of the history using its ID (typically a UUID).
  • ownerType (string): Specifies the type of the owner, e.g. Ticket, Customer, or Lead.
  • compact (boolean = false): Displays the history in a condensed format if true.

Example Widgets: tsm-ticket-history (Ticket History), tsm-customer-history (Customer History), tsm-lead-history (Lead History).

4. Select​

A dropdown for selecting values from a list (often referred to as a "Lov").

Icon:

Additional Properties:

  • selectProperty ('id' | 'code' = 'id'): Defines which property is stored for the selection value. Use code only if it is unique and stable across environments.
  • displayField (string = "name"): Field to display in the UI.
  • multiselect (boolean = false): Enables multi-selection if true.
  • selectionMode ('single' | 'multiple' = 'multiple'): Sets the selection mode to multiple items. The resulting type of this widget is then a single string or an array of strings.
  • returnType ('string' | 'array' = 'string'): Determines the return type of the selection. This should match the type of selection mode.
  • selectFirstValue (boolean = false): Automatically selects the first value if true.
  • showClear (boolean = true): Displays a clear button.
  • showNoneText (boolean = true): Shows "none" text when no selection is made.
  • style (object = {width: '100%'}): Inline styles for the component.
  • defaultFilters (FilterModel[] = []): Default filters applied to the list.
  • placeholder (string): Placeholder text for the dropdown.
  • localizationData (LocalizationVersionData): Data for localization.
  • keyboardOnMobile (boolean = true): Enables the keyboard on mobile devices.

Example Widgets: tsm-user-lov (User Select), tsm-customer-lov (Customer Select), tsm-ticket-category-lov (Ticket Category Select).

5. Table​

A classic or pivot table used in reporting.

Icon:

Additional Properties:

  • height (string = "100%"): Height of the table container.
  • width (string): Width of the table container.
  • showFilter (boolean = false): Displays a filter bar if true.
  • configuration (PivotReportingConfiguration): Pivot reporting configuration.
  • tqlScript (string): TQL script for data retrieval.
  • scriptCode (string): Script code for external configuration.
  • externalFilters (FilterModel[] = []): Externally applied filters.
  • labelTotalCountRow (string = "translation.reporting.components.totalCountRow"): Label for the total count row.
  • showTotalCountRow (boolean = true): Toggles the total count row.
  • labelTotalCountColumn (string = "translation.reporting.components.totalCountColumn"): Label for the total count column.
  • showTotalCountColumn (boolean = true): Toggles the total count column.
  • showLineNumber (boolean = false): Displays line numbers if true.

Example Widget: tsm-pivot-reporting-widget (Report Table).

6. Status Bar​

A component that displays (and may allow changing) an entity’s current status or step.

Icon:

Additional Properties:

  • readonly (boolean = false): If true, the status cannot be modified.

Example Widgets: tsm-order-steps (Order Status Bar), tsm-person-steps (Person Status Bar), tsm-customer-steps (Customer Status Bar).

7. Card​

Displays specific data in a card format, often embedded in another container.

Icon:

Additional Properties: None.

Example Widgets: tsm-task-details (Task Details Card), tsm-price-list-detail (Price Card).

8. Panel​

Similar to a card but typically represents a larger or standalone section (e.g., Calendar Panel).

Icon:

Additional Properties: None.

Example Widgets: tsm-communication-widget (Email Communication Panel), tsm-full-calendar (Full Calendar Panel), tsm-calendar (Calendar Panel).

9. Button​

A clickable element that triggers actions such as form submission or navigation.

Icon:

Additional Properties: None.

Example Widgets: tsm-calendar-create-button (New Calendar Button), tsm-entity-instance-create-dependent (New Dependent Instance Button).

10. Window (Dialog)​

A widget displayed as a modal or dialog window, typically used for creating or editing records.

Icon:

Additional Properties:

  • relationshipParentId (string = null): Sets the parent ID for relationships.
  • excludeIds (string = null): IDs to be excluded from certain operations.
  • defaultValues (EntityInstanceConfiguration = null): Default configuration values for the instance.
  • redirectToDetail (boolean = true): Redirects to the detail view after an operation.
  • defaultType (EntityInstanceType = null): Sets the default type of the entity, triggering module loading.
  • listingId (string = null): Associates the dialog with a specific listing.
  • enforceCustomerLovEdit (boolean = false): Enforces customer LOV edit if true.

Example Widget: tsm-entity-instance-new-container (New Instance Conf. Dialog).

A specialized component for search functions (e.g., address search).

Icon:

Additional Properties:

  • showNone (boolean = true): Offers a "none" option.
  • editType ('all' | 'externalAddressRequired' | 'externalAddressOptional' = 'externalAddressRequired'): Defines how external data is handled.
  • placeholder (string): Placeholder text.
  • localizationData (LocalizationVersionData): Localization data for text and placeholders.

Example Widget: tsm-address-input (Address Search).

12. Chart​

A graphical representation of data, typically used for reporting.

Icon:

Additional Properties:

  • buttonsPosition (string = "top"): Position of chart buttons (top, left, right, bottom).
  • configuration (PivotReportingConfiguration = null): Pivot reporting configuration.
  • tqlScript (string = null): TQL script for data fetching.
  • chartConfiguration (ChartReportingConfiguration = null): Configuration for chart settings (axes, labels).
  • scriptCode (string = null): Script code for external configuration.
  • externalFilters (FilterModel[] = []): Externally applied filters.
  • showFilter (boolean = false): Displays filter options if true.
  • height (string = "350px"): Height of the chart.

Example Widget: tsm-chart-reporting-widget (Report Chart).

13. Input​

A general input field for text, numbers, IP addresses, etc.

Icon:

Additional Properties:

  • placeholder (string): Inherited placeholder text.
  • localizationData (LocalizationVersionData): Localization support.

Example Widget: tsm-ip-address (IP Address Input).

Conclusion​

When configuring a component in tSM Form Designer, combine the common properties with any additional properties inherited from its type. For example, a "tsm-customer-lov" (Select type) supports the standard common properties plus select-specific options like showClear and multiselect, along with module-specific configurations. This layered approach enables flexible and consistent form design across the tSM platform.