Advanced Widgets
Text to display tsm-display-text
Any text to display
Widget Or Layout: unknown
Value:
{
"type": "layout",
"widget": {
"type": "tsm-display-text"
},
"config": {
"text": "Text"
}
}
Inputs
Text
Key: text
Name: Text
Default: ""
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
Default: false
Examples
Curated configurations from libs/framework/fluent-forms/__fixtures__/widgets/tsm-display-text/.
Each is a complete validated FluentSchema — copy & adapt for your form.
With tooltip — 01-with-tooltip.json
Static display text followed by an info icon; hovering the icon shows the tooltip content (i18n-resolved via widget.tooltip). Use for read-only labels that need extra explanation without cluttering the form.
{
"type": "object",
"title": "Display text — with tooltip",
"description": "Static display text followed by an info icon; hovering the icon shows the tooltip content (i18n-resolved via widget.tooltip). Use for read-only labels that need extra explanation without cluttering the form.",
"properties": {
"note": {
"type": "string",
"title": "Note",
"widget": {
"type": "text"
}
}
},
"layout": [
{
"type": "layout",
"widget": {
"type": "tsm-display-text",
"tooltip": "This summary is generated from the signed contract and cannot be edited here."
},
"config": {
"text": "Contract summary",
"formatText": false
}
},
"note"
]
}
Gen format text — gen-format-text.json
Format text: 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
for line breaks). This functionality ensures
{
"type": "object",
"title": "Text to display — Format text",
"description": "Format text: 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",
"properties": {},
"layout": [
{
"type": "layout",
"widget": {
"type": "tsm-display-text"
},
"config": {
"text": "Text",
"formatText": true
}
}
]
}
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: unknown
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.
Default: "p-button p-button-text"
Button shape
Key: buttonShape
Name: Button shape
Description: Rounded shape renders a labeled button as a pill. An icon-only button becomes fully circular.
Default: "default"
Button Severity
Key: buttonSeverity
Name: Button Severity
Description: Severity defines the button's color design.
Default: "p-button-primary"
Button layout
Key: buttonLayout
Name: Button layout
Description: Controls the placement of the icon and label.
Default: "default"
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-col p-4
Default: ""
Optional icon
Key: customIconCssClass
Name: Optional icon
Description: This is the full icon class string to show the icon. Example: p-icon-check
Default: ""
Keyboard shortcut
Key: hotkey
Name: Keyboard shortcut
Description: Global shortcut that triggers this button (e.g. Ctrl+S). Click the field and press the desired combination.
Default: null
Button type
Key: buttonType
Name: Button type
Description: It determines the style and behavior of the button and options you can set below.
Default: "button_dialog"
Validate before click
Key: validateBeforeClick
Name: Validate before click
Description: If enabled, the validation expression is evaluated before the button action runs.
Default: false
Validation expression before click
Key: clickValidationExpression
Name: Validation expression before click
Description: Expression evaluated before the button action runs. If it returns false, the action is skipped.
Default: true
Component selector
Key: componentSelector
Name: Component selector
Default: null
Inputs
Key: dynamicComponentInputs
Name: Inputs
Default: null
Script
Key: scriptCode
Name: Script
Default: null
Hide message for script error
Key: hideScriptError
Name: Hide message for script error
Default: false
Disable form validation for type script
Key: disableFormScriptValidation
Name: Disable form validation for type script
Default: false
Dialog button title
Key: dialogButtonTitle
Name: Dialog button title
Description: Button label settings for button in the dialog
Default: ""
Form
Key: formCode
Name: Form
Description: Used render form. If not specified, an automatic layout is performed based on the current data.
Default: ""
Form title
Key: formTitle
Name: Form title
Description: The title of the form.
Default: null
Form context
Key: formContext
Name: Form context
Description: This context is passed to the specified form. Example: {"var": "myVariable"}. Usage in the specified form: $context.var
Default: null
Default form value
Key: defaultFormValue
Name: Default form value
Description: Default values for the form in the dialog. Can be specified as a JSON object or a JEXL expression. The current form values are also available in its expressions via $context.form (same as on detail forms).
Default: null
Form action
Key: formAction
Name: Form action
Default: null
Display script result in editor
Key: scriptResultEditor
Name: Display script result in editor
Default: false
Post url
Key: postUrl
Name: Post url
Description: The URL for POST request.
Default: null
Get url
Key: getUrl
Name: Get url
Description: The URL for GET request.
Default: null
Form width (px)
Key: formWidth
Name: Form width (px)
Description: The width of the form.
Default: null
Form height (px)
Key: formHeight
Name: Form height (px)
Description: The height of the form.
Default: null
Close dialog after submit
Key: closeDialog
Name: Close dialog after submit
Description: Close the dialog after the form is submitted.
Default: null
Display error message
Key: popupFormErrorToast
Name: Display error message
Description: Displays error toast message in case of invalid form
Default: false
Validate the form before submitting
Key: shouldValidate
Name: Validate the form before submitting
Description: If the form should be validated when the button is clicked.
Default: null
Link target
Key: linkTarget
Name: Link target
Description: The address where the user will be redirected after activating the link.
Default: null
Query params
Key: queryParams
Name: Query params
Description: Query parameters are a type of parameters that are added to the end of a URL to pass additional information to a web server
Default: null
POST data
Key: payload
Name: POST data
Description: Value in JSON format sent in body with POST method.
If you want to use a specific variable in your SpEL script and send its value, the structure looks like this:
{ "spelVariableName": "value" }
If you also want to send a variable from the form’s context to the script, use the following structure:
{ "spelVariableName": "${$context.form.chars.someContextVariable}" }
Default: ""
Message type
Key: messageType
Name: Message type
Description: The type of the message. (SUCCESS, ERROR)
Default: null
Link url
Key: linkUrl
Name: Link url
Description: The URL for the link.
Default: ""
Result property
Key: resultProperty
Name: Result property
Description: The property of the result object that will returned from request.
Default: null
Message text
Key: messageText
Name: Message text
Description: The text of the message.
Default: ""
File name
Key: fileName
Name: File name
Description: The name of the downloaded file.
Default: "file"
Message after successful execution
Key: successMessage
Name: Message after successful execution
Description: The message that will be displayed after the form is submitted successfully.
Default: "__expr:injectAndTranslateDefault(translationShared.shared.succSave)"
Always enabled
Key: alwaysEnabled
Name: Always enabled
Description: Button will be always enabled regardless of readonly status
Default: false
Popup window width (px)
Key: dialogWidth
Name: Popup window width (px)
Description: The width of the popup.
Default: null
Popup window height (px)
Key: dialogHeight
Name: Popup window height (px)
Description: The height of the popup.
Default: null
successActions
Key: successActions
Name: successActions
Default: []
errorActions
Key: errorActions
Name: errorActions
Default: []
Examples
Curated configurations from libs/framework/fluent-forms/__fixtures__/widgets/dtl-button/.
Each is a complete validated FluentSchema — copy & adapt for your form.
Gen click validation expression — gen-click-validation-expression.json
Validation expression before click: Expression evaluated before the button action runs. If it returns false, the action is skipped.
{
"type": "object",
"title": "Button — Validation expression before click",
"description": "Validation expression before click: Expression evaluated before the button action runs. If it returns false, the action is skipped.",
"properties": {},
"layout": [
{
"type": "layout",
"widget": {
"type": "dtl-button"
},
"config": {
"clickValidationExpression": false
}
}
]
}
Gen custom css class — gen-custom-css-class.json
Additional CSS class: 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-col p-4
{
"type": "object",
"title": "Button — Additional CSS class",
"description": "Additional CSS class: 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-col p-4",
"properties": {},
"layout": [
{
"type": "layout",
"widget": {
"type": "dtl-button"
},
"config": {
"customCssClass": "tsm-custom-class"
}
}
]
}
Gen custom icon css class — gen-custom-icon-css-class.json
Optional icon: This is the full icon class string to show the icon. Example: p-icon-check
{
"type": "object",
"title": "Button — Optional icon",
"description": "Optional icon: This is the full icon class string to show the icon. Example: p-icon-check",
"properties": {},
"layout": [
{
"type": "layout",
"widget": {
"type": "dtl-button"
},
"config": {
"customIconCssClass": "p-icon-search"
}
}
]
}
Gen disable form script validation — gen-disable-form-script-validation.json
Demonstrates config.disableFormScriptValidation = true on dtl-button.
{
"type": "object",
"title": "Button — Disable form validation for type script",
"description": "Demonstrates config.disableFormScriptValidation = true on dtl-button.",
"properties": {},
"layout": [
{
"type": "layout",
"widget": {
"type": "dtl-button"
},
"config": {
"disableFormScriptValidation": true
}
}
]
}
Gen hide script error — gen-hide-script-error.json
Demonstrates config.hideScriptError = true on dtl-button.
{
"type": "object",
"title": "Button — Hide message for script error",
"description": "Demonstrates config.hideScriptError = true on dtl-button.",
"properties": {},
"layout": [
{
"type": "layout",
"widget": {
"type": "dtl-button"
},
"config": {
"hideScriptError": true
}
}
]
}
Gen validate before click — gen-validate-before-click.json
Validate before click: If enabled, the validation expression is evaluated before the button action runs.
{
"type": "object",
"title": "Button — Validate before click",
"description": "Validate before click: If enabled, the validation expression is evaluated before the button action runs.",
"properties": {},
"layout": [
{
"type": "layout",
"widget": {
"type": "dtl-button"
},
"config": {
"validateBeforeClick": true
}
}
]
}
Request button script — request-button-script.json
Runs a SpEL script immediately and dispatches a toast action after success.
{
"type": "object",
"title": "Button — Direct script with success action",
"description": "Runs a SpEL script immediately and dispatches a toast action after success.",
"properties": {},
"widget": {
"type": "dtl-fluent-section"
},
"layout": [
{
"type": "layout",
"title": "Spustit skript",
"widget": {
"type": "dtl-button"
},
"config": {
"buttonType": "request_button",
"scriptCode": "xy",
"successMessage": "",
"successActions": [
{
"action": "[Core] ShowMessage",
"actionData": {
"text": "dopadlo to dobre",
"severity": "success",
"title": "SUCCESS"
},
"passScriptDataToAction": false
}
]
}
}
]
}
Clipboard button dtl-clipboard-button
Button for copying the selected value to the clipboard.
Widget Or Layout: unknown
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.
Default: "p-button"
Button shape
Key: buttonShape
Name: Button shape
Description: Rounded shape renders a labeled button as a pill. An icon-only button becomes fully circular.
Default: "default"
Button Severity
Key: buttonSeverity
Name: Button Severity
Description: Severity defines the button's color design.
Default: "p-button-primary"
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-col p-4
Default: ""
Optional icon
Key: customIconCssClass
Name: Optional icon
Description: This is the full icon class string to show the icon. Example: p-icon-check
Default: "tsm-icon-clipboard"
The value to save to the clipboard
Key: value
Name: The value to save to the clipboard
Default: null
Keyboard shortcut
Key: hotkey
Name: Keyboard shortcut
Description: Global shortcut that triggers this button (e.g. Ctrl+S). Click the field and press the desired combination.
Default: null
Examples
Curated configurations from libs/framework/fluent-forms/__fixtures__/widgets/dtl-clipboard-button/.
Each is a complete validated FluentSchema — copy & adapt for your form.
Gen custom css class — gen-custom-css-class.json
Additional CSS class: 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-col p-4
{
"type": "object",
"title": "Clipboard button — Additional CSS class",
"description": "Additional CSS class: 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-col p-4",
"properties": {},
"layout": [
{
"type": "layout",
"title": null,
"widget": {
"type": "dtl-clipboard-button"
},
"config": {
"customCssClass": "tsm-custom-class"
}
}
]
}
Gen custom icon css class — gen-custom-icon-css-class.json
Optional icon: This is the full icon class string to show the icon. Example: p-icon-check
{
"type": "object",
"title": "Clipboard button — Optional icon",
"description": "Optional icon: This is the full icon class string to show the icon. Example: p-icon-check",
"properties": {},
"layout": [
{
"type": "layout",
"title": null,
"widget": {
"type": "dtl-clipboard-button"
},
"config": {
"customIconCssClass": "p-icon-search"
}
}
]
}
Config Type Select tsm-config-type-lov
Selection of a configuration type from a dropdown list.
Widget Or Layout: unknown
Value:
{
"type": "string",
"title": "Select a Configuration Type",
"widget": {
"type": "tsm-config-type-lov"
}
}
Inputs
Default value
Key: default
Name: Default value
Default: ""
Value
Key: selectProperty
Name: Value
Default: "code"
Examples
Curated configurations from libs/framework/fluent-forms/__fixtures__/widgets/tsm-config-type-lov/.
Each is a complete validated FluentSchema — copy & adapt for your form.
Multiselect on — 10-multiselect-on.json
{
"type": "object",
"properties": {
"field": {
"type": "object",
"widget": {
"type": "tsm-config-type-lov"
},
"config": {
"multiselect": true
}
}
},
"layout": [
"field"
]
}
File upload dtl-file-upload-widget
The component allows you to upload a file to an entity.
Widget Or Layout: unknown
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
Default: null
Owner Id
Key: ownerId
Name: Owner Id
Default: ""
Parent privilege
Key: parentPriv
Name: Parent privilege
Default: null
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).
Default: null
Save attachment IDs to value
Key: saveIdsToValue
Name: Save attachment IDs to value
Description: After uploading or deleting attachments, their IDs are saved to the form value. Unlike "Always save attachments to form", this does not change the upload method.
Default: null
Try default value
Key: tryDefaultValue
Name: Try default value
Description: If the default value is set, it is automatically filled in the form.
Default: null
Allow to show default dialog
Key: allowDefaultDialog
Name: Allow to show default dialog
Description: allowDefaultDialogTooltip
Default: null
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.
Default: null
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)
Default: null
Hide description
Key: hideDescription
Name: Hide description
Description: Checking this option hides the description field in the attachment form.
Default: null
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"])
Default: null
Allowed attachment file types
Key: acceptDocumentTypes
Name: Allowed attachment file types
Description: acceptDocumentTypesTooltip
Default: null
Multiple files
Key: multiple
Name: Multiple files
Description: Allowed to upload multiple files
Default: false
Allow download file
Key: canDownloadFile
Name: Allow download file
Description: Display the icon for downloading the file
Default: null
Hidden button delete attachment
Key: hiddenDeleteAttachment
Name: Hidden button delete attachment
Description: Hidden button delete attachment
Default: null
Show button for gallery
Key: enableGalleria
Name: Show button for gallery
Description: Show button for gallery
Default: null
Hidden size unit
Key: hiddenSizeUnit
Name: Hidden size unit
Description: Hidden size unit won´t be visible anymore
Default: true
Hidden when inserted
Key: hiddenWhenInserted
Name: Hidden when inserted
Description: Hidden when inserted won´t be visible anymore
Default: true
Hidden who inserted
Key: hiddenWhoInserted
Name: Hidden who inserted
Description: Hidden who inserted won´t be visible anymore
Default: true
Hidden attachment type name
Key: hiddenAttachmentTypeName
Name: Hidden attachment type name
Description: Hidden attachment type name won´t be visible anymore
Default: true
Detail button always available
Key: forceEnableDetail
Name: Detail button always available
Default: false
Disable attachment loading cache
Key: disableCache
Name: Disable attachment loading cache
Description: Attachments are loaded fresh from the server on each widget render (bypasses the 5s shared cache). Useful when attachments uploaded in another task are not shown without a page refresh (F5).
Default: false
Max file size(kB)
Key: maxFileSize
Name: Max file size(kB)
Description: Max file size(kB)
Default: null
uploadSuccessActions
Key: uploadSuccessActions
Name: uploadSuccessActions
Default: []
uploadErrorActions
Key: uploadErrorActions
Name: uploadErrorActions
Default: []
Script
Key: uploadScriptCode
Name: Script
Default: ""
Script data
Key: uploadScriptData
Name: Script data
Description: Additional params for script evaluation
Default: {}
Hide script error
Key: uploadHideScriptError
Name: Hide script error
Default: false
uploadScriptSuccessActions
Key: uploadScriptSuccessActions
Name: uploadScriptSuccessActions
Default: []
uploadScriptErrorActions
Key: uploadScriptErrorActions
Name: uploadScriptErrorActions
Default: []
deleteAttachmentSuccessActions
Key: deleteAttachmentSuccessActions
Name: deleteAttachmentSuccessActions
Default: []
deleteAttachmentErrorActions
Key: deleteAttachmentErrorActions
Name: deleteAttachmentErrorActions
Default: []
Script
Key: deleteAttachmentScriptCode
Name: Script
Default: ""
Script data
Key: deleteAttachmentScriptData
Name: Script data
Description: Additional params for script evaluation
Default: {}
Hide script error
Key: deleteAttachmentHideScriptError
Name: Hide script error
Default: false
deleteAttachmentScriptSuccessActions
Key: deleteAttachmentScriptSuccessActions
Name: deleteAttachmentScriptSuccessActions
Default: []
deleteAttachmentScriptErrorActions
Key: deleteAttachmentScriptErrorActions
Name: deleteAttachmentScriptErrorActions
Default: []
Examples
Curated configurations from libs/framework/fluent-forms/__fixtures__/widgets/dtl-file-upload-widget/.
Each is a complete validated FluentSchema — copy & adapt for your form.
Gen force enable detail — gen-force-enable-detail.json
Demonstrates config.forceEnableDetail = true on dtl-file-upload-widget.
{
"type": "object",
"title": "File upload — Detail button always available",
"description": "Demonstrates config.forceEnableDetail = true on dtl-file-upload-widget.",
"properties": {
"field": {
"type": "object",
"widget": {
"type": "dtl-file-upload-widget"
},
"config": {
"attachmentTypeAllowEmpty": true,
"allowDefaultDialog": true,
"canDownloadFile": true,
"acceptDocumentTypes": "*",
"maxFileSize": 5120,
"forceEnableDetail": true
},
"title": "Field"
}
},
"layout": [
"field"
]
}
Gen hidden attachment type name — gen-hidden-attachment-type-name.json
Hidden attachment type name: Hidden attachment type name won´t be visible anymore
{
"type": "object",
"title": "File upload — Hidden attachment type name",
"description": "Hidden attachment type name: Hidden attachment type name won´t be visible anymore",
"properties": {
"field": {
"type": "object",
"widget": {
"type": "dtl-file-upload-widget"
},
"config": {
"attachmentTypeAllowEmpty": true,
"allowDefaultDialog": true,
"canDownloadFile": true,
"acceptDocumentTypes": "*",
"maxFileSize": 5120,
"hiddenAttachmentTypeName": false
},
"title": "Field"
}
},
"layout": [
"field"
]
}
Gen hidden size unit — gen-hidden-size-unit.json
Hidden size unit: Hidden size unit won´t be visible anymore
{
"type": "object",
"title": "File upload — Hidden size unit",
"description": "Hidden size unit: Hidden size unit won´t be visible anymore",
"properties": {
"field": {
"type": "object",
"widget": {
"type": "dtl-file-upload-widget"
},
"config": {
"attachmentTypeAllowEmpty": true,
"allowDefaultDialog": true,
"canDownloadFile": true,
"acceptDocumentTypes": "*",
"maxFileSize": 5120,
"hiddenSizeUnit": false
},
"title": "Field"
}
},
"layout": [
"field"
]
}
Gen hidden when inserted — gen-hidden-when-inserted.json
Hidden when inserted: Hidden when inserted won´t be visible anymore
{
"type": "object",
"title": "File upload — Hidden when inserted",
"description": "Hidden when inserted: Hidden when inserted won´t be visible anymore",
"properties": {
"field": {
"type": "object",
"widget": {
"type": "dtl-file-upload-widget"
},
"config": {
"attachmentTypeAllowEmpty": true,
"allowDefaultDialog": true,
"canDownloadFile": true,
"acceptDocumentTypes": "*",
"maxFileSize": 5120,
"hiddenWhenInserted": false
},
"title": "Field"
}
},
"layout": [
"field"
]
}
Gen hidden who inserted — gen-hidden-who-inserted.json
Hidden who inserted: Hidden who inserted won´t be visible anymore
{
"type": "object",
"title": "File upload — Hidden who inserted",
"description": "Hidden who inserted: Hidden who inserted won´t be visible anymore",
"properties": {
"field": {
"type": "object",
"widget": {
"type": "dtl-file-upload-widget"
},
"config": {
"attachmentTypeAllowEmpty": true,
"allowDefaultDialog": true,
"canDownloadFile": true,
"acceptDocumentTypes": "*",
"maxFileSize": 5120,
"hiddenWhoInserted": false
},
"title": "Field"
}
},
"layout": [
"field"
]
}
Gen multiple — gen-multiple.json
Multiple files: Allowed to upload multiple files
{
"type": "object",
"title": "File upload — Multiple files",
"description": "Multiple files: Allowed to upload multiple files",
"properties": {
"field": {
"type": "object",
"widget": {
"type": "dtl-file-upload-widget"
},
"config": {
"attachmentTypeAllowEmpty": true,
"allowDefaultDialog": true,
"canDownloadFile": true,
"acceptDocumentTypes": "*",
"maxFileSize": 5120,
"multiple": true
},
"title": "Field"
}
},
"layout": [
"field"
]
}
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: unknown
Value:
{
"type": "layout",
"widget": {
"type": "tsm-gallery"
}
}
Inputs
Gallery theme
Key: theme
Name: Gallery theme
Default: "basic"
Owner type
Key: ownerType
Name: Owner type
Default: ""
Owner Id
Key: ownerId
Name: Owner Id
Default: ""
Allowed attachment types
Key: attachmentTypeCode
Name: Allowed attachment types
Default: null
Fullscreen on click image
Key: fullscreenClickImage
Name: Fullscreen on click image
Default: false
Compress image (approx 2MB)
Key: compressImage
Name: Compress image (approx 2MB)
Default: false
Height
Key: height
Name: Height
Default: "450px"
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.
Default: true
Allowed attachment file types
Key: acceptDocumentTypes
Name: Allowed attachment file types
Description: acceptDocumentTypesTooltip
Default: null
Examples
Curated configurations from libs/framework/fluent-forms/__fixtures__/widgets/tsm-gallery/.
Each is a complete validated FluentSchema — copy & adapt for your form.
Gen compress image — gen-compress-image.json
Demonstrates config.compressImage = true on tsm-gallery.
{
"type": "object",
"title": "Gallery — Compress image (approx 2MB)",
"description": "Demonstrates config.compressImage = true on tsm-gallery.",
"properties": {},
"layout": [
{
"type": "layout",
"widget": {
"type": "tsm-gallery"
},
"config": {
"compressImage": true
}
}
]
}
Gen fullscreen click image — gen-fullscreen-click-image.json
Demonstrates config.fullscreenClickImage = true on tsm-gallery.
{
"type": "object",
"title": "Gallery — Fullscreen on click image",
"description": "Demonstrates config.fullscreenClickImage = true on tsm-gallery.",
"properties": {},
"layout": [
{
"type": "layout",
"widget": {
"type": "tsm-gallery"
},
"config": {
"fullscreenClickImage": true
}
}
]
}
Gen multiple — gen-multiple.json
Allows you to save multiple images: After unchecking this option, only one image can be saved to the gallery.
{
"type": "object",
"title": "Gallery — Allows you to save multiple images",
"description": "Allows you to save multiple images: After unchecking this option, only one image can be saved to the gallery.",
"properties": {},
"layout": [
{
"type": "layout",
"widget": {
"type": "tsm-gallery"
},
"config": {
"multiple": false
}
}
]
}
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: unknown
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
},
"columns": [
{
"property": "col0"
},
{
"property": "col1"
}
],
"headers": []
},
"widget": {
"type": "dtl-fluent-editgrid",
"notitle": true
}
}
Inputs
Default value
Key: default
Name: Default value
Default: null
Page size
Key: pageSize
Name: Page size
Default: null
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
Default: null
Rows per page options
Key: rowsPerPageOptions
Name: Rows per page options
Default: ""
Fixed column widths
Key: fixedLayout
Name: Fixed column widths
Description: Enables table-layout: fixed — columns honor their configured widths (e.g. percentages) regardless of content length.
Default: false
Examples
Curated configurations from libs/framework/fluent-forms/__fixtures__/widgets/dtl-fluent-editgrid/.
Each is a complete validated FluentSchema — copy & adapt for your form.
Readonly script links — 01-readonly-script-links.json
Readonly ticket table loaded by a script, with a per-row link label.
{
"type": "object",
"title": "Tickets",
"description": "Readonly ticket table loaded by a script, with a per-row link label.",
"properties": {
"tickets": {
"type": "array",
"title": "Tickets",
"items": {
"type": "object",
"properties": {
"url": {
"type": "string",
"title": "Key",
"config": {
"target": true,
"customTitle": "${$value.tickets[$row].key}"
},
"widget": {
"type": "link",
"readonly": true,
"notitle": true
}
},
"name": {
"type": "string",
"title": "Name",
"widget": {
"type": "text",
"readonly": true,
"notitle": true
}
},
"key": {
"type": "string",
"title": "Source key",
"widget": {
"type": "text",
"readonly": true,
"hidden": true,
"notitle": true
}
}
}
},
"config": {
"columns": [
{
"property": "url"
},
{
"property": "name"
}
],
"headers": [
[
{
"title": "Key"
},
{
"title": "Name"
}
]
],
"numberOfRows": {
"value": 0,
"onlyForEmpty": true
},
"fixedLayout": true
},
"widget": {
"type": "dtl-fluent-editgrid",
"readonly": true,
"notitle": true
}
}
},
"layout": [
"tickets"
],
"effects": [
{
"id": "loadTickets",
"runOnInitialization": true,
"listen": [
"${$context.entity.id}"
],
"do": [
{
"type": "script",
"scriptCode": "PSP.Search.Ticket",
"successDo": [
{
"type": "set",
"field": "tickets",
"value": "${$response.map(ticket => ({key: ticket.key, name: ticket.name, url: '/tickets/ticket/' + ticket.key}))}"
}
]
}
]
}
]
}
Gen fixed layout — gen-fixed-layout.json
Fixed column widths: Enables table-layout: fixed — columns honor their configured widths (e.g. percentages) regardless of content length.
{
"type": "object",
"title": "Table — Fixed column widths",
"description": "Fixed column widths: Enables table-layout: fixed — columns honor their configured widths (e.g. percentages) regardless of content length.",
"properties": {
"field": {
"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
},
"columns": [
{
"property": "col0"
},
{
"property": "col1"
}
],
"headers": [
[
{
"title": "Header"
},
{
"title": "Header"
}
]
],
"fixedLayout": true
},
"widget": {
"type": "dtl-fluent-editgrid",
"notitle": true
},
"title": "Field"
}
},
"layout": [
"field"
]
}
Gen rows per page options — gen-rows-per-page-options.json
Demonstrates config.rowsPerPageOptions = "[10, 25, 40]" on dtl-fluent-editgrid.
{
"type": "object",
"title": "Table — Rows per page options",
"description": "Demonstrates config.rowsPerPageOptions = \"[10, 25, 40]\" on dtl-fluent-editgrid.",
"properties": {
"field": {
"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
},
"columns": [
{
"property": "col0"
},
{
"property": "col1"
}
],
"headers": [
[
{
"title": "Header"
},
{
"title": "Header"
}
]
],
"rowsPerPageOptions": "[10, 25, 40]"
},
"widget": {
"type": "dtl-fluent-editgrid",
"notitle": true
},
"title": "Field"
}
},
"layout": [
"field"
]
}
Create Entity dtl-create-entity-button
Create Entity
Widget Or Layout: unknown
Value:
{
"type": "layout",
"title": "Create Entity Button",
"widget": {
"type": "dtl-create-entity-button"
}
}
Inputs
Appearance
Key: buttonAppearance
Name: Appearance
Description: Overall button style: Basic, Raised, Text, Raised Text or Outlined
Default: "p-button p-button-text"
Button shape
Key: buttonShape
Name: Button shape
Description: Rounded shape renders a labeled button as a pill. An icon-only button becomes fully circular.
Default: "default"
Severity
Key: buttonSeverity
Name: Severity
Description: Button color tied to the meaning of the action (Primary, Secondary, Success, Warning, Danger, Help, Info; Plain is also available for Text appearance)
Default: "p-button-primary"
Optional CSS class
Key: customCssClass
Name: Optional CSS class
Description: Custom CSS class appended to the button
Default: ""
Icon
Key: customIconCssClass
Name: Icon
Description: Icon CSS class displayed on the button (e.g. "pi pi-plus" or "tsm-icon-customer")
Default: ""
Keyboard shortcut
Key: hotkey
Name: Keyboard shortcut
Description: Global shortcut that triggers this button (e.g. Ctrl+S). Click the field and press the desired combination.
Default: null
Entity type
Key: entityType
Name: Entity type
Default: null
Entity Spec ID Property
Key: entitySpecIdProperty
Name: Entity Spec ID Property
Description: Usually leave as default "entitySpecId" — works for most entity types. Change only if the chosen type stores the EntitySpecification ID under a different property name (e.g. "orderSpecId").
Default: "entitySpecId"
Form Selector
Key: formSelector
Name: Form Selector
Description: Selector for looking up form specification (e.g. tsm-customer-new, tsm-order-new)
Default: ""
Fallback Form Code
Key: fallbackFormCode
Name: Fallback Form Code
Description: Form code to use when EntitySpecification has no specific form
Default: ""
Dialog Title
Key: dialogTitle
Name: Dialog Title
Default: ""
Dialog Width
Key: dialogWidth
Name: Dialog Width
Description: Width of dialog including unit (e.g. 900px, 50vw, 80%)
Default: "900px"
Always editable
Key: alwaysEnabled
Name: Always editable
Description: Button will always stay editable regardless of readonly status
Default: false
Object dialog type
Key: newRecordConfig
Name: Object dialog type
Default: {"label":"","types":[],"hiddenTypes":[],"defaultType":"","createPrivilege":""}
Inventory Type
Key: inventoryType
Name: Inventory Type
Description: PRODUCT, SERVICE, RESOURCE, PRICELIST
Default: ""
Catalog Code
Key: catalogCode
Name: Catalog Code
Description: Code of the catalog
Default: ""
Category
Key: categoryId
Name: Category
Description: Category within the catalog
Default: ""
Register Code
Key: registerCode
Name: Register Code
Description: Code of the register
Default: ""
Context Data
Key: contextData
Name: Context Data
Description: JSON data to pre-fill the new entity form. Properties matching the form structure will be filled in.
Default: null
Pre-Script
Key: preScriptCode
Name: Pre-Script
Description: Script to execute before opening the dialog. Its output is merged with context data.
Default: ""
Pre-Script Data
Key: preScriptData
Name: Pre-Script Data
Description: Input data for the pre-script (JSON)
Default: null
Save Script
Key: scriptCode
Name: Save Script
Description: Script to execute on save. Receives form data as input.
Default: ""
Script Data
Key: scriptData
Name: Script Data
Description: Additional input data for the save script (JSON)
Default: null
successActions
Key: successActions
Name: successActions
Default: []
errorActions
Key: errorActions
Name: errorActions
Default: []
Examples
Curated configurations from libs/framework/fluent-forms/__fixtures__/widgets/dtl-create-entity-button/.
Each is a complete validated FluentSchema — copy & adapt for your form.
Gen always enabled — gen-always-enabled.json
Always editable: Button will always stay editable regardless of readonly status
{
"type": "object",
"title": "Create Entity — Always editable",
"description": "Always editable: Button will always stay editable regardless of readonly status",
"properties": {},
"layout": [
{
"type": "layout",
"widget": {
"type": "dtl-create-entity-button"
},
"config": {
"alwaysEnabled": true
}
}
]
}
Gen custom css class — gen-custom-css-class.json
Optional CSS class: Custom CSS class appended to the button
{
"type": "object",
"title": "Create Entity — Optional CSS class",
"description": "Optional CSS class: Custom CSS class appended to the button",
"properties": {},
"layout": [
{
"type": "layout",
"widget": {
"type": "dtl-create-entity-button"
},
"config": {
"customCssClass": "tsm-custom-class"
}
}
]
}
Gen custom icon css class — gen-custom-icon-css-class.json
Icon: Icon CSS class displayed on the button (e.g. "pi pi-plus" or "tsm-icon-customer")
{
"type": "object",
"title": "Create Entity — Icon",
"description": "Icon: Icon CSS class displayed on the button (e.g. \"pi pi-plus\" or \"tsm-icon-customer\")",
"properties": {},
"layout": [
{
"type": "layout",
"widget": {
"type": "dtl-create-entity-button"
},
"config": {
"customIconCssClass": "p-icon-search"
}
}
]
}
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: unknown
Value:
{
"type": "object",
"title": "Form",
"widget": {
"type": "dtl-fluent-inner-form"
}
}
Inputs
Form code
Key: formCode
Name: Form code
Default: ""
Form context
Key: context
Name: Form context
Default: null
Disable show errors in inner form
Key: innerFormShowDisableErrors
Name: Disable show errors in inner form
Default: false
Examples
Curated configurations from libs/framework/fluent-forms/__fixtures__/widgets/dtl-fluent-inner-form/.
Each is a complete validated FluentSchema — copy & adapt for your form.
Gen inner form show disable errors — gen-inner-form-show-disable-errors.json
Demonstrates config.innerFormShowDisableErrors = true on dtl-fluent-inner-form.
{
"type": "object",
"title": "Inner form — Disable show errors in inner form",
"description": "Demonstrates config.innerFormShowDisableErrors = true on dtl-fluent-inner-form.",
"properties": {
"field": {
"type": "object",
"title": "Field",
"widget": {
"type": "dtl-fluent-inner-form"
},
"config": {
"innerFormShowDisableErrors": true
}
}
},
"layout": [
"field"
]
}
Kibana button dtl-kibana-button
Button for opening Kibana with a prefilled query. Correlation condition is always added automatically and additional query parts can be configured using template parameters.
Widget Or Layout: unknown
Value:
{
"type": "layout",
"title": "Kibana button",
"widget": {
"type": "dtl-kibana-button"
},
"config": {
"buttonSeverity": "p-button-secondary"
}
}
Inputs
Button appearance
Key: buttonAppearance
Name: Button appearance
Description: Appearance defines the visual design variant of the button.
Default: null
Button shape
Key: buttonShape
Name: Button shape
Description: Rounded shape renders a labeled button as a pill. An icon-only button becomes fully circular.
Default: "default"
Button severity
Key: buttonSeverity
Name: Button severity
Description: Severity defines color variant of the button.
Default: null
Button layout
Key: buttonLayout
Name: Button layout
Description: Controls icon and title placement.
Default: "default"
Keyboard shortcut
Key: hotkey
Name: Keyboard shortcut
Description: Global shortcut that triggers this button (e.g. Ctrl+S). Click the field and press the desired combination.
Default: null
Additional CSS class
Key: customCssClass
Name: Additional CSS class
Description: Use additional CSS classes to customize look. Example: text-2xl bg-red-500
Default: ""
Optional icon
Key: customIconCssClass
Name: Optional icon
Description: Full icon class. Example: pi pi-chart-bar
Default: "pi pi-chart-bar"
Kibana URL override
Key: kibanaUrl
Name: Kibana URL override
Description: Optional override. If empty, URL from config.kibana.url is used. Supports ~{query.expression}.
Default: ""
Template params
Key: queryParams
Name: Template params
Description: JSON object converted to KQL conditions joined by "and".
Example: {"tsm_module":"tsm-management-service","tsm_prefix":"datalite"}.
Default: null
Auto add X-Correlation-Id
Key: includeCorrelationId
Name: Auto add X-Correlation-Id
Description: When enabled, X-Correlation-Id:"<sessionId>" is automatically prepended to query.
Default: true
Always enabled
Key: alwaysEnabled
Name: Always enabled
Description: Button remains enabled even in readonly mode.
Default: false
Examples
Curated configurations from libs/framework/fluent-forms/__fixtures__/widgets/dtl-kibana-button/.
Each is a complete validated FluentSchema — copy & adapt for your form.
Gen always enabled — gen-always-enabled.json
Always enabled: Button remains enabled even in readonly mode.
{
"type": "object",
"title": "Kibana button — Always enabled",
"description": "Always enabled: Button remains enabled even in readonly mode.",
"properties": {},
"layout": [
{
"type": "layout",
"widget": {
"type": "dtl-kibana-button"
},
"config": {
"buttonSeverity": "p-button-secondary",
"alwaysEnabled": true
}
}
]
}
Gen custom css class — gen-custom-css-class.json
Additional CSS class: Use additional CSS classes to customize look. Example: text-2xl bg-red-500
{
"type": "object",
"title": "Kibana button — Additional CSS class",
"description": "Additional CSS class: Use additional CSS classes to customize look. Example: text-2xl bg-red-500",
"properties": {},
"layout": [
{
"type": "layout",
"widget": {
"type": "dtl-kibana-button"
},
"config": {
"buttonSeverity": "p-button-secondary",
"customCssClass": "tsm-custom-class"
}
}
]
}
Gen custom icon css class — gen-custom-icon-css-class.json
Optional icon: Full icon class. Example: pi pi-chart-bar
{
"type": "object",
"title": "Kibana button — Optional icon",
"description": "Optional icon: Full icon class. Example: pi pi-chart-bar",
"properties": {},
"layout": [
{
"type": "layout",
"widget": {
"type": "dtl-kibana-button"
},
"config": {
"buttonSeverity": "p-button-secondary",
"customIconCssClass": "p-icon-search"
}
}
]
}
Gen include correlation id — gen-include-correlation-id.json
Auto add X-Correlation-Id: When enabled, X-Correlation-Id:"<sessionId>" is automatically prepended to query.
{
"type": "object",
"title": "Kibana button — Auto add X-Correlation-Id",
"description": "Auto add X-Correlation-Id: When enabled, X-Correlation-Id:\"<sessionId>\" is automatically prepended to query.",
"properties": {},
"layout": [
{
"type": "layout",
"widget": {
"type": "dtl-kibana-button"
},
"config": {
"buttonSeverity": "p-button-secondary",
"includeCorrelationId": false
}
}
]
}
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: unknown
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.
Default: "p-button"
Button shape
Key: buttonShape
Name: Button shape
Description: Rounded shape renders a labeled button as a pill. An icon-only button becomes fully circular.
Default: "default"
Button Severity
Key: buttonSeverity
Name: Button Severity
Description: Severity defines the button's color design.
Default: "p-button-primary"
Keyboard shortcut
Key: hotkey
Name: Keyboard shortcut
Description: Global shortcut that triggers this button (e.g. Ctrl+S). Click the field and press the desired combination.
Default: null
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-col p-4
Default: ""
Optional icon
Key: customIconCssClass
Name: Optional icon
Description: This is the full icon class string to show the icon. Example: p-icon-check
Default: ""
Value
Key: valuesToSet
Name: Value
Description: A button is a carrier of a value that can be inserted via an expression. The value is entered only after the button is clicked. The value can be accessed via $value.myButton.
Default: null
Validation expression
Key: validationExpression
Name: Validation expression
Description: Validation expression. Executes after clicking button and toggles the error message.
Default: null
Validation message
Key: validationMessage
Name: Validation message
Description: Custom error message for this validation.
Default: null
Always enabled
Key: alwaysEnabled
Name: Always enabled
Description: Button will be always enabled regardless of readonly status
Default: false
Examples
Curated configurations from libs/framework/fluent-forms/__fixtures__/widgets/dtl-submit-button/.
Each is a complete validated FluentSchema — copy & adapt for your form.
Gen always enabled — gen-always-enabled.json
Always enabled: Button will be always enabled regardless of readonly status
{
"type": "object",
"title": "Submit button — Always enabled",
"description": "Always enabled: Button will be always enabled regardless of readonly status",
"properties": {
"field": {
"type": "object",
"widget": {
"type": "dtl-submit-button"
},
"title": "Field",
"config": {
"alwaysEnabled": true
}
}
},
"layout": [
"field"
]
}
Gen custom css class — gen-custom-css-class.json
Additional CSS class: 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-col p-4
{
"type": "object",
"title": "Submit button — Additional CSS class",
"description": "Additional CSS class: 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-col p-4",
"properties": {
"field": {
"type": "object",
"widget": {
"type": "dtl-submit-button"
},
"title": "Field",
"config": {
"customCssClass": "tsm-custom-class"
}
}
},
"layout": [
"field"
]
}
Gen custom icon css class — gen-custom-icon-css-class.json
Optional icon: This is the full icon class string to show the icon. Example: p-icon-check
{
"type": "object",
"title": "Submit button — Optional icon",
"description": "Optional icon: This is the full icon class string to show the icon. Example: p-icon-check",
"properties": {
"field": {
"type": "object",
"widget": {
"type": "dtl-submit-button"
},
"title": "Field",
"config": {
"customIconCssClass": "p-icon-search"
}
}
},
"layout": [
"field"
]
}
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: unknown
Value:
{
"type": "string",
"title": "User register",
"widget": {
"type": "tsm-register-value-lov"
}
}
Inputs
Keyboard on mobile
Key: keyboardOnMobile
Name: Keyboard on mobile
Description: Sets readonly attribute for filtering input
Default: true
Show clear
Key: showClear
Name: Show clear
Description: Sets the visibility of the delete button for clearing text in the filtering input
Default: true
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.
Default: "name"
Show none text
Key: showNoneText
Name: Show none text
Default: true
Hide code
Key: hideCode
Name: Hide code
Default: false
Default tree view mode
Key: defaultTreeViewMode
Name: Default tree view mode
Default: false
Selection using a listing (one or more values)
Key: multiselect
Name: Selection using a listing (one or more values)
Default: false
Force selection
Key: forceSelection
Name: Force selection
Description: When enabled, users must select a value from the provided options. When disabled, single mode allows entering a custom text value.
Default: true
Disable link
Key: disableLink
Name: Disable link
Default: false
Selection mode
Key: selectionMode
Name: Selection mode
Default: "multiple"
Multiple value storage mode
Key: returnType
Name: Multiple value storage mode
Default: "string"
A profile that defines the display of columns
Key: profileId
Name: A profile that defines the display of columns
Default: null
Display
Key: displayField
Name: Display
Description: It is possible to add multiple values using autocomplete or with source code ["key", "name"]
Default: "name"
User Register
Key: registerCode
Name: User Register
Default: ""
Value
Key: selectProperty
Name: Value
Default: "code"
Columns
Key: customColumns
Name: Columns
Description: If the option "Value" is selected as "Custom", it is necessary to define the columns to be stored.
The definition must ALWAYS contain the "id" and "code" attribute, eg: ["id", "code", "name"].
Default: null
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.
Default: null
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.
Default: null
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: "__expr:(window as any)?.app?.params?.dataViewPageSizeDefault ?? 20"
Default value
Key: default
Name: Default value
Default: ""
defaultFilters
Key: defaultFilters
Name: defaultFilters
Default: []
Examples
Curated configurations from libs/framework/fluent-forms/__fixtures__/widgets/tsm-register-value-lov/.
Each is a complete validated FluentSchema — copy & adapt for your form.
Multiselect on — 10-multiselect-on.json
{
"type": "object",
"properties": {
"field": {
"type": "string",
"widget": {
"type": "tsm-register-value-lov"
},
"config": {
"multiselect": true
}
}
},
"layout": [
"field"
]
}
Gen default tree view mode — gen-default-tree-view-mode.json
Demonstrates config.defaultTreeViewMode = true on tsm-register-value-lov.
{
"type": "object",
"title": "User register — Default tree view mode",
"description": "Demonstrates config.defaultTreeViewMode = true on tsm-register-value-lov.",
"properties": {
"field": {
"type": "string",
"widget": {
"type": "tsm-register-value-lov"
},
"title": "Field",
"config": {
"defaultTreeViewMode": true
}
}
},
"layout": [
"field"
]
}
Gen hide code — gen-hide-code.json
Demonstrates config.hideCode = true on tsm-register-value-lov.
{
"type": "object",
"title": "User register — Hide code",
"description": "Demonstrates config.hideCode = true on tsm-register-value-lov.",
"properties": {
"field": {
"type": "string",
"widget": {
"type": "tsm-register-value-lov"
},
"title": "Field",
"config": {
"hideCode": true
}
}
},
"layout": [
"field"
]
}
Gen keyboard on mobile — gen-keyboard-on-mobile.json
Keyboard on mobile: Sets readonly attribute for filtering input
{
"type": "object",
"title": "User register — Keyboard on mobile",
"description": "Keyboard on mobile: Sets readonly attribute for filtering input",
"properties": {
"field": {
"type": "string",
"widget": {
"type": "tsm-register-value-lov"
},
"title": "Field",
"config": {
"keyboardOnMobile": false
}
}
},
"layout": [
"field"
]
}
Gen multiselect — gen-multiselect.json
Demonstrates config.multiselect = true on tsm-register-value-lov.
{
"type": "object",
"title": "User register — Selection using a listing (one or more values)",
"description": "Demonstrates config.multiselect = true on tsm-register-value-lov.",
"properties": {
"field": {
"type": "string",
"widget": {
"type": "tsm-register-value-lov"
},
"title": "Field",
"config": {
"multiselect": true
}
}
},
"layout": [
"field"
]
}
Gen show clear — gen-show-clear.json
Show clear: Sets the visibility of the delete button for clearing text in the filtering input
{
"type": "object",
"title": "User register — Show clear",
"description": "Show clear: Sets the visibility of the delete button for clearing text in the filtering input",
"properties": {
"field": {
"type": "string",
"widget": {
"type": "tsm-register-value-lov"
},
"title": "Field",
"config": {
"showClear": false
}
}
},
"layout": [
"field"
]
}
Gen show none text — gen-show-none-text.json
Demonstrates config.showNoneText = false on tsm-register-value-lov.
{
"type": "object",
"title": "User register — Show none text",
"description": "Demonstrates config.showNoneText = false on tsm-register-value-lov.",
"properties": {
"field": {
"type": "string",
"widget": {
"type": "tsm-register-value-lov"
},
"title": "Field",
"config": {
"showNoneText": false
}
}
},
"layout": [
"field"
]
}
Value dialog tsm-value-dialog
Value display with a button that opens a dialog with a form for editing
Widget Or Layout: unknown
Value:
{
"type": "string",
"title": "Value dialog",
"widget": {
"type": "tsm-value-dialog"
}
}
Inputs
Form
Key: formCode
Name: Form
Description: Form code to display in the dialog
Default: ""
Context
Key: context
Name: Context
Default: {}
Dialog title
Key: dialogTitle
Name: Dialog title
Description: Title displayed in the dialog header
Default: ""
Dialog width
Key: dialogWidth
Name: Dialog width
Description: Width of the dialog window (e.g., 600px)
Default: "600px"
Dialog height
Key: dialogHeight
Name: Dialog height
Description: Height of the dialog window (e.g., 400px)
Default: ""
Button appearance
Key: buttonAppearance
Name: Button appearance
Description: Appearance defines the type of graphical design of the button.
Default: "p-button p-button-text"
Button shape
Key: buttonShape
Name: Button shape
Description: Rounded shape renders a labeled button as a pill. An icon-only button becomes fully circular.
Default: "default"
Button severity
Key: buttonSeverity
Name: Button severity
Description: Severity defines the button's color design.
Default: "p-button-info"
Button icon
Key: buttonIcon
Name: Button icon
Description: CSS class for the button icon (e.g., pi pi-pencil)
Default: "pi pi-pencil"
Custom icon CSS class
Key: customIconCssClass
Name: Custom icon CSS class
Description: Additional CSS class for icon styling (e.g., text-red-500)
Default: ""
Custom button CSS class
Key: customCssClass
Name: Custom button CSS class
Description: Additional CSS class for button styling (e.g., p-button-danger)
Default: ""
Button tooltip
Key: buttonTooltip
Name: Button tooltip
Description: Text displayed as button tooltip
Default: ""
Display value
Key: displayValue
Name: Display value
Description: Expression for displaying value (e.g., value.name)
Default: ""
Examples
Curated configurations from libs/framework/fluent-forms/__fixtures__/widgets/tsm-value-dialog/.
Each is a complete validated FluentSchema — copy & adapt for your form.
Gen button icon — gen-button-icon.json
Button icon: CSS class for the button icon (e.g., pi pi-pencil)
{
"type": "object",
"title": "Value dialog — Button icon",
"description": "Button icon: CSS class for the button icon (e.g., pi pi-pencil)",
"properties": {
"field": {
"type": "string",
"widget": {
"type": "tsm-value-dialog"
},
"title": "Field",
"config": {
"buttonIcon": "p-icon-search"
}
}
},
"layout": [
"field"
]
}
Gen button tooltip — gen-button-tooltip.json
Button tooltip: Text displayed as button tooltip
{
"type": "object",
"title": "Value dialog — Button tooltip",
"description": "Button tooltip: Text displayed as button tooltip",
"properties": {
"field": {
"type": "string",
"widget": {
"type": "tsm-value-dialog"
},
"title": "Field",
"config": {
"buttonTooltip": "Help text shown on hover."
}
}
},
"layout": [
"field"
]
}
Gen custom css class — gen-custom-css-class.json
Custom button CSS class: Additional CSS class for button styling (e.g., p-button-danger)
{
"type": "object",
"title": "Value dialog — Custom button CSS class",
"description": "Custom button CSS class: Additional CSS class for button styling (e.g., p-button-danger)",
"properties": {
"field": {
"type": "string",
"widget": {
"type": "tsm-value-dialog"
},
"title": "Field",
"config": {
"customCssClass": "tsm-custom-class"
}
}
},
"layout": [
"field"
]
}
Gen custom icon css class — gen-custom-icon-css-class.json
Custom icon CSS class: Additional CSS class for icon styling (e.g., text-red-500)
{
"type": "object",
"title": "Value dialog — Custom icon CSS class",
"description": "Custom icon CSS class: Additional CSS class for icon styling (e.g., text-red-500)",
"properties": {
"field": {
"type": "string",
"widget": {
"type": "tsm-value-dialog"
},
"title": "Field",
"config": {
"customIconCssClass": "p-icon-search"
}
}
},
"layout": [
"field"
]
}
Generate protocol tsm-generate-protocol
The component allows you to generate protocol by layout.
Widget Or Layout: unknown
Value:
{
"type": "object",
"title": "Generate protocol",
"widget": {
"type": "tsm-generate-protocol",
"persistent": "Never",
"notitle": true
},
"config": {
"onlyPrintOrDownload": false,
"canDownloadFile": true,
"enableShowProtocol": true,
"enablePrintProtocol": true,
"enableShowBrowserProtocol": false,
"hiddenSizeUnit": false,
"hiddenWhenInserted": false,
"hiddenWhoInserted": false,
"hiddenDeleteAttachment": false,
"hiddenAttachmentTypeName": false,
"forceEnableDetail": false,
"firstShowThenGenerate": true,
"alwaysEnabled": false,
"hidePdfViewer": false
}
}
Inputs
Button Appearance
Key: buttonAppearance
Name: Button Appearance
Description: Defines the visual style of buttons (e.g., outlined, text, raised).
Default: "p-button p-button-text"
Button shape
Key: buttonShape
Name: Button shape
Description: Rounded shape renders a labeled button as a pill. An icon-only button becomes fully circular.
Default: "default"
Button Severity
Key: buttonSeverity
Name: Button Severity
Description: Defines the button color scheme based on its importance (e.g., Success for saving).
Default: "p-button-primary"
Optional CSS class
Key: buttonCustomCssClass
Name: Optional CSS class
Description: An optional CSS class to modify the style of this component. <span class="font-semibold">Examples:</span> <code>text-2xl bg-red-500 flex w-full gap-2 flex-col p-4</code>
Default: null
Optional icon
Key: buttonIconCssClass
Name: Optional icon
Description: Icon CSS class for the button. Example: p-icon-check
Default: null
Owner type
Key: ownerType
Name: Owner type
Description: Entity type (e.g., CASE, TASK) to which the protocol will be attached.
Default: null
Owner Id
Key: ownerId
Name: Owner Id
Description: JEXL expression to retrieve the ID of the specific record to which the protocol is bound.
Default: ""
Attachment Type
Key: attachmentType
Name: Attachment Type
Description: The attachment type under which the protocol will be saved.
Default: null
File name
Key: fileName
Name: File name
Description: Expression defining the name of the generated file. JEXL can be used.
Default: null
Name of the button to preview the protocol
Key: previewProtocolButton
Name: Name of the button to preview the protocol
Description: Custom label for the preview button.
Default: null
Name of the button to generate the protocol
Key: generateProtocolButton
Name: Name of the button to generate the protocol
Description: Custom label for the save/generate button.
Default: null
Name of the button to refresh the protocol
Key: refreshProtocolButton
Name: Name of the button to refresh the protocol
Description: Custom label for the data refresh button.
Default: null
Name of the button to print the protocol
Key: printProtocolButton
Name: Name of the button to print the protocol
Description: Custom label for the print button.
Default: null
Name of the button to download the protocol
Key: downloadProtocolButton
Name: Name of the button to download the protocol
Description: Custom label for the file download button.
Default: null
Name of the button to save the protocol
Key: saveProtocolButton
Name: Name of the button to save the protocol
Description: Custom label for the DMS save button.
Default: null
Name of the button to view the protocol in browser
Key: showBrowserProtocolButton
Name: Name of the button to view the protocol in browser
Description: Custom label for the browser view button.
Default: null
Protocol generation template
Key: formatterDocumentTemplate
Name: Protocol generation template
Description: Select a template (JasperReport / DOCX) that defines the appearance and content of the report.
The resulting object composed of data from the SpEL script, the form, and the extending data will be inserted into the report as an object.
Default: null
Spel script
Key: spelScript
Name: Spel script
Description: SpEL script that prepares or transforms data before sending it to the generator.
Default: null
Script data
Key: scriptData
Name: Script data
Description: Input data for the script. The data must be provided as an object and can then be accessed in the script as properties using the # symbol.
For example: { name: "John", age: 30 } can be used in the script as #name.
Default: {}
Form
Key: formId
Name: Form
Description: Configuration form displayed before generation to enter additional parameters.
Default: null
Accordion header for form
Key: accordionHeaderForm
Name: Accordion header for form
Description: Header text for the additional form section.
Default: null
Form data for generate protocol
Key: formData
Name: Form data for generate protocol
Description: An expression that extends the parameters of the defined form. The data from the form is merged with the parameters defined here.
Default: {}
Related entity
Key: relatedEntities
Name: Related entity
Default: null
successActions
Key: successActions
Name: successActions
Default: []
errorActions
Key: errorActions
Name: errorActions
Default: []
PDF preview tsm-pdf-preview
Displays a preview of a PDF document.
Widget Or Layout: unknown
Value:
{
"type": "layout",
"title": "PDF preview",
"widget": {
"type": "tsm-pdf-preview",
"notitle": true
},
"config": {
"canDownloadFile": true,
"hiddenWhenInserted": false,
"hiddenWhoInserted": false,
"hiddenAttachmentTypeName": false,
"hiddenDeleteAttachment": false,
"hiddenSizeUnit": false,
"enableShowProtocol": true,
"forceEnableDetail": false,
"firstShowThenGenerate": true,
"formData": "${$value}"
}
}
Inputs
Button Appearance
Key: buttonAppearance
Name: Button Appearance
Description: Defines the visual style of the button (e.g., outlined, text, raised).
Default: "p-button p-button-text"
Button shape
Key: buttonShape
Name: Button shape
Description: Rounded shape renders a labeled button as a pill. An icon-only button becomes fully circular.
Default: "default"
Button Severity
Key: buttonSeverity
Name: Button Severity
Description: Defines the button color scheme based on its importance (e.g., Success for download).
Default: "p-button-plain"
Optional CSS class
Key: buttonCustomCssClass
Name: Optional CSS class
Description: An optional CSS class to modify the style of this component. <span class="font-semibold">Examples:</span> <code>text-2xl bg-red-500 flex w-full gap-2 flex-col p-4</code>
Default: null
Optional icon
Key: buttonIconCssClass
Name: Optional icon
Description: Icon CSS class for the button. Example: tsm-icon-file-pdf
Default: "tsm-icon-file-pdf"
Spel script
Key: spelScript
Name: Spel script
Description: Spel script that expands the context when generating a log.
Default: null
Script data context (SPEL) for pdf generation
Key: spelScriptData
Name: Script data context (SPEL) for pdf generation
Default: {}
Name of the button to preview the pdf
Key: previewPdfButton
Name: Name of the button to preview the pdf
Default: null
Name of the button to print the pdf
Key: printPdfButton
Name: Name of the button to print the pdf
Default: null
Name of the button to download the pdf
Key: downloadPdfButton
Name: Name of the button to download the pdf
Default: null
File name used when downloading the pdf
Key: downloadPdfName
Name: File name used when downloading the pdf
Default: null
Examples
Curated configurations from libs/framework/fluent-forms/__fixtures__/widgets/tsm-pdf-preview/.
Each is a complete validated FluentSchema — copy & adapt for your form.
Gen button icon css class — gen-button-icon-css-class.json
Optional icon: Icon CSS class for the button. Example: tsm-icon-file-pdf
{
"type": "object",
"title": "PDF preview — Optional icon",
"description": "Optional icon: Icon CSS class for the button. Example: tsm-icon-file-pdf",
"properties": {},
"layout": [
{
"type": "layout",
"widget": {
"type": "tsm-pdf-preview",
"notitle": true
},
"config": {
"canDownloadFile": true,
"hiddenWhenInserted": false,
"hiddenWhoInserted": false,
"hiddenAttachmentTypeName": false,
"hiddenDeleteAttachment": false,
"hiddenSizeUnit": false,
"enableShowProtocol": true,
"forceEnableDetail": false,
"firstShowThenGenerate": true,
"formData": "${$value}",
"buttonIconCssClass": "p-icon-search"
}
}
]
}
Register tsm-register-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: unknown
Value:
{
"type": "string",
"title": "Register",
"widget": {
"type": "tsm-register-lov"
}
}
Inputs
Keyboard on mobile
Key: keyboardOnMobile
Name: Keyboard on mobile
Description: Sets readonly attribute for filtering input
Default: true
Show clear
Key: showClear
Name: Show clear
Description: Sets the visibility of the delete button for clearing text in the filtering input
Default: true
Show none text
Key: showNoneText
Name: Show none text
Default: true
Selection using a listing (one or more values)
Key: multiselect
Name: Selection using a listing (one or more values)
Default: false
Selection mode
Key: selectionMode
Name: Selection mode
Default: "multiple"
Multiple value storage mode
Key: returnType
Name: Multiple value storage mode
Default: "string"
Display
Key: displayField
Name: Display
Default: "name"
Value
Key: selectProperty
Name: Value
Default: "code"
Default value
Key: default
Name: Default value
Default: ""
defaultFilters
Key: defaultFilters
Name: defaultFilters
Default: []
Examples
Curated configurations from libs/framework/fluent-forms/__fixtures__/widgets/tsm-register-lov/.
Each is a complete validated FluentSchema — copy & adapt for your form.
Gen keyboard on mobile — gen-keyboard-on-mobile.json
Keyboard on mobile: Sets readonly attribute for filtering input
{
"type": "object",
"title": "Register — Keyboard on mobile",
"description": "Keyboard on mobile: Sets readonly attribute for filtering input",
"properties": {
"field": {
"type": "string",
"widget": {
"type": "tsm-register-lov"
},
"title": "Field",
"config": {
"keyboardOnMobile": false
}
}
},
"layout": [
"field"
]
}
Gen multiselect — gen-multiselect.json
Demonstrates config.multiselect = true on tsm-register-lov.
{
"type": "object",
"title": "Register — Selection using a listing (one or more values)",
"description": "Demonstrates config.multiselect = true on tsm-register-lov.",
"properties": {
"field": {
"type": "string",
"widget": {
"type": "tsm-register-lov"
},
"title": "Field",
"config": {
"multiselect": true
}
}
},
"layout": [
"field"
]
}
Gen show clear — gen-show-clear.json
Show clear: Sets the visibility of the delete button for clearing text in the filtering input
{
"type": "object",
"title": "Register — Show clear",
"description": "Show clear: Sets the visibility of the delete button for clearing text in the filtering input",
"properties": {
"field": {
"type": "string",
"widget": {
"type": "tsm-register-lov"
},
"title": "Field",
"config": {
"showClear": false
}
}
},
"layout": [
"field"
]
}
Gen show none text — gen-show-none-text.json
Demonstrates config.showNoneText = false on tsm-register-lov.
{
"type": "object",
"title": "Register — Show none text",
"description": "Demonstrates config.showNoneText = false on tsm-register-lov.",
"properties": {
"field": {
"type": "string",
"widget": {
"type": "tsm-register-lov"
},
"title": "Field",
"config": {
"showNoneText": false
}
}
},
"layout": [
"field"
]
}
Signature tsm-signature-pad-input
Signature offers the option to create a signature by signing directly on the device.
Widget Or Layout: unknown
Value:
{
"type": "string",
"title": "Signature",
"widget": {
"type": "tsm-signature-pad-input",
"notitle": true
}
}
Inputs
Title
Key: title
Name: Title
Default: ""
Width
Key: width
Name: Width
Default: 400
Height
Key: height
Name: Height
Default: 200
Default value
Key: default
Name: Default value
Default: null
Examples
Curated configurations from libs/framework/fluent-forms/__fixtures__/widgets/tsm-signature-pad-input/.
Each is a complete validated FluentSchema — copy & adapt for your form.
Gen height — gen-height.json
Demonstrates config.height = 400 on tsm-signature-pad-input.
{
"type": "object",
"title": "Signature — Height",
"description": "Demonstrates config.height = 400 on tsm-signature-pad-input.",
"properties": {
"field": {
"type": "string",
"widget": {
"type": "tsm-signature-pad-input",
"notitle": true
},
"title": "Field",
"config": {
"height": 400
}
}
},
"layout": [
"field"
]
}
Gen width — gen-width.json
Demonstrates config.width = 800 on tsm-signature-pad-input.
{
"type": "object",
"title": "Signature — Width",
"description": "Demonstrates config.width = 800 on tsm-signature-pad-input.",
"properties": {
"field": {
"type": "string",
"widget": {
"type": "tsm-signature-pad-input",
"notitle": true
},
"title": "Field",
"config": {
"width": 800
}
}
},
"layout": [
"field"
]
}
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: unknown
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.
Default: "p-button"
Button shape
Key: buttonShape
Name: Button shape
Description: Rounded shape renders a labeled button as a pill. An icon-only button becomes fully circular.
Default: "default"
Button Severity
Key: buttonSeverity
Name: Button Severity
Description: Severity defines the button's color design.
Default: "p-button-primary"
Keyboard shortcut
Key: hotkey
Name: Keyboard shortcut
Description: Global shortcut that triggers this button (e.g. Ctrl+S). Click the field and press the desired combination.
Default: null
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-col p-4
Default: ""
Optional icon
Key: customIconCssClass
Name: Optional icon
Description: This is the full icon class string to show the icon. Example: p-icon-check
Default: ""
Value
Key: valuesToSet
Name: Value
Description: Value in JSON format sent in body with POST method.
If you want to use a specific variable in your SpEL script and send its value, the structure looks like this:
{ "spelVariableName": "value" }
If you also want to send a variable from the form’s context to the script, use the following structure:
{ "spelVariableName": "${$context.form.chars.someContextVariable}" }
Default: null
Action
Key: formAction
Name: Action
Default: null
Get url
Key: getUrl
Name: Get url
Description: The URL for GET request.
Default: null
Post url
Key: postUrl
Name: Post url
Description: The URL for POST request.
Default: null
Script
Key: scriptCode
Name: Script
Default: null
Script data
Key: scriptData
Name: Script data
Description: Additional params for script evaluation
Default: null
Hide message for script error
Key: hideScriptError
Name: Hide message for script error
Default: false
Validation expression
Key: validationExpression
Name: Validation expression
Description: Validation expression. Executes after clicking button and toggles the error message.
Default: null
Validation message
Key: validationMessage
Name: Validation message
Description: Custom error message for this validation.
Default: null
Always enabled
Key: alwaysEnabled
Name: Always enabled
Description: Button will be always enabled regardless of readonly status
Default: false
successActions
Key: successActions
Name: successActions
Default: []
errorActions
Key: errorActions
Name: errorActions
Default: []
Examples
Curated configurations from libs/framework/fluent-forms/__fixtures__/widgets/dtl-submit-request-button/.
Each is a complete validated FluentSchema — copy & adapt for your form.
Gen always enabled — gen-always-enabled.json
Always enabled: Button will be always enabled regardless of readonly status
{
"type": "object",
"title": "Submit request button — Always enabled",
"description": "Always enabled: Button will be always enabled regardless of readonly status",
"properties": {
"field": {
"type": "object",
"widget": {
"type": "dtl-submit-request-button"
},
"title": "Field",
"config": {
"alwaysEnabled": true
}
}
},
"layout": [
"field"
]
}
Gen custom css class — gen-custom-css-class.json
Additional CSS class: 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-col p-4
{
"type": "object",
"title": "Submit request button — Additional CSS class",
"description": "Additional CSS class: 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-col p-4",
"properties": {
"field": {
"type": "object",
"widget": {
"type": "dtl-submit-request-button"
},
"title": "Field",
"config": {
"customCssClass": "tsm-custom-class"
}
}
},
"layout": [
"field"
]
}
Gen custom icon css class — gen-custom-icon-css-class.json
Optional icon: This is the full icon class string to show the icon. Example: p-icon-check
{
"type": "object",
"title": "Submit request button — Optional icon",
"description": "Optional icon: This is the full icon class string to show the icon. Example: p-icon-check",
"properties": {
"field": {
"type": "object",
"widget": {
"type": "dtl-submit-request-button"
},
"title": "Field",
"config": {
"customIconCssClass": "p-icon-search"
}
}
},
"layout": [
"field"
]
}
Gen hide script error — gen-hide-script-error.json
Demonstrates config.hideScriptError = true on dtl-submit-request-button.
{
"type": "object",
"title": "Submit request button — Hide message for script error",
"description": "Demonstrates config.hideScriptError = true on dtl-submit-request-button.",
"properties": {
"field": {
"type": "object",
"widget": {
"type": "dtl-submit-request-button"
},
"title": "Field",
"config": {
"hideScriptError": true
}
}
},
"layout": [
"field"
]
}
User register listing tsm-user-defined-list-widget
Displays a list of user values.
Widget Or Layout: unknown
Value:
{
"type": "layout",
"title": "User register listing",
"widget": {
"type": "tsm-user-defined-list-widget"
},
"config": {
"pageSize": 10
}
}
Inputs
Register
Key: registerCode
Name: Register
Description: The code of the register to display. Button privileges follow the register setup: by default Config.UserRegisters.Values.Add / .View / .Edit / .Delete / .Export, and when the register has its own permissions enabled, its code is inserted after Values (e.g. Config.UserRegisters.Values.MyRegister.Edit).
Default: null
Hide Button Section
Key: hideButtonGroup
Name: Hide Button Section
Description: Hides the button section.
exportPriv
Key: exportPriv
Name: exportPriv
Default: null
hideCreateButton
Key: hideCreateButton
Name: hideCreateButton
Default: false
hideCopyButton
Key: hideCopyButton
Name: hideCopyButton
Default: false
showPageTitle
Key: showPageTitle
Name: showPageTitle
Default: true
Additional Context Data
Key: externalData
Name: Additional Context Data
Description: Specifies additional contextual data in the form of a JSON object for creating a new record in this listing, which is passed to the form context.
Page Size
Key: pageSize
Name: Page Size
Description: Number of rows displayed on one page.
Table Height
Key: scrollHeight
Name: Table Height
Description: The custom height is applied only when the Table / TreeTable is in scrollable mode, contains more than 6 records, and the total height of all rows on the page exceeds the custom height value.
If the custom height is larger than the total height of the rows on the page, the Table / TreeTable automatically reduces its height to avoid empty space.
In Full Screen mode, the custom height setting is ignored. The Table / TreeTable uses a flex configuration which automatically manages the final height.
The height can be specified in these units: px, em, rem, vh.
Sample: 500px
Table Data View Mode
Key: dataViewMode
Name: Table Data View Mode
Description: "Table with scroll" keeps original column widths and a horizontal scrollbar. "FullScreen table" adjusts column widths to the window size.
Listing Type
Key: listingType
Name: Listing Type
Description: Specifies which listing type is used for display.
Listing Profile
Key: profileId
Name: Listing Profile
Description: Specifies the listing profile, which defines columns, order, and other display settings.
Listing Profile Category
Key: profileCategory
Name: Listing Profile Category
Description: Name of the category from which profiles can be selected.
Output Context Key
Key: outputContextKey
Name: Output Context Key
Description: Key under which this table's selection is exposed in the form context as $outputContext.<key> (e.g. ticket, order, task). Contains selectedEntity (the selected row) and selectedIds (IDs across all pages). Empty = legacy behavior (the selected row is written directly to $outputContext).
Expose selected entities (selectedEntities)
Key: exposeSelectedEntities
Name: Expose selected entities (selectedEntities)
Description: In addition to selectedIds, also expose selectedEntities — the full rows, but for the CURRENT page only. Off by default: heavier payload than an array of IDs. Use selectedIds to work with the cross-page selection.
Hide Export Button
Key: showExport
Name: Hide Export Button
Description: Hides the export button.
Hide Filter
Key: showFilters
Name: Hide Filter
Description: Hides the listing filters.
Hide Refresh Button
Key: showRefresh
Name: Hide Refresh Button
Description: Hides the refresh button.
Hide Paginator
Key: showPaginator
Name: Hide Paginator
Description: Hides the listing pagination.
Hide Columns Manager
Key: showManagerColumns
Name: Hide Columns Manager
Description: Hides the columns manager.
Hide Profiles
Key: showProfiles
Name: Hide Profiles
Description: Hides the listing profiles.
Hide Sort Manager
Key: showManagerSort
Name: Hide Sort Manager
Description: Hides the sort manager.
Hide Color Manager
Key: showManagerColor
Name: Hide Color Manager
Description: Hides the color manager.
Hide Listing Config
Key: showListingConfig
Name: Hide Listing Config
Description: Hides the listing configuration.
Hide Data View Mode
Key: hiddenDataViewMode
Name: Hide Data View Mode
Description: Hides the option to switch between table and kanban view.
Mobile: tap selects the record
Key: mobileClickSelection
Name: Mobile: tap selects the record
Description: On mobile, tapping a card selects the record instead of opening its detail. Has no effect on desktop.
Disable Sticky Header
Key: scrollable
Name: Disable Sticky Header
Description: Disables the fixed table header while scrolling.
TQL WHERE Extension
Key: extendTqlWhere
Name: TQL WHERE Extension
Description: Adds a WHERE condition in TQL. Format: COLUMN_NAME OPERATOR VALUE.
TQL Sorting
Key: externalTqlSort
Name: TQL Sorting
Description: Modifies the default sorting in TQL. Format: COLUMN_NAME ASC/DESC.
TQL Sorting for Nested Tables
Key: externalTqlSortForNested
Name: TQL Sorting for Nested Tables
Description: Modifies the default sorting for nested tables in TQL. Format: COLUMN_NAME ASC/DESC.
TQL Query Params
Key: tqlQueryParams
Name: TQL Query Params
Description: Adds query parameters to the TQL request.
Filters
Key: filters
Name: Filters
Description: Allows defining filters for the data displayed in the list.
Examples
Curated configurations from libs/framework/fluent-forms/__fixtures__/widgets/tsm-user-defined-list-widget/.
Each is a complete validated FluentSchema — copy & adapt for your form.
Gen hide copy button — gen-hide-copy-button.json
Demonstrates config.hideCopyButton = true on tsm-user-defined-list-widget.
{
"type": "object",
"title": "User register listing — hideCopyButton",
"description": "Demonstrates config.hideCopyButton = true on tsm-user-defined-list-widget.",
"properties": {},
"layout": [
{
"type": "layout",
"widget": {
"type": "tsm-user-defined-list-widget"
},
"config": {
"pageSize": 10,
"hideCopyButton": true
}
}
]
}
Gen hide create button — gen-hide-create-button.json
Demonstrates config.hideCreateButton = true on tsm-user-defined-list-widget.
{
"type": "object",
"title": "User register listing — hideCreateButton",
"description": "Demonstrates config.hideCreateButton = true on tsm-user-defined-list-widget.",
"properties": {},
"layout": [
{
"type": "layout",
"widget": {
"type": "tsm-user-defined-list-widget"
},
"config": {
"pageSize": 10,
"hideCreateButton": true
}
}
]
}
Gen show page title — gen-show-page-title.json
Demonstrates config.showPageTitle = false on tsm-user-defined-list-widget.
{
"type": "object",
"title": "User register listing — showPageTitle",
"description": "Demonstrates config.showPageTitle = false on tsm-user-defined-list-widget.",
"properties": {},
"layout": [
{
"type": "layout",
"widget": {
"type": "tsm-user-defined-list-widget"
},
"config": {
"pageSize": 10,
"showPageTitle": false
}
}
]
}
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: unknown
Value:
{
"type": "string",
"title": "Variable",
"widget": {
"type": "variable",
"hidden": true
}
}
Inputs
Default value
Key: default
Name: Default value
Description: The default value for this component. If the component does not contain a value, then this default value will be displayed. If the component contains a value, then the displaying of the default value is controlled by attribute "The way of storage"
Default: null
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: unknown
Value:
{
"type": "string",
"title": "Java example",
"widget": {
"type": "monaco-editor"
},
"config": {
"type": "string",
"language": "java",
"widgetHeight": "200px"
}
}
Inputs
Default value
Key: default
Name: Default value
Description: The default value for this component. If the component does not contain a value, then this default value will be displayed. If the component contains a value, then the displaying of the default value is controlled by attribute "The way of storage"
Default: ""
Language
Key: language
Name: Language
Description: Language used in this component
Default: null
JSON as object
Key: jsonObject
Name: JSON as object
Description: Save as valid json, not string.
Default: false
Inline
Key: inline
Name: Inline
Description: Inline display of the editor. If checked, number lines, code folding and scrollbar will be disabled.
Default: false
Resizable
Key: resizable
Name: Resizable
Description: Tick the checkbox if you want to allow users to resize this component.
Default: true
Widget height
Key: widgetHeight
Name: Widget height
Description: The height of this widget in pixels. E.g.: 200px
Default: null
Examples
Curated configurations from libs/framework/fluent-forms/__fixtures__/widgets/dtl-form-input-monaco/.
Each is a complete validated FluentSchema — copy & adapt for your form.
Gen inline — gen-inline.json
Inline: Inline display of the editor. If checked, number lines, code folding and scrollbar will be disabled.
{
"type": "object",
"title": "Monaco editor — Inline",
"description": "Inline: Inline display of the editor. If checked, number lines, code folding and scrollbar will be disabled.",
"properties": {
"field": {
"type": "string",
"widget": {
"type": "monaco-editor"
},
"config": {
"type": "string",
"language": "java",
"widgetHeight": "200px",
"inline": true
},
"title": "Field"
}
},
"layout": [
"field"
]
}
Gen json object — gen-json-object.json
JSON as object: Save as valid json, not string.
{
"type": "object",
"title": "Monaco editor — JSON as object",
"description": "JSON as object: Save as valid json, not string.",
"properties": {
"field": {
"type": "string",
"widget": {
"type": "monaco-editor"
},
"config": {
"type": "string",
"language": "java",
"widgetHeight": "200px",
"jsonObject": true
},
"title": "Field"
}
},
"layout": [
"field"
]
}
Gen resizable — gen-resizable.json
Resizable: Tick the checkbox if you want to allow users to resize this component.
{
"type": "object",
"title": "Monaco editor — Resizable",
"description": "Resizable: Tick the checkbox if you want to allow users to resize this component.",
"properties": {
"field": {
"type": "string",
"widget": {
"type": "monaco-editor"
},
"config": {
"type": "string",
"language": "java",
"widgetHeight": "200px",
"resizable": false
},
"title": "Field"
}
},
"layout": [
"field"
]
}
Object layout dtl-fluent-object
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: unknown
Value:
{
"type": "object",
"properties": {},
"widget": {
"type": "dtl-fluent-object"
}
}
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")
Default: false
Compact Mode
Key: compactMode
Name: Compact Mode
Description: Compact Mode
Default: false
Examples
Curated configurations from libs/framework/fluent-forms/__fixtures__/widgets/dtl-fluent-object/.
Each is a complete validated FluentSchema — copy & adapt for your form.
Gen compact mode — gen-compact-mode.json
Compact Mode: Compact Mode
{
"type": "object",
"title": "Object layout — Compact Mode",
"description": "Compact Mode: Compact Mode",
"properties": {
"field": {
"type": "object",
"properties": {},
"widget": {
"type": "dtl-fluent-object"
}
}
},
"layout": [
{
"propertyKey": "field",
"type": "layout",
"items": [],
"widget": {
"type": "dtl-fluent-object"
},
"config": {
"compactMode": true
}
}
]
}
Gen input borders showing — gen-input-borders-showing.json
Show bottom border of inputs: Show bottom border of inputs even if form is in read-only state (only works for inputs with the title position set to "Top")
{
"type": "object",
"title": "Object layout — Show bottom border of inputs",
"description": "Show bottom border of inputs: Show bottom border of inputs even if form is in read-only state (only works for inputs with the title position set to \"Top\")",
"properties": {
"field": {
"type": "object",
"properties": {},
"widget": {
"type": "dtl-fluent-object"
}
}
},
"layout": [
{
"propertyKey": "field",
"type": "layout",
"items": [],
"widget": {
"type": "dtl-fluent-object"
},
"config": {
"inputBordersShowing": true
}
}
]
}
Array dtl-fluent-array
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: unknown
Value:
{
"type": "array",
"widget": {
"type": "dtl-fluent-array"
}
}
Inputs
Read only
Key: readonly
Name: Read only
Default: false
Default number of objects
Key: numberOfRows
Name: Default number of objects
Description: "value": displayed number of objects
"onlyForEmpty" = true: displayed set number of objects only if no data is stored in the array
"onlyForEmpty" = false: always displayed set number of objects (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
Default: null
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: unknown
Value:
{
"type": "string",
"title": "Monaco Diff Editor",
"widget": {
"type": "monaco-diff-editor"
},
"config": {
"type": "string",
"language": "json",
"widgetHeight": "200px"
}
}
Inputs
Default value
Key: default
Name: Default value
Description: The default value for this component. If the component does not contain a value, then this default value will be displayed. If the component contains a value, then the displaying of the default value is controlled by attribute "The way of storage"
Default: ""
Language
Key: language
Name: Language
Description: Language used in this component
Default: null
JSON as object
Key: jsonObject
Name: JSON as object
Description: Save as valid json, not string.
Default: false
Inline
Key: inline
Name: Inline
Description: Inline display of the editor. If checked, number lines, code folding and scrollbar will be disabled.
Default: false
Resizable
Key: resizable
Name: Resizable
Description: Tick the checkbox if you want to allow users to resize this component.
Default: true
Swap old and new value
Key: swap
Name: Swap old and new value
Description: Swap old and new editor position. By default the editor for an old value is on the left side.
Default: false
Enable change revert
Key: enableChangeRevert
Name: Enable change revert
Description: Allow returning the block to its original value by clicking.
Default: true
Widget height
Key: widgetHeight
Name: Widget height
Description: The height of this widget in pixels. E.g.: 200px
Default: null
Original
Key: original
Name: Original
Description: Original
Default: null
Examples
Curated configurations from libs/framework/fluent-forms/__fixtures__/widgets/dtl-form-input-monaco-diff/.
Each is a complete validated FluentSchema — copy & adapt for your form.
Gen enable change revert — gen-enable-change-revert.json
Enable change revert: Allow returning the block to its original value by clicking.
{
"type": "object",
"title": "Monaco Diff Editor — Enable change revert",
"description": "Enable change revert: Allow returning the block to its original value by clicking.",
"properties": {
"field": {
"type": "string",
"widget": {
"type": "monaco-diff-editor"
},
"config": {
"type": "string",
"language": "json",
"widgetHeight": "200px",
"enableChangeRevert": false
},
"title": "Field"
}
},
"layout": [
"field"
]
}
Gen inline — gen-inline.json
Inline: Inline display of the editor. If checked, number lines, code folding and scrollbar will be disabled.
{
"type": "object",
"title": "Monaco Diff Editor — Inline",
"description": "Inline: Inline display of the editor. If checked, number lines, code folding and scrollbar will be disabled.",
"properties": {
"field": {
"type": "string",
"widget": {
"type": "monaco-diff-editor"
},
"config": {
"type": "string",
"language": "json",
"widgetHeight": "200px",
"inline": true
},
"title": "Field"
}
},
"layout": [
"field"
]
}
Gen json object — gen-json-object.json
JSON as object: Save as valid json, not string.
{
"type": "object",
"title": "Monaco Diff Editor — JSON as object",
"description": "JSON as object: Save as valid json, not string.",
"properties": {
"field": {
"type": "string",
"widget": {
"type": "monaco-diff-editor"
},
"config": {
"type": "string",
"language": "json",
"widgetHeight": "200px",
"jsonObject": true
},
"title": "Field"
}
},
"layout": [
"field"
]
}
Gen resizable — gen-resizable.json
Resizable: Tick the checkbox if you want to allow users to resize this component.
{
"type": "object",
"title": "Monaco Diff Editor — Resizable",
"description": "Resizable: Tick the checkbox if you want to allow users to resize this component.",
"properties": {
"field": {
"type": "string",
"widget": {
"type": "monaco-diff-editor"
},
"config": {
"type": "string",
"language": "json",
"widgetHeight": "200px",
"resizable": false
},
"title": "Field"
}
},
"layout": [
"field"
]
}
Gen swap — gen-swap.json
Swap old and new value: Swap old and new editor position. By default the editor for an old value is on the left side.
{
"type": "object",
"title": "Monaco Diff Editor — Swap old and new value",
"description": "Swap old and new value: Swap old and new editor position. By default the editor for an old value is on the left side.",
"properties": {
"field": {
"type": "string",
"widget": {
"type": "monaco-diff-editor"
},
"config": {
"type": "string",
"language": "json",
"widgetHeight": "200px",
"swap": true
},
"title": "Field"
}
},
"layout": [
"field"
]
}
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: unknown
Value:
{
"type": "array",
"widget": {
"type": "dtl-fluent-accordion-array"
},
"items": {},
"config": {}
}
Inputs
Read only
Key: readonly
Name: Read only
Default: false
Default value
Key: default
Name: Default value
Default: null
Nadpis - ukazatel dat
Key: headerPointer
Name: Nadpis - ukazatel dat
Description: For example: .object.text
Default: ""
Podnadpis - ukazatel dat
Key: subheaderPointer
Name: Podnadpis - ukazatel dat
Description: For example: .object.text
Default: ""
Validation message for accordion content
Key: innerFormValidationError
Name: Validation message for accordion content
Description: This validation message will appear in the accordion row header when the content is available and invalid
Default: ""
Automatic Create Field tsm-automatic-create-field-widget
Field with automatic creation option for Entity Specification.
Widget Or Layout: unknown
Value:
{
"type": "string",
"title": "Entity Specification",
"widget": {
"type": "tsm-automatic-create-field-widget",
"showField": true,
"fieldName": "",
"fieldDescription": "",
"defaultFilters": []
}
}
Inputs
Field name
Key: fieldName
Name: Field name
Default: ""
Field description
Key: fieldDescription
Name: Field description
Default: ""
Description of the "Create automatically" button
Key: createAutomaticallyButtonDescription
Name: Description of the "Create automatically" button
Default: ""
Show field by default
Key: showField
Name: Show field by default
Default: true
Toggle off value
Key: toggleOffValue
Name: Toggle off value
Default: null
Filters
Key: defaultFilters
Name: Filters
Examples
Curated configurations from libs/framework/fluent-forms/__fixtures__/widgets/tsm-automatic-create-field-widget/.
Each is a complete validated FluentSchema — copy & adapt for your form.
Gen field description — gen-field-description.json
Demonstrates config.fieldDescription = "name" on tsm-automatic-create-field-widget.
{
"type": "object",
"title": "Automatic Create Field — Field description",
"description": "Demonstrates config.fieldDescription = \"name\" on tsm-automatic-create-field-widget.",
"properties": {
"field": {
"type": "string",
"widget": {
"type": "tsm-automatic-create-field-widget",
"showField": true,
"fieldName": "",
"fieldDescription": "",
"defaultFilters": []
},
"title": "Field",
"config": {
"fieldDescription": "name"
}
}
},
"layout": [
"field"
]
}
Gen field name — gen-field-name.json
Demonstrates config.fieldName = "name" on tsm-automatic-create-field-widget.
{
"type": "object",
"title": "Automatic Create Field — Field name",
"description": "Demonstrates config.fieldName = \"name\" on tsm-automatic-create-field-widget.",
"properties": {
"field": {
"type": "string",
"widget": {
"type": "tsm-automatic-create-field-widget",
"showField": true,
"fieldName": "",
"fieldDescription": "",
"defaultFilters": []
},
"title": "Field",
"config": {
"fieldName": "name"
}
}
},
"layout": [
"field"
]
}
Gen show field — gen-show-field.json
Demonstrates config.showField = false on tsm-automatic-create-field-widget.
{
"type": "object",
"title": "Automatic Create Field — Show field by default",
"description": "Demonstrates config.showField = false on tsm-automatic-create-field-widget.",
"properties": {
"field": {
"type": "string",
"widget": {
"type": "tsm-automatic-create-field-widget",
"showField": true,
"fieldName": "",
"fieldDescription": "",
"defaultFilters": []
},
"title": "Field",
"config": {
"showField": false
}
}
},
"layout": [
"field"
]
}
Checklist tsm-checklist
To-do list with the option to upload items from a register
Widget Or Layout: unknown
Value:
{
"type": "object",
"widget": {
"type": "tsm-checklist"
}
}
Inputs
Title
Key: title
Name: Title
Default: ""
Default value
Key: default
Name: Default value
Default: []
Checklist filter
Key: checklistFilter
Name: Checklist filter
Default: true
Examples
Curated configurations from libs/framework/fluent-forms/__fixtures__/widgets/tsm-checklist/.
Each is a complete validated FluentSchema — copy & adapt for your form.
Gen checklist filter — gen-checklist-filter.json
Demonstrates config.checklistFilter = false on tsm-checklist.
{
"type": "object",
"title": "Checklist — Checklist filter",
"description": "Demonstrates config.checklistFilter = false on tsm-checklist.",
"properties": {
"field": {
"type": "object",
"widget": {
"type": "tsm-checklist"
},
"title": "Field",
"config": {
"checklistFilter": false
}
}
},
"layout": [
"field"
]
}
Expression editor dtl-fluent-expression-editor
The expression editor container wraps a child component with the ability to toggle between a normal widget view and a JEXL/SpEL expression editor. Drag any form widget into it to make that widget switchable to an expression.
Widget Or Layout: unknown
Value:
{
"type": "string",
"widget": {
"type": "dtl-fluent-expression-editor"
}
}
Inputs
Default expression type
Key: defaultType
Name: Default expression type
Default: "spel"
Expression
Key: isExpression
Name: Expression
Description: Tick the checkbox if you wish to enable the expression editor.
Default: false
Hide change button
Key: hideChangeButton
Name: Hide change button
Default: false
Height
Key: widgetHeight
Name: Height
Description: Height must be specified including units (10px / 5em / 2vh, etc.)
Default: "50px"
Font size
Key: fontSize
Name: Font size
Default: null
Line numbers
Key: lineNumbers
Name: Line numbers
Default: null
Render whitespace
Key: renderWhitespace
Name: Render whitespace
Default: null
Auto-close brackets
Key: autoClosingBrackets
Name: Auto-close brackets
Default: null
Match brackets
Key: matchBrackets
Name: Match brackets
Default: null
Show minimap
Key: enabled
Name: Show minimap
Default: null
Automatic layout
Key: automaticLayout
Name: Automatic layout
Default: null
Scroll beyond last line
Key: scrollBeyondLastLine
Name: Scroll beyond last line
Default: null
Tab completion
Key: tabCompletion
Name: Tab completion
Default: null
Quick suggestions (code)
Key: other
Name: Quick suggestions (code)
Default: null
Quick suggestions (comments)
Key: comments
Name: Quick suggestions (comments)
Default: null
Quick suggestions (strings)
Key: strings
Name: Quick suggestions (strings)
Default: null
Examples
Curated configurations from libs/framework/fluent-forms/__fixtures__/widgets/dtl-fluent-expression-editor/.
Each is a complete validated FluentSchema — copy & adapt for your form.
Gen hide change button — gen-hide-change-button.json
Demonstrates config.hideChangeButton = true on dtl-fluent-expression-editor.
{
"type": "object",
"title": "Expression editor — Hide change button",
"description": "Demonstrates config.hideChangeButton = true on dtl-fluent-expression-editor.",
"properties": {
"field": {
"type": "string",
"title": "Text",
"widget": {
"notitle": true,
"type": "text"
}
}
},
"layout": [
{
"propertyKey": "field",
"type": "layout",
"items": [
"field"
],
"widget": {
"type": "dtl-fluent-expression-editor"
},
"title": "Výraz",
"localizationData": {
"en": {
"title": "Expression",
"widget": {
"tooltip": "",
"placeholder": ""
}
}
},
"config": {
"spelModule": "${$context.spelModule}",
"editorOptions": {
"fontSize": 12,
"minimap": {
"enabled": false
},
"automaticLayout": true,
"autoClosingBrackets": "always",
"matchBrackets": "always",
"renderWhitespace": "none",
"scrollBeyondLastLine": false,
"lineNumbers": "on",
"quickSuggestions": {
"other": true,
"comments": false,
"strings": true
},
"tabCompletion": "on"
},
"hideChangeButton": true
}
}
]
}
Gen is expression — gen-is-expression.json
Expression: Tick the checkbox if you wish to enable the expression editor.
{
"type": "object",
"title": "Expression editor — Expression",
"description": "Expression: Tick the checkbox if you wish to enable the expression editor.",
"properties": {
"field": {
"type": "string",
"title": "Text",
"widget": {
"notitle": true,
"type": "text"
}
}
},
"layout": [
{
"propertyKey": "field",
"type": "layout",
"items": [
"field"
],
"widget": {
"type": "dtl-fluent-expression-editor"
},
"title": "Výraz",
"localizationData": {
"en": {
"title": "Expression",
"widget": {
"tooltip": "",
"placeholder": ""
}
}
},
"config": {
"spelModule": "${$context.spelModule}",
"editorOptions": {
"fontSize": 12,
"minimap": {
"enabled": false
},
"automaticLayout": true,
"autoClosingBrackets": "always",
"matchBrackets": "always",
"renderWhitespace": "none",
"scrollBeyondLastLine": false,
"lineNumbers": "on",
"quickSuggestions": {
"other": true,
"comments": false,
"strings": true
},
"tabCompletion": "on"
},
"isExpression": true
}
}
]
}
translation.shared.labels tsm-data-tags
translation.shared.labels
Widget Or Layout: unknown
Value:
{
"type": "string",
"title": "translation.shared.labels",
"widget": {
"type": "tsm-data-tags"
}
}