Advanced Widgets
Text to display tsm-display-text
Any text to display
Widget Or Layout: layout
Value:
{
"type": "layout",
"widget": {
"type": "tsm-display-text"
},
"config": {
"text": "Text"
}
}
Inputs
Text
Key: text
Name: Text
Format text
Key: formatText
Name: Format text
Description: Translates special characters commonly used in plain text (such as \n for new lines and \r for carriage returns) into their equivalent HTML tags (like <br> for line breaks). This functionality ensures that text formatted with newline characters is correctly rendered in a web environment by converting these characters into HTML-compliant output
Button dtl-button
The button element is an interactive UI component that is used to trigger an action, such as submitting a form or initiating a specific task. In tSM there are several button types with extensive configuration capability. They can also be styled and labeled.
Widget Or Layout: layout
Value:
{
"type": "layout",
"title": "Button",
"widget": {
"type": "dtl-button"
}
}
Inputs
Button Appearance
Key: buttonAppearance
Name: Button Appearance
Description: Appearance defines the type of graphical design of the button.
Button Severity
Key: buttonSeverity
Name: Button Severity
Description: Severity defines the button's color design.
Additional CSS class
Key: customCssClass
Name: Additional CSS class
Description: You can use an additional CSS class to customize the appearance of the component. Examples: text-2xl bg-red-500 flex w-full gap-2 flex-column p-4
Optional icon
Key: customIconCssClass
Name: Optional icon
Description: This is the full icon class string to show the icon. Example: p-icon-check
Button type
Key: buttonType
Name: Button type
Description: It determines the style and behavior of the button and options you can set below.
Always enabled
Key: alwaysEnabled
Name: Always enabled
Description: Button will be always enabled regardless of readonly status
Clipboard button dtl-clipboard-button
Button for copying the selected value to the clipboard.
Widget Or Layout: layout
Value:
{
"type": "layout",
"title": "null",
"widget": {
"type": "dtl-clipboard-button"
}
}
Inputs
Button Appearance
Key: buttonAppearance
Name: Button Appearance
Description: Appearance defines the type of graphical design of the button.
Button Severity
Key: buttonSeverity
Name: Button Severity
Description: Severity defines the button's color design.
Additional CSS class
Key: customCssClass
Name: Additional CSS class
Description: You can use an additional CSS class to customize the appearance of the component. Examples: text-2xl bg-red-500 flex w-full gap-2 flex-column p-4
Optional icon
Key: customIconCssClass
Name: Optional icon
Description: This is the full icon class string to show the icon. Example: p-icon-check
The value to save to the clipboard
Key: value
Name: The value to save to the clipboard
File upload dtl-file-upload-widget
The component allows you to upload a file to an entity.
Widget Or Layout: widget
Value:
{
"type": "object",
"widget": {
"type": "dtl-file-upload-widget"
},
"config": {
"attachmentTypeAllowEmpty": true,
"allowDefaultDialog": true,
"canDownloadFile": true,
"acceptDocumentTypes": "*",
"maxFileSize": 5120
}
}
Inputs
Owner type
Key: ownerType
Name: Owner type
Owner Id
Key: ownerId
Name: Owner Id
Always save attachments to form
Key: alwaysSaveToChars
Name: Always save attachments to form
Description: When ownerId and ownerType are filled in, the attachments are saved both to the file system and to the characteristics (only metadata).
Try default value
Key: tryDefaultValue
Name: Try default value
Description: If the default value is set, it is automatically filled in the form.
Allow to show default dialog
Key: allowDefaultDialog
Name: Allow to show default dialog
Description: allowDefaultDialogTooltip
Allow empty attachment type
Key: attachmentTypeAllowEmpty
Name: Allow empty attachment type
Description: If the attachment type is not selected, the attachment will be saved without a type.
Set and hide attachment type
Key: setAndHideAttachmentType
Name: Set and hide attachment type
Description: Checking this option makes sense, for example, when only one type of attachment is allowed, an empty attachment type is not allowed, and we want to fill in a description or a form for the attachment. (the attachment type selection component pre-populates the dialog with the selected type and hides)
Hide description
Key: hideDescription
Name: Hide description
Description: Checking this option hides the description field in the attachment form.
Allowed attachment types
Key: attachmentTypeCodes
Name: Allowed attachment types
Description: List of codes of allowed attachment types under which the attachment can be saved (format: ["codetype1", "codetype2"])
Allowed attachment file types
Key: acceptDocumentTypes
Name: Allowed attachment file types
Description: acceptDocumentTypesTooltip
Multiple files
Key: multiple
Name: Multiple files
Description: Allowed to upload multiple files
Allow download file
Key: canDownloadFile
Name: Allow download file
Description: Display the icon for downloading the file
Hidden button delete attachment
Key: hiddenDeleteAttachment
Name: Hidden button delete attachment
Description: Hidden button delete attachment
Show button for gallery
Key: enableGalleria
Name: Show button for gallery
Description: Show button for gallery
Hidden size unit
Key: hiddenSizeUnit
Name: Hidden size unit
Description: Hidden size unit won´t be visible anymore
Hidden when inserted
Key: hiddenWhenInserted
Name: Hidden when inserted
Description: Hidden when inserted won´t be visible anymore
Hidden who inserted
Key: hiddenWhoInserted
Name: Hidden who inserted
Description: Hidden who inserted won´t be visible anymore
Hidden attachment type name
Key: hiddenAttachmentTypeName
Name: Hidden attachment type name
Description: Hidden attachment type name won´t be visible anymore
Detail button always available
Key: forceEnableDetail
Name: Detail button always available
Max file size(kB)
Key: maxFileSize
Name: Max file size(kB)
Description: Max file size(kB)
Gallery tsm-gallery
The gallery allows you to upload and display graphic files, it is also possible to change the display theme.
Widget Or Layout: layout
Value:
{
"type": "layout",
"widget": {
"type": "tsm-gallery"
}
}
Inputs
Gallery theme
Key: theme
Name: Gallery theme
Owner type
Key: ownerType
Name: Owner type
Owner Id
Key: ownerId
Name: Owner Id
Allowed attachment types
Key: attachmentTypeCode
Name: Allowed attachment types
Fullscreen on click image
Key: fullscreenClickImage
Name: Fullscreen on click image
Compress image (approx 2MB)
Key: compressImage
Name: Compress image (approx 2MB)
Height
Key: height
Name: Height
Allows you to save multiple images
Key: multiple
Name: Allows you to save multiple images
Description: After unchecking this option, only one image can be saved to the gallery.
Table dtl-fluent-editgrid
This component is used to generate a table. It is possible to edit the scheme and insert columns, set the default sorting and set the default number of displayed records.
Widget Or Layout: widget
Value:
{
"type": "array",
"items": {
"type": "object",
"properties": {
"col0": {
"type": "string",
"widget": {
"type": "text",
"validationMessages": {},
"notitle": true
}
},
"col1": {
"type": "string",
"widget": {
"type": "text",
"validationMessages": {},
"notitle": true
}
}
}
},
"config": {
"numberOfRows": {
"value": 0,
"onlyForEmpty": true
},
"headers": []
},
"widget": {
"type": "dtl-fluent-editgrid",
"notitle": true
}
}
Inputs
Default value
Key: default
Name: Default value
Custom class
Key: customClass
Name: Custom class
Page size
Key: pageSize
Name: Page size
Default number of rows
Key: numberOfRows
Name: Default number of rows
Description: "value": displayed number of rows
"onlyForEmpty" = true: displayed set number of rows only if no data is stored in the table
"onlyForEmpty" = false: always displayed set number of rows (even if, for example, more are stored in the data)
Note: if the "onlyForEmpty" parameter is not set, the behavior corresponds to the "onlyForEmpty" = false setting
Rows per page options
Key: rowsPerPageOptions
Name: Rows per page options
Order
Key: order
Name: Order
Inner form dtl-fluent-inner-form
A component that allows you to insert another form that becomes part of the content of this form.
Widget Or Layout: widget
Value:
{
"type": "object",
"title": "Form",
"widget": {
"type": "dtl-fluent-inner-form"
}
}
Inputs
Form code
Key: formCode
Name: Form code
Form context
Key: context
Name: Form context
Disable show errors in inner form
Key: innerFormShowDisableErrors
Name: Disable show errors in inner form
Submit button dtl-submit-button
The submit button is an interactive user interface component used to trigger a form submission event. The button contains the form value that can be accessed by other components. After pressing the button, the specified value is stored in the button's state, which can be accessed through an expression ($value.requestButton).
Widget Or Layout: widget
Value:
{
"type": "object",
"title": "Submit button",
"widget": {
"type": "dtl-submit-button"
}
}
Inputs
Button Appearance
Key: buttonAppearance
Name: Button Appearance
Description: Appearance defines the type of graphical design of the button.
Button Severity
Key: buttonSeverity
Name: Button Severity
Description: Severity defines the button's color design.
Additional CSS class
Key: customCssClass
Name: Additional CSS class
Description: You can use an additional CSS class to customize the appearance of the component. Examples: text-2xl bg-red-500 flex w-full gap-2 flex-column p-4
Optional icon
Key: customIconCssClass
Name: Optional icon
Description: This is the full icon class string to show the icon. Example: p-icon-check
Value
Key: valuesToSet
Name: Value
Validation expression
Key: validationExpression
Name: Validation expression
Validation message
Key: validationMessage
Name: Validation message
Description: Custom error message for this validation.
Always enabled
Key: alwaysEnabled
Name: Always enabled
Description: Button will be always enabled regardless of readonly status
User register tsm-register-value-lov
The component allows selection from an enum, it is possible to filter using an input for a more convenient selection of the desired value.The enum can be selected in the settings.
Widget Or Layout: widget
Value:
{
"type": "string",
"title": "Code List",
"widget": {
"type": "tsm-register-value-lov"
}
}
Inputs
Keyboard on mobile
Key: keyboardOnMobile
Name: Keyboard on mobile
Description: Sets readonly attribute for filtering input
Show clear
Key: showClear
Name: Show clear
Description: Sets the visibility of the delete button for clearing text in the filtering input
Empty
Key: resultEmptyType
Name: Empty
Description: If the filtering attribute is filled in and the filtering value has no length simultaneously, it will overwrite the filtering value in the default filter to ['00000000-0000-0000-0000-000000000000'] for array type or '00000000-0000-0000-0000-000000000000' for string type.
Show none text
Key: showNoneText
Name: Show none text
Hide code
Key: hideCode
Name: Hide code
Default tree view mode
Key: defaultTreeViewMode
Name: Default tree view mode
Selection using a listing (one or more values)
Key: multiselect
Name: Selection using a listing (one or more values)
Disable link
Key: disableLink
Name: Disable link
Display
Key: displayField
Name: Display
Description: It is possible to add multiple values using autocomplete or with source code ["key", "name"]
User register
Key: registerCode
Name: User register
Value
Key: selectProperty
Name: Value
Select item filters
Key: selectItemFilters
Name: Select item filters
Description: This is a filter that checks whether the selected value should be allowed to be selected. If the filter is empty, all values can be selected.
Custom message for invalid item selection
Key: messageFromInvalidSelectItem
Name: Custom message for invalid item selection
Description: This message will be displayed if the user selects an item that does not meet the conditions specified in the "Select item filters" attribute.
Page size
Key: pageSize
Name: Page size
Description: The number of records that the component will offer after clicking. The supported range is 20 to 500 records.
Default value
Key: default
Name: Default value
Generate protocol tsm-generate-protocol
The component allows you to generate protocol by layout.
Widget Or Layout: widget
Value:
{
"type": "object",
"title": "Generate protocol",
"widget": {
"type": "tsm-generate-protocol",
"persistent": "Never",
"notitle": true
},
"config": {
"canDownloadFile": true,
"hiddenWhenInserted": false,
"hiddenWhoInserted": false,
"hiddenAttachmentTypeName": false,
"hiddenDeleteAttachment": false,
"hiddenSizeUnit": false,
"enableShowProtocol": true,
"forceEnableDetail": false,
"firstShowThenGenerate": true,
"formData": "${$value}"
}
}
Inputs
Owner type
Key: ownerType
Name: Owner type
Owner Id
Key: ownerId
Name: Owner Id
Attachment Type
Key: attachmentType
Name: Attachment Type
Description: The attachment type under which the log should be saved.
File name
Key: fileName
Name: File name
Protocol generation template
Key: formatterDocumentTemplate
Name: Protocol generation template
Description: Protocol generation template
Spel script
Key: spelScript
Name: Spel script
Description: Spel script that expands the context when generating a log.
Form data for generate protocol
Key: formData
Name: Form data for generate protocol
Signature tsm-signature-pad-input
Signature offers the option to create a signature by signing directly on the device.
Widget Or Layout: widget
Value:
{
"type": "string",
"title": "Signature",
"widget": {
"type": "tsm-signature-pad-input",
"persistent": "Never",
"notitle": true
}
}
Inputs
Title
Key: title
Name: Title
Submit request button dtl-submit-request-button
The submit button is an interactive user interface component used to trigger a form submission event. The button contains the form value that can be accessed by other components. The button always sends a request (Action - GET/POST + URL). The response returned by the request is stored in the button's state, which can be accessed through an expression (e.g., $value.requestButton).
Widget Or Layout: widget
Value:
{
"type": "object",
"title": "Submit request button",
"widget": {
"type": "dtl-submit-request-button"
}
}
Inputs
Button Appearance
Key: buttonAppearance
Name: Button Appearance
Description: Appearance defines the type of graphical design of the button.
Button Severity
Key: buttonSeverity
Name: Button Severity
Description: Severity defines the button's color design.
Additional CSS class
Key: customCssClass
Name: Additional CSS class
Description: You can use an additional CSS class to customize the appearance of the component. Examples: text-2xl bg-red-500 flex w-full gap-2 flex-column p-4
Optional icon
Key: customIconCssClass
Name: Optional icon
Description: This is the full icon class string to show the icon. Example: p-icon-check
Value
Key: valuesToSet
Name: Value
Action
Key: formAction
Name: Action
Validation expression
Key: validationExpression
Name: Validation expression
Validation message
Key: validationMessage
Name: Validation message
Description: Custom error message for this validation.
Always enabled
Key: alwaysEnabled
Name: Always enabled
Description: Button will be always enabled regardless of readonly status
Variable dtl-variable
Variable is a component that allows you to insert a variable into the form. The variable is a value that is stored in the $value object and can be used in the form.
Widget Or Layout: widget
Value:
{
"type": "string",
"title": "Variable",
"widget": {
"type": "variable",
"hidden": true
}
}
Monaco editor dtl-form-input-monaco
The Monaco Editor is a powerful code editor offering advanced editing features, including syntax highlighting, code completion, and code folding, to help users write code more efficiently. The editor also provides support for multiple programming languages.
Widget Or Layout: widget
Value:
{
"type": "string",
"title": "Java example",
"widget": {
"type": "monaco-editor"
},
"config": {
"type": "string",
"language": "java",
"widgetHeight": "200px"
}
}
Object layout dtl-fluent-section
The object is a data structure that contains a set of named properties, each of which has a value. The object field type is typically used in forms to collect data that is organized into a set of related properties. The field can be represented by a collection of input fields, such as text fields, checkboxes, or drop-down menus, each of which is used to collect a specific property of the object. The use of an object field type helps to simplify the process of data entry, by providing a clear and organized way to collect related data elements. The field can also be used to enforce data constraints or to validate the data entered into the form, by using built-in validation rules or custom validation logic. tSM Forms Designer creates both - visual UI for the user and underlying data structure. You may need to use Object type to create complex JSON Schema to communicate with 3rd party systems. See <a href="https://json-schema.org/understanding-json-schema/reference/object.html#object" target="_blank" rel="noreferrer">https://json-schema.org/understanding-json-schema/reference/object.html#object</a> for more details.
Widget Or Layout: widget
Value:
{
"type": "object",
"properties": {},
"widget": {
"type": "dtl-fluent-section"
}
}
Inputs
Show bottom border of inputs
Key: inputBordersShowing
Name: Show bottom border of inputs
Description: Show bottom border of inputs even if form is in read-only state (only works for inputs with the title position set to "Top")
Compact Mode
Key: compactMode
Name: Compact Mode
Description: Compact Mode
Array dtl-fluent-fieldset
The array field type is a type of input field used to collect and store data in the form of an array. An array is a data structure that contains a ordered collection of elements, where each element can be of any data type. The field can be represented by a collection of input fields, such as text fields, checkboxes, or drop-down menus, each of which is used to collect a single element in the array. Array element can be also a complex Object, designed using Object field type. You may need to use Object type to create complex JSON Schema to communicate with 3rd party systems. See <a href="https://json-schema.org/understanding-json-schema/reference/array.html" target="_blank" rel="noreferrer">https://json-schema.org/understanding-json-schema/reference/array.html</a> for more details.
Widget Or Layout: widget
Value:
{
"type": "array",
"widget": {
"type": "dtl-fluent-fieldset"
},
"items": {},
"config": {
"numberOfRows": {
"value": 0,
"onlyForEmpty": true
}
}
}
Inputs
Legend (title)
Key: legend
Name: Legend (title)
Disable legend
Key: disableLegendForEmptyAndReadonly
Name: Disable legend
Description: Tick the checkbox if you wish to turn off the legend if readonly mode is enabled and the component does not contain any data.
Monaco diff editor dtl-form-input-monaco-diff
Monaco Diff Editor is an equivalent of Monaco Editor, which offers the ability to compare the content of two editors displayed side by side.
Widget Or Layout: widget
Value:
{
"type": "string",
"title": "Monaco diff editor",
"widget": {
"type": "monaco-diff-editor"
},
"config": {
"type": "string",
"language": "json",
"widgetHeight": "200px"
}
}
Accordion array dtl-fluent-accordion-array
The accordion array field type is a type of input field used to collect and store data in the form of an array. An array is a data structure that contains a ordered collection of elements, where each element can be of any data type. The field can be represented by a collection of input fields, such as text fields, checkboxes, or drop-down menus, each of which is used to collect a single element in the array. Array element can be also a complex Object, designed using Object field type. You may need to use Object type to create complex JSON Schema to communicate with 3rd party systems. Every array item is wrapped inside accordion tab. See <a href="https://json-schema.org/understanding-json-schema/reference/array.html" target="_blank" rel="noreferrer">https://json-schema.org/understanding-json-schema/reference/array.html</a> for more details.
Widget Or Layout: widget
Value:
{
"type": "array",
"widget": {
"type": "dtl-fluent-accordion-array"
},
"items": {},
"config": {}
}
Expression editor dtl-expression-editor
An expression editor is an input field used to input a SPEL or JEXL expression.
Widget Or Layout: widget
Value:
{
"type": "string",
"title": "Editorvýrazů",
"widget": {
"type": "dtl-expression-editor"
},
"config": {
"isExpression": true,
"hideChangeButton": true,
"defaultType": "spel",
"widgetHeight": 140,
"editorOptions": "JSON.stringify({\n fontSize: 12,\n minimap: {enabled: false},\n automaticLayout: true,\n autoClosingBrackets: 'always',\n matchBrackets: 'always',\n renderWhitespace: 'all',\n scrollBeyondLastLine: false,\n })"
}
}
Checklist tsm-checklist
To-do list with the option to upload items from a register
Widget Or Layout: widget
Value:
{
"type": "object",
"widget": {
"type": "tsm-checklist"
}
}
Inputs
Title
Key: title
Name: Title
Default value
Key: default
Name: Default value
Checklist filter
Key: checklistFilter
Name: Checklist filter