Skip to main content

Basic components

The Basic Components section in the tSM Form Designer provides a variety of form elements that can be used to collect user input, display data, or interact with the form. These components are foundational to any form-building process and can be easily configured to suit specific needs.

Text Item​

The Text Item (textbox) is a versatile form component designed for capturing user input, particularly single-line text fields, with extensive customization options.

Advanced Settings:

  • Overflow Value Hidden: This option allows developers to hide any overflow text that exceeds the visible area of the input field. This can be useful in scenarios where users may input long strings, and only the visible portion is needed for display.
  • Icons (Left/Right): Adds an icon to the left or right side of the input field, enhancing the visual representation of the field. This is particularly useful for indicating specific actions or states, such as search or user input.
  • Disable wrapping: If the content of the value does not fit into the free space of the form, it will be shortened. The entire value will be displayed as a tooltip.

Text Area​

The Textarea (textarea) is a versatile form component designed for capturing multi-line text input from users. This component is ideal for scenarios where users need to input longer text, such as comments, descriptions, or detailed information.

Advanced Settings:

  • Height (Px): This setting allows developers to define the height of the textarea in pixels, providing control over how much space the textarea occupies on the form. It is useful in scenarios where space management is important or where a larger input area is needed for user convenience.

Rich Text Editor​

The Rich Text Editor (richtext) is a robust form component designed for capturing formatted text input from users. This component supports advanced text formatting options, allowing users to input rich, styled text such as headings, lists, bold, italic, links, and more. It's ideal for use in scenarios where detailed content needs to be entered, such as descriptions, comments, or long-form content with multiple formatting options.

Advanced Settings:

  • Owner ID: The ownerId setting allows developers to associate the rich text field with a specific entity in the system. This is required for advanced image manipulation, where images are created as attachments of the owner entity.
  • Owner Type: The ownerType setting specifies the type of entity that the rich text field is associated with. This is used in conjunction with the ownerId setting to determine the context of the rich text field.

Numberic Field​

The Numberic Field is a flexible component designed for numerical inputs in forms. It supports a wide range of configurations, making it suitable for scenarios like setting thresholds, defining ranges, or capturing precise measurements.

Advanced Settings:​

  • min and max: Define the minimum and maximum values for input.
  • step: Increment or decrement value by a specified step. Default is 1.
  • fractionDigits: Controls the number of decimal places allowed in the input (e.g., 2 for two decimal points).
  • mode: Determines the format of the number:
    • decimal for standard numeric input.
    • currency for monetary values with currency symbols.
  • currency: Specify the currency code (e.g., USD, EUR) for currency mode.
  • localeFormatting:
    • Enables or disables locale-based formatting (e.g., grouping separators like commas or dots).
    • Default is enabled.
  • showButtons: Displays spinner buttons for incrementing or decrementing values.
  • buttonLayout: Configures the layout of spinner buttons:
    • stacked (default), horizontal, or vertical.
  • prefix and suffix: Add text before or after the input value, such as units or labels (e.g., $, %).
  • placeholder: Displays a hint inside the input field when no value is entered.
  • showClear: Includes a clear icon to reset the input value.

Date Widget​

The Date Widget is a versatile component designed to handle date and time inputs in forms. It offers extensive customization to support a variety of use cases, such as scheduling events, setting deadlines, or logging timestamps.

Advanced Settings:

  • minDate and maxDate: define the minimum and maximum selectable dates. Both can be configured with specific values or dynamically calculated through scripts.
  • showTime and timeOnly:
    • Control whether the time picker is enabled.
    • If timeOnly is true, the widget shows only the time input without a calendar.
  • showIcon: display a calendar icon beside the input field for better user interaction.
  • showCloseIcon: adds an 'X' button to clear the selected date.
  • showSeconds and showMilliseconds: include seconds or milliseconds in time selection.
  • roundEndDate: automatically adjusts end dates to align with time rounding logic, if applicable.
  • yearRange: configurable range for the year dropdown (e.g., "1900:2050").
  • pickDateTimeButton: optional button to explicitly confirm the selected date and time. Customize the button text via pickDateTimeButtonLabel.
  • Date and Time Format: support for flexible date formats through dateFormat (default is dd.mm.yy).

Checkbox​

The Checkbox Widget is a basic yet powerful component used to capture binary input (true/false) in forms. It is suitable for enabling/disabling options or capturing user preferences.

Switch Widget​

The Switch Widget is a toggle component used for binary states, such as enabling or disabling settings or toggling options in a form. It provides a user-friendly interface for making quick decisions.

Advanced Settings:​

  • leftLabel and rightLabel:
    • Optional labels for the left and right states of the switch. These provide additional context for the toggle states.