Basic Components Widgets
Checkbox dtl-form-input-checkbox
The checkbox is a type of input field that allows users to select only checked or unchecked values. Checkboxes is represented as small square that can be checked or unchecked by clicking on them. Checkbox is associated with a label that describes the option it represents. The use of checkboxes helps to simplify the process of collecting information by presenting the user with a clear list of options to choose from, while also allowing for flexible and multi-faceted data collection.
Widget Or Layout: unknown
Value:
{
"type": "boolean",
"title": "Checkbox",
"widget": {
"type": "checkbox"
}
}
Link dtl-form-input-link
The link field is an input field in a form that allows users to enter a hyperlink, such as a URL or email address. The field is represented by a text box, into which the user can type or paste a link. The use of a link field is particularly useful for collecting information about online resources, such as websites, online profiles, or articles.
Widget Or Layout: unknown
Value:
{
"type": "string",
"title": "Link",
"widget": {
"type": "link"
}
}
Inputs
Default value
Key: default
Name: Default value
Custom link name
Key: customTitle
Name: Custom link name
External link
Key: target
Name: External link
Description: Opens external link in a new tab
Disable the link
Key: noHref
Name: Disable the link
Description: Tick the checkbox if you wish to disable this link.
Text Item dtl-form-input-text
The basic component for general text input. Optionally you can configure validations, masks and visual behaviour. The validation ensures that the data entered meets certain criteria, such as being a certain length or having a specific format. The mask is used to format the text as it's being entered, such as adding dashes to a phone number or hyphens to a credit card number. This helps to improve the user experience by providing clear expectations for the type of data that should be entered and ensuring that the data is entered in a consistent format.
Widget Or Layout: unknown
Value:
{
"type": "string",
"title": "Text",
"widget": {
"type": "text"
}
}
Inputs
Default value
Key: default
Name: Default value
Disable wrapping
Key: overflowValueHidden
Name: Disable wrapping
Description: 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.
Long text dtl-form-input-textarea
The text area is a multi-line text input field in a form that is used to collect large amounts of text data from the user. Unlike a regular text field, a text area can accommodate multiple lines of text, making it well-suited for collecting longer pieces of information such as descriptions, comments, or feedback. The use of a text area helps to make it easy for users to enter and read large amounts of text data, while also providing a way to ensure that the data collected is accurate and consistent. If you want the user to enter Rich text (such as title, colors, font size, font weight etc., use Rich Text
Widget Or Layout: unknown
Value:
{
"type": "string",
"title": "Textarea",
"widget": {
"type": "textarea"
}
}
Inputs
Height (px)
Key: widgetHeight
Name: Height (px)
Description: The height in pixels.
Default value
Key: default
Name: Default value
Mask Field dtl-form-input-mask
The mask field is an input field that uses a predefined format or pattern to guide users in entering data. The format can include symbols or placeholders to indicate the required format, such as a date, phone number, or credit card number. The field automatically applies the formatting as users enter the data, making it easier to enter accurate and consistent data. This helps to reduce errors and improve the quality of the data collected in the form.
Widget Or Layout: unknown
Value:
{
"type": "string",
"title": "Mask",
"widget": {
"type": "mask"
}
}
Inputs
Default value
Key: default
Name: Default value
Mask
Key: mask
Name: Mask
Description: maskTooltip
Placeholder
Key: maskPlaceholder
Name: Placeholder
Tri state checkbox dtl-form-input-tri-state-checkbox
A tri-state checkbox is a GUI element with three possible states: checked, unchecked, and indeterminate. The indeterminate state is used when the checkbox's status depends on its child checkboxes or specific criteria. It's commonly employed in hierarchical data or groups of related checkboxes. The behavior of a tri-state checkbox can be customized by developers to suit their application's needs.
Widget Or Layout: unknown
Value:
{
"type": "boolean",
"title": "Tri state checkbox",
"widget": {
"type": "triStateCheckbox"
}
}
Editor dtl-form-input-tiptap
The rich text field, also known as a WYSIWYG (What You See Is What You Get) editor, is a type of text input field in a form that allows users to enter and format text with various styles, such as bold, italic, and underline. This type of text field is well-suited for collecting information that requires visual formatting, such as descriptions or comments. Rich text fields can also include validation to ensure that the entered data meets specific criteria, such as having a minimum or maximum length. The use of a rich text field helps to improve the user experience by allowing users to create visually appealing and well-formatted text, while also providing a way to ensure that the data collected is accurate and consistent.
Widget Or Layout: unknown
Value:
{
"type": "string",
"title": "Textarea",
"widget": {
"type": "tiptap"
}
}
Inputs
Default value
Key: default
Name: Default value
Owner Id
Key: ownerId
Name: Owner Id
Owner type
Key: ownerType
Name: Owner type
Description: Owner type
Hide iframe in menu
Key: hideMenuItemIframe
Name: Hide iframe in menu
Hide diagram in menu
Key: hideMenuItemDiagram
Name: Hide diagram in menu
Hide image in menu
Key: hideMenuItemImage
Name: Hide image in menu
Hide attachments in menu
Key: hideMenuItemAttachments
Name: Hide attachments in menu
Hide code block insert in menu
Key: hideMenuItemInsertCode
Name: Hide code block insert in menu
Hide source code insert in menu
Key: hideMenuItemSourceCode
Name: Hide source code insert in menu
Hash suggestions
Key: hashtagOption
Name: Hash suggestions
Description: Hash suggestions
Password dtl-form-input-password
The password field is an input field in a form that is used to collect sensitive information, such as a password or passphrase. The field is represented by a text box, but the characters entered into the field are obscured and replaced with asterisks or other symbols to protect the confidentiality of the information. Password field also includes additional security features, such as password strength meter.
Widget Or Layout: unknown
Value:
{
"type": "string",
"title": "Password",
"widget": {
"type": "password"
}
}
Inputs
Default value
Key: default
Name: Default value
Disable wrapping
Key: overflowValueHidden
Name: Disable wrapping
Description: 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.
Switch dtl-form-input-switch
The switch is a type of input field in a form that allows users to toggle between two states, such as on/off, yes/no, or true/false. Switch is represented as a small rectangular toggle that can be moved left or right to change its state. It is often used as a more compact alternative to checkboxes for binary decisions, and can also be used in place of radio buttons for single-choice selection. The use of switches helps to simplify the user interface by providing a clear and intuitive way to make binary selections, while also allowing for more compact and aesthetically pleasing forms.
Widget Or Layout: unknown
Value:
{
"type": "boolean",
"title": "Switch",
"widget": {
"type": "switch"
}
}
Inputs
Left label
Key: leftLabel
Name: Left label
Description: The label, which will be located to the left of the component
Right label
Key: rightLabel
Name: Right label
Description: The label, which will be located to the right of the component
Autocomplete tsm-autocomplete
The autocomplete field, also known as the "autocomplete" feature, is an interactive input element in a form that provides users with instant suggestions to complete their entries based on previous inputs or a predefined set of options. As soon as the user starts typing in the field, the system dynamically generates and displays a list of relevant suggestions, from which the user can choose, allowing them to quickly and efficiently complete their entry without the need to type out the entire text.
Widget Or Layout: unknown
Value:
{
"type": "string",
"title": "Autocomplete",
"oneOf": [
{
"title": "null",
"const": "null"
}
],
"widget": {
"type": "tsm-autocomplete"
}
}
Inputs
Default value
Key: default
Name: Default value
Show clear
Key: showClear
Name: Show clear
Description: Sets the visibility of the delete button for clearing text in the filtering input
Force selection
Key: forceSelection
Name: Force selection
Description: The forceSelection option in Autocomplete ensures that users can only select a value from the predefined options in the dropdown list. This prevents the user from entering any custom or arbitrary text that is not part of the list of suggestions.
Numeric field dtl-form-input-number
The numeric field is an input field in a form that is used to collect numerical data from the user. The field is typically formatted to only accept numbers and can be further customized to restrict the type of numbers that are accepted. For example, the field could be set up to only accept positive numbers, whole numbers, or numbers within a certain range. Validation can also be applied to the numeric field to ensure that the entered data meets specific criteria, such as being within a certain range or having a specific number of decimal places. The use of a numeric field helps to ensure that the data collected is accurate and consistent, and also makes it easier to process the data in downstream applications.
Widget Or Layout: unknown
Value:
{
"type": "number",
"title": "Number",
"widget": {
"type": "number"
}
}
Inputs
Fraction digits
Key: fractionDigits
Name: Fraction digits
Description: The number of decimal places that this component will contain. If you wish to allow only whole numbers, leave the value at 0
Step
Key: step
Name: Step
Description: How much the value should increase/decrease when the arrow is clicked. If the value is set to 0, then the value will be incremented/decremented based on "Number of decimal places".
Mode
Key: mode
Name: Mode
Description: Mode (decimal or currency)
Show buttons for steps
Key: showButtons
Name: Show buttons for steps
Default value
Key: default
Name: Default value
Rating dtl-form-input-rating
The rating field is an input field in a form that allows users to rate or score something along a numerical scale. The field represented by a row of stars, each of which can be clicked or selected to indicate a specific rating. Rating fields can be used to collect customer feedback, product reviews, or other forms of evaluation. They can also be used to collect information about personal preferences, such as movie ratings or book reviews. The use of a rating field helps to simplify the process of collecting numerical data by providing a clear and intuitive way to make selections, while also allowing for flexible and multi-faceted data collection.
Widget Or Layout: unknown
Value:
{
"type": "number",
"title": "Rating",
"widget": {
"type": "rating"
}
}
Inputs
Default value
Key: default
Name: Default value
Select dtl-select
The select field, also known as a drop-down menu, is an input field in a form that allows users to select an option from a list of pre-defined options. The field is typically represented by a drop-down list, from which the user can select a single option. The use of a select field helps to simplify the process of collecting data, by providing a clear and concise way for users to make selections. The field can also help to ensure the accuracy and consistency of the data collected, by limiting the available options to a predefined set of values. Select fields can be used to collect a wide range of information, such as geographical locations, job titles, product categories, or any other information that can be represented by a set of predefined options. If you need selecting from TSM based data, use an appropriate component such as "Register value", "Customer segment" or "Account.
Widget Or Layout: unknown
Value:
{
"type": "string",
"title": "Select",
"oneOf": [
{
"title": "null",
"const": "null"
}
],
"widget": {
"type": "select"
}
}
Inputs
Default value
Key: default
Name: Default value
Select type
Key: selectType
Name: Select type
Type
Key: type
Name: Type
Date & Time dtl-form-input-date
The date time field is an input field in a form that is used to collect date and time information from the user. Use configuration to select if the user should input Date and / Or Time parts. The field presents the user with a calendar-style interface, making it easy to select a specific date and time. Date fields may include validation to ensure that the entered data meets specific criteria, such as being within a certain range or being a valid date format.
Widget Or Layout: unknown
Value:
{
"type": "string",
"title": "Date",
"widget": {
"type": "date"
}
}
Inputs
Default value
Key: default
Name: Default value
Show icon
Key: showIcon
Name: Show icon
Description: If enabled, the icon will be displayed.
Show delete value icon
Key: showCloseIcon
Name: Show delete value icon
Description: If enabled, the delete value icon(X) will be displayed.
View Time
Key: showTime
Name: View Time
Description: If enabled the time will be also displayed.
Show seconds
Key: showSeconds
Name: Show seconds
Description: If enabled the seconds will be also displayed.
Show milliseconds
Key: showMilliseconds
Name: Show milliseconds
Description: If enabled, the milliseconds will be displayed.
Time only
Key: timeOnly
Name: Time only
Description: If enabled, the date will not be displayed.
Month and year
Key: monthYear
Name: Month and year
Description: If enabled, the month and year be displayed.
Round end date
Key: roundEndDate
Name: Round end date
Description: If "time display" is not checked, the selected date is always rounded to the end of the day.
Show pick datetime button
Key: showPickDateTimeButton
Name: Show pick datetime button
Description: Show pick datetime button
Min date
Key: minDate
Name: Min date
Max date
Key: maxDate
Name: Max date
Chip css class
Key: chipClass
Name: Chip css class
Description: CSS class for the dates difference
Countdown time from
Key: countdownTimeFrom
Name: Countdown time from
Description: Displayes difference between two dates. (For example: "16.03.2023 (7d 5h 3min)")
Icon picker tsm-form-input-icon-picker
The icon picker is an input field on a form that is used to select an icon displayed next to the form input field. The icon will be placed on the left or right side of the form field.
Widget Or Layout: unknown
Value:
{
"type": "string",
"title": "Icon",
"widget": {
"type": "tsm-form-input-icon-picker"
}
}
Inputs
Default value
Key: default
Name: Default value