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.
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": {
"field": {
"type": "layout",
"title": "Field",
"widget": {
"type": "tsm-display-text",
"formatText": true
}
}
},
"layout": [
"field"
]
}
Gen text — gen-text.json
Demonstrates widget.text = "exampleValue" on tsm-display-text.
{
"type": "object",
"title": "Text to display — Text",
"description": "Demonstrates widget.text = \"exampleValue\" on tsm-display-text.",
"properties": {
"field": {
"type": "layout",
"title": "Field",
"widget": {
"type": "tsm-display-text",
"text": "exampleValue"
}
}
},
"layout": [
"field"
]
}
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 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
Always enabled
Key: alwaysEnabled
Name: Always enabled
Default: false
Examples
Curated configurations from libs/framework/fluent-forms/__fixtures__/widgets/dtl-button/.
Each is a complete validated FluentSchema — copy & adapt for your form.
Gen button appearance — gen-button-appearance.json
Button Appearance: Appearance defines the type of graphical design of the button.
{
"type": "object",
"title": "Button — Button Appearance",
"description": "Button Appearance: Appearance defines the type of graphical design of the button.",
"properties": {
"field": {
"type": "layout",
"title": "Field",
"widget": {
"type": "dtl-button",
"buttonAppearance": "exampleValue"
}
}
},
"layout": [
"field"
]
}
Gen button layout — gen-button-layout.json
Button layout: Controls the placement of the icon and label.
{
"type": "object",
"title": "Button — Button layout",
"description": "Button layout: Controls the placement of the icon and label.",
"properties": {
"field": {
"type": "layout",
"title": "Field",
"widget": {
"type": "dtl-button",
"buttonLayout": "exampleValue"
}
}
},
"layout": [
"field"
]
}
Gen button severity — gen-button-severity.json
Button Severity: Severity defines the button's color design.
{
"type": "object",
"title": "Button — Button Severity",
"description": "Button Severity: Severity defines the button's color design.",
"properties": {
"field": {
"type": "layout",
"title": "Field",
"widget": {
"type": "dtl-button",
"buttonSeverity": "exampleValue"
}
}
},
"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": "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": "layout",
"title": "Field",
"widget": {
"type": "dtl-button",
"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": "Button — Optional icon",
"description": "Optional icon: This is the full icon class string to show the icon. Example: p-icon-check",
"properties": {
"field": {
"type": "layout",
"title": "Field",
"widget": {
"type": "dtl-button",
"customIconCssClass": "tsm-custom-class"
}
}
},
"layout": [
"field"
]
}
Gen hotkey — gen-hotkey.json
Keyboard shortcut: Global shortcut that triggers this button (e.g. Ctrl+S). Click the field and press the desired combination.
{
"type": "object",
"title": "Button — Keyboard shortcut",
"description": "Keyboard shortcut: Global shortcut that triggers this button (e.g. Ctrl+S). Click the field and press the desired combination.",
"properties": {
"field": {
"type": "layout",
"title": "Field",
"widget": {
"type": "dtl-button",
"hotkey": "exampleValue"
}
}
},
"layout": [
"field"
]
}
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 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 button appearance — gen-button-appearance.json
Button Appearance: Appearance defines the type of graphical design of the button.
{
"type": "object",
"title": "Clipboard button — Button Appearance",
"description": "Button Appearance: Appearance defines the type of graphical design of the button.",
"properties": {
"field": {
"type": "layout",
"title": "Field",
"widget": {
"type": "dtl-clipboard-button",
"buttonAppearance": "exampleValue"
}
}
},
"layout": [
"field"
]
}
Gen button severity — gen-button-severity.json
Button Severity: Severity defines the button's color design.
{
"type": "object",
"title": "Clipboard button — Button Severity",
"description": "Button Severity: Severity defines the button's color design.",
"properties": {
"field": {
"type": "layout",
"title": "Field",
"widget": {
"type": "dtl-clipboard-button",
"buttonSeverity": "exampleValue"
}
}
},
"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": "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": {
"field": {
"type": "layout",
"title": "Field",
"widget": {
"type": "dtl-clipboard-button",
"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": "Clipboard button — Optional icon",
"description": "Optional icon: This is the full icon class string to show the icon. Example: p-icon-check",
"properties": {
"field": {
"type": "layout",
"title": "Field",
"widget": {
"type": "dtl-clipboard-button",
"customIconCssClass": "tsm-custom-class"
}
}
},
"layout": [
"field"
]
}
Gen hotkey — gen-hotkey.json
Keyboard shortcut: Global shortcut that triggers this button (e.g. Ctrl+S). Click the field and press the desired combination.
{
"type": "object",
"title": "Clipboard button — Keyboard shortcut",
"description": "Keyboard shortcut: Global shortcut that triggers this button (e.g. Ctrl+S). Click the field and press the desired combination.",
"properties": {
"field": {
"type": "layout",
"title": "Field",
"widget": {
"type": "dtl-clipboard-button",
"hotkey": "exampleValue"
}
}
},
"layout": [
"field"
]
}
Gen value — gen-value.json
Demonstrates widget.value = "exampleValue" on dtl-clipboard-button.
{
"type": "object",
"title": "Clipboard button — The value to save to the clipboard",
"description": "Demonstrates widget.value = \"exampleValue\" on dtl-clipboard-button.",
"properties": {
"field": {
"type": "layout",
"title": "Field",
"widget": {
"type": "dtl-clipboard-button",
"value": "exampleValue"
}
}
},
"layout": [
"field"
]
}
Config Type Select tsm-config-type-lov
Selection of a configuration type from a dropdown list.
Widget Or Layout: unknown
Value:
{
"type": "object",
"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"
]
}
Gen select property — gen-select-property.json
Demonstrates widget.selectProperty = "exampleValue" on tsm-config-type-lov.
{
"type": "object",
"title": "Config Type Select — Value",
"description": "Demonstrates widget.selectProperty = \"exampleValue\" on tsm-config-type-lov.",
"properties": {
"field": {
"type": "object",
"title": "Field",
"widget": {
"type": "tsm-config-type-lov",
"selectProperty": "exampleValue"
}
}
},
"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
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 always save to chars — gen-always-save-to-chars.json
Always save attachments to form: When ownerId and ownerType are filled in, the attachments are saved both to the file system and to the characteristics (only metadata).
{
"type": "object",
"title": "File upload — Always save attachments to form",
"description": "Always save attachments to form: When ownerId and ownerType are filled in, the attachments are saved both to the file system and to the characteristics (only metadata).",
"properties": {
"field": {
"type": "object",
"title": "Field",
"widget": {
"type": "dtl-file-upload-widget",
"alwaysSaveToChars": "exampleValue"
}
}
},
"layout": [
"field"
]
}
Gen owner id — gen-owner-id.json
Demonstrates widget.ownerId = "exampleValue" on dtl-file-upload-widget.
{
"type": "object",
"title": "File upload — Owner Id",
"description": "Demonstrates widget.ownerId = \"exampleValue\" on dtl-file-upload-widget.",
"properties": {
"field": {
"type": "object",
"title": "Field",
"widget": {
"type": "dtl-file-upload-widget",
"ownerId": "exampleValue"
}
}
},
"layout": [
"field"
]
}
Gen owner type — gen-owner-type.json
Demonstrates widget.ownerType = "exampleValue" on dtl-file-upload-widget.
{
"type": "object",
"title": "File upload — Owner type",
"description": "Demonstrates widget.ownerType = \"exampleValue\" on dtl-file-upload-widget.",
"properties": {
"field": {
"type": "object",
"title": "Field",
"widget": {
"type": "dtl-file-upload-widget",
"ownerType": "exampleValue"
}
}
},
"layout": [
"field"
]
}
Gen parent priv — gen-parent-priv.json
Demonstrates widget.parentPriv = "exampleValue" on dtl-file-upload-widget.
{
"type": "object",
"title": "File upload — Parent privilege",
"description": "Demonstrates widget.parentPriv = \"exampleValue\" on dtl-file-upload-widget.",
"properties": {
"field": {
"type": "object",
"title": "Field",
"widget": {
"type": "dtl-file-upload-widget",
"parentPriv": "exampleValue"
}
}
},
"layout": [
"field"
]
}
Gen save ids to value — gen-save-ids-to-value.json
Save attachment IDs to value: 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.
{
"type": "object",
"title": "File upload — Save attachment IDs to value",
"description": "Save attachment IDs to value: 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.",
"properties": {
"field": {
"type": "object",
"title": "Field",
"widget": {
"type": "dtl-file-upload-widget",
"saveIdsToValue": "exampleValue"
}
}
},
"layout": [
"field"
]
}
Gen try default value — gen-try-default-value.json
Try default value: If the default value is set, it is automatically filled in the form.
{
"type": "object",
"title": "File upload — Try default value",
"description": "Try default value: If the default value is set, it is automatically filled in the form.",
"properties": {
"field": {
"type": "object",
"title": "Field",
"widget": {
"type": "dtl-file-upload-widget",
"tryDefaultValue": "exampleValue"
}
}
},
"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 attachment type code — gen-attachment-type-code.json
Demonstrates widget.attachmentTypeCode = "exampleValue" on tsm-gallery.
{
"type": "object",
"title": "Gallery — Allowed attachment types",
"description": "Demonstrates widget.attachmentTypeCode = \"exampleValue\" on tsm-gallery.",
"properties": {
"field": {
"type": "layout",
"title": "Field",
"widget": {
"type": "tsm-gallery",
"attachmentTypeCode": "exampleValue"
}
}
},
"layout": [
"field"
]
}
Gen compress image — gen-compress-image.json
Demonstrates widget.compressImage = true on tsm-gallery.
{
"type": "object",
"title": "Gallery — Compress image (approx 2MB)",
"description": "Demonstrates widget.compressImage = true on tsm-gallery.",
"properties": {
"field": {
"type": "layout",
"title": "Field",
"widget": {
"type": "tsm-gallery",
"compressImage": true
}
}
},
"layout": [
"field"
]
}
Gen fullscreen click image — gen-fullscreen-click-image.json
Demonstrates widget.fullscreenClickImage = true on tsm-gallery.
{
"type": "object",
"title": "Gallery — Fullscreen on click image",
"description": "Demonstrates widget.fullscreenClickImage = true on tsm-gallery.",
"properties": {
"field": {
"type": "layout",
"title": "Field",
"widget": {
"type": "tsm-gallery",
"fullscreenClickImage": true
}
}
},
"layout": [
"field"
]
}
Gen owner id — gen-owner-id.json
Demonstrates widget.ownerId = "exampleValue" on tsm-gallery.
{
"type": "object",
"title": "Gallery — Owner Id",
"description": "Demonstrates widget.ownerId = \"exampleValue\" on tsm-gallery.",
"properties": {
"field": {
"type": "layout",
"title": "Field",
"widget": {
"type": "tsm-gallery",
"ownerId": "exampleValue"
}
}
},
"layout": [
"field"
]
}
Gen owner type — gen-owner-type.json
Demonstrates widget.ownerType = "exampleValue" on tsm-gallery.
{
"type": "object",
"title": "Gallery — Owner type",
"description": "Demonstrates widget.ownerType = \"exampleValue\" on tsm-gallery.",
"properties": {
"field": {
"type": "layout",
"title": "Field",
"widget": {
"type": "tsm-gallery",
"ownerType": "exampleValue"
}
}
},
"layout": [
"field"
]
}
Gen theme — gen-theme.json
Demonstrates widget.theme = "exampleValue" on tsm-gallery.
{
"type": "object",
"title": "Gallery — Gallery theme",
"description": "Demonstrates widget.theme = \"exampleValue\" on tsm-gallery.",
"properties": {
"field": {
"type": "layout",
"title": "Field",
"widget": {
"type": "tsm-gallery",
"theme": "exampleValue"
}
}
},
"layout": [
"field"
]
}
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
}
}
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"
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
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
Default: false
Object dialog type
Key: newRecordConfig
Name: Object dialog type
Default: {"label":"","types":[],"hiddenTypes":[],"defaultType":"","createPrivilege":""}
Context Data
Key: contextData
Name: Context Data
Default: null
Pre-Script
Key: preScriptCode
Name: Pre-Script
Default: ""
Save Script
Key: scriptCode
Name: Save Script
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 button appearance — gen-button-appearance.json
Appearance: Overall button style: Basic, Raised, Text, Raised Text or Outlined
{
"type": "object",
"title": "Create Entity — Appearance",
"description": "Appearance: Overall button style: Basic, Raised, Text, Raised Text or Outlined",
"properties": {
"field": {
"type": "layout",
"title": "Field",
"widget": {
"type": "dtl-create-entity-button",
"buttonAppearance": "exampleValue"
}
}
},
"layout": [
"field"
]
}
Gen button severity — gen-button-severity.json
Severity: Button color tied to the meaning of the action (Primary, Secondary, Success, Warning, Danger, Help, Info; Plain is also available for Text appearance)
{
"type": "object",
"title": "Create Entity — Severity",
"description": "Severity: Button color tied to the meaning of the action (Primary, Secondary, Success, Warning, Danger, Help, Info; Plain is also available for Text appearance)",
"properties": {
"field": {
"type": "layout",
"title": "Field",
"widget": {
"type": "dtl-create-entity-button",
"buttonSeverity": "exampleValue"
}
}
},
"layout": [
"field"
]
}
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": {
"field": {
"type": "layout",
"title": "Field",
"widget": {
"type": "dtl-create-entity-button",
"customCssClass": "tsm-custom-class"
}
}
},
"layout": [
"field"
]
}
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": {
"field": {
"type": "layout",
"title": "Field",
"widget": {
"type": "dtl-create-entity-button",
"customIconCssClass": "tsm-custom-class"
}
}
},
"layout": [
"field"
]
}
Gen entity type — gen-entity-type.json
Demonstrates widget.entityType = "exampleValue" on dtl-create-entity-button.
{
"type": "object",
"title": "Create Entity — Entity type",
"description": "Demonstrates widget.entityType = \"exampleValue\" on dtl-create-entity-button.",
"properties": {
"field": {
"type": "layout",
"title": "Field",
"widget": {
"type": "dtl-create-entity-button",
"entityType": "exampleValue"
}
}
},
"layout": [
"field"
]
}
Gen hotkey — gen-hotkey.json
Keyboard shortcut: Global shortcut that triggers this button (e.g. Ctrl+S). Click the field and press the desired combination.
{
"type": "object",
"title": "Create Entity — Keyboard shortcut",
"description": "Keyboard shortcut: Global shortcut that triggers this button (e.g. Ctrl+S). Click the field and press the desired combination.",
"properties": {
"field": {
"type": "layout",
"title": "Field",
"widget": {
"type": "dtl-create-entity-button",
"hotkey": "exampleValue"
}
}
},
"layout": [
"field"
]
}
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 context — gen-context.json
Demonstrates widget.context = "exampleValue" on dtl-fluent-inner-form.
{
"type": "object",
"title": "Inner form — Form context",
"description": "Demonstrates widget.context = \"exampleValue\" on dtl-fluent-inner-form.",
"properties": {
"field": {
"type": "object",
"title": "Field",
"widget": {
"type": "dtl-fluent-inner-form",
"context": "exampleValue"
}
}
},
"layout": [
"field"
]
}
Gen form code — gen-form-code.json
Demonstrates widget.formCode = "exampleValue" on dtl-fluent-inner-form.
{
"type": "object",
"title": "Inner form — Form code",
"description": "Demonstrates widget.formCode = \"exampleValue\" on dtl-fluent-inner-form.",
"properties": {
"field": {
"type": "object",
"title": "Field",
"widget": {
"type": "dtl-fluent-inner-form",
"formCode": "exampleValue"
}
}
},
"layout": [
"field"
]
}
Gen inner form show disable errors — gen-inner-form-show-disable-errors.json
Demonstrates widget.innerFormShowDisableErrors = true on dtl-fluent-inner-form.
{
"type": "object",
"title": "Inner form — Disable show errors in inner form",
"description": "Demonstrates widget.innerFormShowDisableErrors = true on dtl-fluent-inner-form.",
"properties": {
"field": {
"type": "object",
"title": "Field",
"widget": {
"type": "dtl-fluent-inner-form",
"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 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
Default: ""
Template params
Key: queryParams
Name: Template params
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
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 button appearance — gen-button-appearance.json
Button appearance: Appearance defines the visual design variant of the button.
{
"type": "object",
"title": "Kibana button — Button appearance",
"description": "Button appearance: Appearance defines the visual design variant of the button.",
"properties": {
"field": {
"type": "layout",
"title": "Field",
"widget": {
"type": "dtl-kibana-button",
"buttonAppearance": "exampleValue"
}
}
},
"layout": [
"field"
]
}
Gen button layout — gen-button-layout.json
Button layout: Controls icon and title placement.
{
"type": "object",
"title": "Kibana button — Button layout",
"description": "Button layout: Controls icon and title placement.",
"properties": {
"field": {
"type": "layout",
"title": "Field",
"widget": {
"type": "dtl-kibana-button",
"buttonLayout": "exampleValue"
}
}
},
"layout": [
"field"
]
}
Gen button severity — gen-button-severity.json
Button severity: Severity defines color variant of the button.
{
"type": "object",
"title": "Kibana button — Button severity",
"description": "Button severity: Severity defines color variant of the button.",
"properties": {
"field": {
"type": "layout",
"title": "Field",
"widget": {
"type": "dtl-kibana-button",
"buttonSeverity": "exampleValue"
}
}
},
"layout": [
"field"
]
}
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": {
"field": {
"type": "layout",
"title": "Field",
"widget": {
"type": "dtl-kibana-button",
"customCssClass": "tsm-custom-class"
}
}
},
"layout": [
"field"
]
}
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": {
"field": {
"type": "layout",
"title": "Field",
"widget": {
"type": "dtl-kibana-button",
"customIconCssClass": "tsm-custom-class"
}
}
},
"layout": [
"field"
]
}
Gen hotkey — gen-hotkey.json
Keyboard shortcut: Global shortcut that triggers this button (e.g. Ctrl+S). Click the field and press the desired combination.
{
"type": "object",
"title": "Kibana button — Keyboard shortcut",
"description": "Keyboard shortcut: Global shortcut that triggers this button (e.g. Ctrl+S). Click the field and press the desired combination.",
"properties": {
"field": {
"type": "layout",
"title": "Field",
"widget": {
"type": "dtl-kibana-button",
"hotkey": "exampleValue"
}
}
},
"layout": [
"field"
]
}
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 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
Default: null
Validation expression
Key: validationExpression
Name: Validation expression
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
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 button appearance — gen-button-appearance.json
Button Appearance: Appearance defines the type of graphical design of the button.
{
"type": "object",
"title": "Submit button — Button Appearance",
"description": "Button Appearance: Appearance defines the type of graphical design of the button.",
"properties": {
"field": {
"type": "object",
"title": "Field",
"widget": {
"type": "dtl-submit-button",
"buttonAppearance": "exampleValue"
}
}
},
"layout": [
"field"
]
}
Gen button severity — gen-button-severity.json
Button Severity: Severity defines the button's color design.
{
"type": "object",
"title": "Submit button — Button Severity",
"description": "Button Severity: Severity defines the button's color design.",
"properties": {
"field": {
"type": "object",
"title": "Field",
"widget": {
"type": "dtl-submit-button",
"buttonSeverity": "exampleValue"
}
}
},
"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",
"title": "Field",
"widget": {
"type": "dtl-submit-button",
"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",
"title": "Field",
"widget": {
"type": "dtl-submit-button",
"customIconCssClass": "tsm-custom-class"
}
}
},
"layout": [
"field"
]
}
Gen hotkey — gen-hotkey.json
Keyboard shortcut: Global shortcut that triggers this button (e.g. Ctrl+S). Click the field and press the desired combination.
{
"type": "object",
"title": "Submit button — Keyboard shortcut",
"description": "Keyboard shortcut: Global shortcut that triggers this button (e.g. Ctrl+S). Click the field and press the desired combination.",
"properties": {
"field": {
"type": "object",
"title": "Field",
"widget": {
"type": "dtl-submit-button",
"hotkey": "exampleValue"
}
}
},
"layout": [
"field"
]
}
Gen values to set — gen-values-to-set.json
Demonstrates widget.valuesToSet = "exampleValue" on dtl-submit-button.
{
"type": "object",
"title": "Submit button — Value",
"description": "Demonstrates widget.valuesToSet = \"exampleValue\" on dtl-submit-button.",
"properties": {
"field": {
"type": "object",
"title": "Field",
"widget": {
"type": "dtl-submit-button",
"valuesToSet": "exampleValue"
}
}
},
"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
Disable link
Key: disableLink
Name: Disable link
Default: false
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"
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: ""
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 widget.defaultTreeViewMode = true on tsm-register-value-lov.
{
"type": "object",
"title": "User register — Default tree view mode",
"description": "Demonstrates widget.defaultTreeViewMode = true on tsm-register-value-lov.",
"properties": {
"field": {
"type": "string",
"title": "Field",
"widget": {
"type": "tsm-register-value-lov",
"defaultTreeViewMode": true
}
}
},
"layout": [
"field"
]
}
Gen hide code — gen-hide-code.json
Demonstrates widget.hideCode = true on tsm-register-value-lov.
{
"type": "object",
"title": "User register — Hide code",
"description": "Demonstrates widget.hideCode = true on tsm-register-value-lov.",
"properties": {
"field": {
"type": "string",
"title": "Field",
"widget": {
"type": "tsm-register-value-lov",
"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",
"title": "Field",
"widget": {
"type": "tsm-register-value-lov",
"keyboardOnMobile": false
}
}
},
"layout": [
"field"
]
}
Gen result empty type — gen-result-empty-type.json
Empty: 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'] fo
{
"type": "object",
"title": "User register — Empty",
"description": "Empty: 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'] fo",
"properties": {
"field": {
"type": "string",
"title": "Field",
"widget": {
"type": "tsm-register-value-lov",
"resultEmptyType": "exampleValue"
}
}
},
"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",
"title": "Field",
"widget": {
"type": "tsm-register-value-lov",
"showClear": false
}
}
},
"layout": [
"field"
]
}
Gen show none text — gen-show-none-text.json
Demonstrates widget.showNoneText = false on tsm-register-value-lov.
{
"type": "object",
"title": "User register — Show none text",
"description": "Demonstrates widget.showNoneText = false on tsm-register-value-lov.",
"properties": {
"field": {
"type": "string",
"title": "Field",
"widget": {
"type": "tsm-register-value-lov",
"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
Default: ""
Context
Key: context
Name: Context
Default: {}
Dialog title
Key: dialogTitle
Name: Dialog title
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 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
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 appearance — gen-button-appearance.json
Button appearance: Appearance defines the type of graphical design of the button.
{
"type": "object",
"title": "Value dialog — Button appearance",
"description": "Button appearance: Appearance defines the type of graphical design of the button.",
"properties": {
"field": {
"type": "string",
"title": "Field",
"widget": {
"type": "tsm-value-dialog",
"buttonAppearance": "exampleValue"
}
}
},
"layout": [
"field"
]
}
Gen button severity — gen-button-severity.json
Button severity: Severity defines the button's color design.
{
"type": "object",
"title": "Value dialog — Button severity",
"description": "Button severity: Severity defines the button's color design.",
"properties": {
"field": {
"type": "string",
"title": "Field",
"widget": {
"type": "tsm-value-dialog",
"buttonSeverity": "exampleValue"
}
}
},
"layout": [
"field"
]
}
Gen dialog height — gen-dialog-height.json
Dialog height: Height of the dialog window (e.g., 400px)
{
"type": "object",
"title": "Value dialog — Dialog height",
"description": "Dialog height: Height of the dialog window (e.g., 400px)",
"properties": {
"field": {
"type": "string",
"title": "Field",
"widget": {
"type": "tsm-value-dialog",
"dialogHeight": "exampleValue"
}
}
},
"layout": [
"field"
]
}
Gen dialog title — gen-dialog-title.json
Demonstrates widget.dialogTitle = "exampleValue" on tsm-value-dialog.
{
"type": "object",
"title": "Value dialog — Dialog title",
"description": "Demonstrates widget.dialogTitle = \"exampleValue\" on tsm-value-dialog.",
"properties": {
"field": {
"type": "string",
"title": "Field",
"widget": {
"type": "tsm-value-dialog",
"dialogTitle": "exampleValue"
}
}
},
"layout": [
"field"
]
}
Gen dialog width — gen-dialog-width.json
Dialog width: Width of the dialog window (e.g., 600px)
{
"type": "object",
"title": "Value dialog — Dialog width",
"description": "Dialog width: Width of the dialog window (e.g., 600px)",
"properties": {
"field": {
"type": "string",
"title": "Field",
"widget": {
"type": "tsm-value-dialog",
"dialogWidth": "exampleValue"
}
}
},
"layout": [
"field"
]
}
Gen form code — gen-form-code.json
Demonstrates widget.formCode = "exampleValue" on tsm-value-dialog.
{
"type": "object",
"title": "Value dialog — Form",
"description": "Demonstrates widget.formCode = \"exampleValue\" on tsm-value-dialog.",
"properties": {
"field": {
"type": "string",
"title": "Field",
"widget": {
"type": "tsm-value-dialog",
"formCode": "exampleValue"
}
}
},
"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 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: {}
Examples
Curated configurations from libs/framework/fluent-forms/__fixtures__/widgets/tsm-generate-protocol/.
Each is a complete validated FluentSchema — copy & adapt for your form.
Gen button appearance — gen-button-appearance.json
Button Appearance: Defines the visual style of buttons (e.g., outlined, text, raised).
{
"type": "object",
"title": "Generate protocol — Button Appearance",
"description": "Button Appearance: Defines the visual style of buttons (e.g., outlined, text, raised).",
"properties": {
"field": {
"type": "object",
"title": "Field",
"widget": {
"type": "tsm-generate-protocol",
"buttonAppearance": "exampleValue"
}
}
},
"layout": [
"field"
]
}
Gen button custom css class — gen-button-custom-css-class.json
Optional CSS class: An optional CSS class to modify the style of this component. Examples: text-2xl bg-red-500 flex w-full gap-2 flex-col p-4
{
"type": "object",
"title": "Generate protocol — Optional CSS class",
"description": "Optional CSS class: 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>",
"properties": {
"field": {
"type": "object",
"title": "Field",
"widget": {
"type": "tsm-generate-protocol",
"buttonCustomCssClass": "tsm-custom-class"
}
}
},
"layout": [
"field"
]
}
Gen button icon css class — gen-button-icon-css-class.json
Optional icon: Icon CSS class for the button. Example: p-icon-check
{
"type": "object",
"title": "Generate protocol — Optional icon",
"description": "Optional icon: Icon CSS class for the button. Example: p-icon-check",
"properties": {
"field": {
"type": "object",
"title": "Field",
"widget": {
"type": "tsm-generate-protocol",
"buttonIconCssClass": "tsm-custom-class"
}
}
},
"layout": [
"field"
]
}
Gen button severity — gen-button-severity.json
Button Severity: Defines the button color scheme based on its importance (e.g., Success for saving).
{
"type": "object",
"title": "Generate protocol — Button Severity",
"description": "Button Severity: Defines the button color scheme based on its importance (e.g., Success for saving).",
"properties": {
"field": {
"type": "object",
"title": "Field",
"widget": {
"type": "tsm-generate-protocol",
"buttonSeverity": "exampleValue"
}
}
},
"layout": [
"field"
]
}
Gen owner id — gen-owner-id.json
Owner Id: JEXL expression to retrieve the ID of the specific record to which the protocol is bound.
{
"type": "object",
"title": "Generate protocol — Owner Id",
"description": "Owner Id: JEXL expression to retrieve the ID of the specific record to which the protocol is bound.",
"properties": {
"field": {
"type": "object",
"title": "Field",
"widget": {
"type": "tsm-generate-protocol",
"ownerId": "exampleValue"
}
}
},
"layout": [
"field"
]
}
Gen owner type — gen-owner-type.json
Owner type: Entity type (e.g., CASE, TASK) to which the protocol will be attached.
{
"type": "object",
"title": "Generate protocol — Owner type",
"description": "Owner type: Entity type (e.g., CASE, TASK) to which the protocol will be attached.",
"properties": {
"field": {
"type": "object",
"title": "Field",
"widget": {
"type": "tsm-generate-protocol",
"ownerType": "exampleValue"
}
}
},
"layout": [
"field"
]
}
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 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 appearance — gen-button-appearance.json
Button Appearance: Defines the visual style of the button (e.g., outlined, text, raised).
{
"type": "object",
"title": "PDF preview — Button Appearance",
"description": "Button Appearance: Defines the visual style of the button (e.g., outlined, text, raised).",
"properties": {
"field": {
"type": "layout",
"title": "Field",
"widget": {
"type": "tsm-pdf-preview",
"buttonAppearance": "exampleValue"
}
}
},
"layout": [
"field"
]
}
Gen button custom css class — gen-button-custom-css-class.json
Optional CSS class: An optional CSS class to modify the style of this component. Examples: text-2xl bg-red-500 flex w-full gap-2 flex-col p-4
{
"type": "object",
"title": "PDF preview — Optional CSS class",
"description": "Optional CSS class: 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>",
"properties": {
"field": {
"type": "layout",
"title": "Field",
"widget": {
"type": "tsm-pdf-preview",
"buttonCustomCssClass": "tsm-custom-class"
}
}
},
"layout": [
"field"
]
}
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": {
"field": {
"type": "layout",
"title": "Field",
"widget": {
"type": "tsm-pdf-preview",
"buttonIconCssClass": "tsm-custom-class"
}
}
},
"layout": [
"field"
]
}
Gen button severity — gen-button-severity.json
Button Severity: Defines the button color scheme based on its importance (e.g., Success for download).
{
"type": "object",
"title": "PDF preview — Button Severity",
"description": "Button Severity: Defines the button color scheme based on its importance (e.g., Success for download).",
"properties": {
"field": {
"type": "layout",
"title": "Field",
"widget": {
"type": "tsm-pdf-preview",
"buttonSeverity": "exampleValue"
}
}
},
"layout": [
"field"
]
}
Gen preview pdf button — gen-preview-pdf-button.json
Demonstrates widget.previewPdfButton = "exampleValue" on tsm-pdf-preview.
{
"type": "object",
"title": "PDF preview — Name of the button to preview the pdf",
"description": "Demonstrates widget.previewPdfButton = \"exampleValue\" on tsm-pdf-preview.",
"properties": {
"field": {
"type": "layout",
"title": "Field",
"widget": {
"type": "tsm-pdf-preview",
"previewPdfButton": "exampleValue"
}
}
},
"layout": [
"field"
]
}
Gen spel script — gen-spel-script.json
Spel script: Spel script that expands the context when generating a log.
{
"type": "object",
"title": "PDF preview — Spel script",
"description": "Spel script: Spel script that expands the context when generating a log.",
"properties": {
"field": {
"type": "layout",
"title": "Field",
"widget": {
"type": "tsm-pdf-preview",
"spelScript": "exampleValue"
}
}
},
"layout": [
"field"
]
}
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
Display
Key: displayField
Name: Display
Default: "name"
Value
Key: selectProperty
Name: Value
Default: "code"
Default value
Key: default
Name: Default value
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",
"title": "Field",
"widget": {
"type": "tsm-register-lov",
"keyboardOnMobile": false
}
}
},
"layout": [
"field"
]
}
Gen multiselect — gen-multiselect.json
Demonstrates widget.multiselect = true on tsm-register-lov.
{
"type": "object",
"title": "Register — Selection using a listing (one or more values)",
"description": "Demonstrates widget.multiselect = true on tsm-register-lov.",
"properties": {
"field": {
"type": "string",
"title": "Field",
"widget": {
"type": "tsm-register-lov",
"multiselect": true
}
}
},
"layout": [
"field"
]
}
Gen select property — gen-select-property.json
Demonstrates widget.selectProperty = "exampleValue" on tsm-register-lov.
{
"type": "object",
"title": "Register — Value",
"description": "Demonstrates widget.selectProperty = \"exampleValue\" on tsm-register-lov.",
"properties": {
"field": {
"type": "string",
"title": "Field",
"widget": {
"type": "tsm-register-lov",
"selectProperty": "exampleValue"
}
}
},
"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",
"title": "Field",
"widget": {
"type": "tsm-register-lov",
"showClear": false
}
}
},
"layout": [
"field"
]
}
Gen show none text — gen-show-none-text.json
Demonstrates widget.showNoneText = false on tsm-register-lov.
{
"type": "object",
"title": "Register — Show none text",
"description": "Demonstrates widget.showNoneText = false on tsm-register-lov.",
"properties": {
"field": {
"type": "string",
"title": "Field",
"widget": {
"type": "tsm-register-lov",
"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 widget.height = 400 on tsm-signature-pad-input.
{
"type": "object",
"title": "Signature — Height",
"description": "Demonstrates widget.height = 400 on tsm-signature-pad-input.",
"properties": {
"field": {
"type": "string",
"title": "Field",
"widget": {
"type": "tsm-signature-pad-input",
"height": 400
}
}
},
"layout": [
"field"
]
}
Gen width — gen-width.json
Demonstrates widget.width = 800 on tsm-signature-pad-input.
{
"type": "object",
"title": "Signature — Width",
"description": "Demonstrates widget.width = 800 on tsm-signature-pad-input.",
"properties": {
"field": {
"type": "string",
"title": "Field",
"widget": {
"type": "tsm-signature-pad-input",
"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 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
Default: null
Action
Key: formAction
Name: Action
Default: null
Validation expression
Key: validationExpression
Name: Validation expression
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
Default: false
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 button appearance — gen-button-appearance.json
Button Appearance: Appearance defines the type of graphical design of the button.
{
"type": "object",
"title": "Submit request button — Button Appearance",
"description": "Button Appearance: Appearance defines the type of graphical design of the button.",
"properties": {
"field": {
"type": "object",
"title": "Field",
"widget": {
"type": "dtl-submit-request-button",
"buttonAppearance": "exampleValue"
}
}
},
"layout": [
"field"
]
}
Gen button severity — gen-button-severity.json
Button Severity: Severity defines the button's color design.
{
"type": "object",
"title": "Submit request button — Button Severity",
"description": "Button Severity: Severity defines the button's color design.",
"properties": {
"field": {
"type": "object",
"title": "Field",
"widget": {
"type": "dtl-submit-request-button",
"buttonSeverity": "exampleValue"
}
}
},
"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",
"title": "Field",
"widget": {
"type": "dtl-submit-request-button",
"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",
"title": "Field",
"widget": {
"type": "dtl-submit-request-button",
"customIconCssClass": "tsm-custom-class"
}
}
},
"layout": [
"field"
]
}
Gen hotkey — gen-hotkey.json
Keyboard shortcut: Global shortcut that triggers this button (e.g. Ctrl+S). Click the field and press the desired combination.
{
"type": "object",
"title": "Submit request button — Keyboard shortcut",
"description": "Keyboard shortcut: Global shortcut that triggers this button (e.g. Ctrl+S). Click the field and press the desired combination.",
"properties": {
"field": {
"type": "object",
"title": "Field",
"widget": {
"type": "dtl-submit-request-button",
"hotkey": "exampleValue"
}
}
},
"layout": [
"field"
]
}
Gen values to set — gen-values-to-set.json
Demonstrates widget.valuesToSet = "exampleValue" on dtl-submit-request-button.
{
"type": "object",
"title": "Submit request button — Value",
"description": "Demonstrates widget.valuesToSet = \"exampleValue\" on dtl-submit-request-button.",
"properties": {
"field": {
"type": "object",
"title": "Field",
"widget": {
"type": "dtl-submit-request-button",
"valuesToSet": "exampleValue"
}
}
},
"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
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.
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.
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.
Hide Button Section
Key: hideButtonGroup
Name: Hide Button Section
Description: Hides the button section.
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.
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
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
Default: ""
Language
Key: language
Name: Language
Description: Language used in this component
Default: null
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",
"title": "Field",
"widget": {
"type": "dtl-form-input-monaco",
"inline": true
}
}
},
"layout": [
"field"
]
}
Gen language — gen-language.json
Language: Language used in this component
{
"type": "object",
"title": "Monaco editor — Language",
"description": "Language: Language used in this component",
"properties": {
"field": {
"type": "string",
"title": "Field",
"widget": {
"type": "dtl-form-input-monaco",
"language": "exampleValue"
}
}
},
"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",
"title": "Field",
"widget": {
"type": "dtl-form-input-monaco",
"resizable": false
}
}
},
"layout": [
"field"
]
}
Gen widget height — gen-widget-height.json
Widget height: The height of this widget in pixels. E.g.: 200px
{
"type": "object",
"title": "Monaco editor — Widget height",
"description": "Widget height: The height of this widget in pixels. E.g.: 200px",
"properties": {
"field": {
"type": "string",
"title": "Field",
"widget": {
"type": "dtl-form-input-monaco",
"widgetHeight": "exampleValue"
}
}
},
"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",
"title": "Field",
"widget": {
"type": "dtl-fluent-object",
"compactMode": true
}
}
},
"layout": [
"field"
]
}
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",
"title": "Field",
"widget": {
"type": "dtl-fluent-object",
"inputBordersShowing": true
}
}
},
"layout": [
"field"
]
}
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
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
Examples
Curated configurations from libs/framework/fluent-forms/__fixtures__/widgets/dtl-fluent-array/.
Each is a complete validated FluentSchema — copy & adapt for your form.
Gen number of rows — gen-number-of-rows.json
_Default number of objects: "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 _
{
"type": "object",
"title": "Array — Default number of objects",
"description": "Default number of objects: \"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 ",
"properties": {
"field": {
"type": "array",
"title": "Field",
"widget": {
"type": "array",
"numberOfRows": "exampleValue"
}
}
},
"layout": [
"field"
]
}
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
Default: ""
Language
Key: language
Name: Language
Description: Language used in this component
Default: null
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
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",
"title": "Field",
"widget": {
"type": "dtl-form-input-monaco-diff",
"enableChangeRevert": false
}
}
},
"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",
"title": "Field",
"widget": {
"type": "dtl-form-input-monaco-diff",
"inline": true
}
}
},
"layout": [
"field"
]
}
Gen language — gen-language.json
Language: Language used in this component
{
"type": "object",
"title": "Monaco Diff Editor — Language",
"description": "Language: Language used in this component",
"properties": {
"field": {
"type": "string",
"title": "Field",
"widget": {
"type": "dtl-form-input-monaco-diff",
"language": "exampleValue"
}
}
},
"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",
"title": "Field",
"widget": {
"type": "dtl-form-input-monaco-diff",
"resizable": false
}
}
},
"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",
"title": "Field",
"widget": {
"type": "dtl-form-input-monaco-diff",
"swap": true
}
}
},
"layout": [
"field"
]
}
Gen widget height — gen-widget-height.json
Widget height: The height of this widget in pixels. E.g.: 200px
{
"type": "object",
"title": "Monaco Diff Editor — Widget height",
"description": "Widget height: The height of this widget in pixels. E.g.: 200px",
"properties": {
"field": {
"type": "string",
"title": "Field",
"widget": {
"type": "dtl-form-input-monaco-diff",
"widgetHeight": "exampleValue"
}
}
},
"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
Nadpis - ukazatel dat
Key: headerPointer
Name: Nadpis - ukazatel dat
Default: ""
Podnadpis - ukazatel dat
Key: subheaderPointer
Name: Podnadpis - ukazatel dat
Default: ""
Examples
Curated configurations from libs/framework/fluent-forms/__fixtures__/widgets/dtl-fluent-accordion-array/.
Each is a complete validated FluentSchema — copy & adapt for your form.
Gen header pointer — gen-header-pointer.json
Demonstrates widget.headerPointer = "exampleValue" on dtl-fluent-accordion-array.
{
"type": "object",
"title": "Accordion array — Nadpis - ukazatel dat",
"description": "Demonstrates widget.headerPointer = \"exampleValue\" on dtl-fluent-accordion-array.",
"properties": {
"field": {
"type": "array",
"title": "Field",
"widget": {
"type": "dtl-fluent-accordion-array",
"headerPointer": "exampleValue"
}
}
},
"layout": [
"field"
]
}
Gen subheader pointer — gen-subheader-pointer.json
Demonstrates widget.subheaderPointer = "exampleValue" on dtl-fluent-accordion-array.
{
"type": "object",
"title": "Accordion array — Podnadpis - ukazatel dat",
"description": "Demonstrates widget.subheaderPointer = \"exampleValue\" on dtl-fluent-accordion-array.",
"properties": {
"field": {
"type": "array",
"title": "Field",
"widget": {
"type": "dtl-fluent-accordion-array",
"subheaderPointer": "exampleValue"
}
}
},
"layout": [
"field"
]
}
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: ""
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 widget.fieldDescription = "name" on tsm-automatic-create-field-widget.
{
"type": "object",
"title": "Automatic Create Field — Field description",
"description": "Demonstrates widget.fieldDescription = \"name\" on tsm-automatic-create-field-widget.",
"properties": {
"field": {
"type": "string",
"title": "Field",
"widget": {
"type": "tsm-automatic-create-field-widget",
"fieldDescription": "name"
}
}
},
"layout": [
"field"
]
}
Gen field name — gen-field-name.json
Demonstrates widget.fieldName = "name" on tsm-automatic-create-field-widget.
{
"type": "object",
"title": "Automatic Create Field — Field name",
"description": "Demonstrates widget.fieldName = \"name\" on tsm-automatic-create-field-widget.",
"properties": {
"field": {
"type": "string",
"title": "Field",
"widget": {
"type": "tsm-automatic-create-field-widget",
"fieldName": "name"
}
}
},
"layout": [
"field"
]
}
Gen show field — gen-show-field.json
Demonstrates widget.showField = false on tsm-automatic-create-field-widget.
{
"type": "object",
"title": "Automatic Create Field — Show field by default",
"description": "Demonstrates widget.showField = false on tsm-automatic-create-field-widget.",
"properties": {
"field": {
"type": "string",
"title": "Field",
"widget": {
"type": "tsm-automatic-create-field-widget",
"showField": false
}
}
},
"layout": [
"field"
]
}
Gen toggle off value — gen-toggle-off-value.json
Demonstrates widget.toggleOffValue = "exampleValue" on tsm-automatic-create-field-widget.
{
"type": "object",
"title": "Automatic Create Field — Toggle off value",
"description": "Demonstrates widget.toggleOffValue = \"exampleValue\" on tsm-automatic-create-field-widget.",
"properties": {
"field": {
"type": "string",
"title": "Field",
"widget": {
"type": "tsm-automatic-create-field-widget",
"toggleOffValue": "exampleValue"
}
}
},
"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 widget.checklistFilter = false on tsm-checklist.
{
"type": "object",
"title": "Checklist — Checklist filter",
"description": "Demonstrates widget.checklistFilter = false on tsm-checklist.",
"properties": {
"field": {
"type": "object",
"title": "Field",
"widget": {
"type": "tsm-checklist",
"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 default type — gen-default-type.json
Demonstrates widget.defaultType = "exampleValue" on dtl-fluent-expression-editor.
{
"type": "object",
"title": "Expression editor — Default expression type",
"description": "Demonstrates widget.defaultType = \"exampleValue\" on dtl-fluent-expression-editor.",
"properties": {
"field": {
"type": "string",
"title": "Field",
"widget": {
"type": "dtl-fluent-expression-editor",
"defaultType": "exampleValue"
}
}
},
"layout": [
"field"
]
}
Gen font size — gen-font-size.json
Demonstrates widget.fontSize = "exampleValue" on dtl-fluent-expression-editor.
{
"type": "object",
"title": "Expression editor — Font size",
"description": "Demonstrates widget.fontSize = \"exampleValue\" on dtl-fluent-expression-editor.",
"properties": {
"field": {
"type": "string",
"title": "Field",
"widget": {
"type": "dtl-fluent-expression-editor",
"fontSize": "exampleValue"
}
}
},
"layout": [
"field"
]
}
Gen hide change button — gen-hide-change-button.json
Demonstrates widget.hideChangeButton = true on dtl-fluent-expression-editor.
{
"type": "object",
"title": "Expression editor — Hide change button",
"description": "Demonstrates widget.hideChangeButton = true on dtl-fluent-expression-editor.",
"properties": {
"field": {
"type": "string",
"title": "Field",
"widget": {
"type": "dtl-fluent-expression-editor",
"hideChangeButton": true
}
}
},
"layout": [
"field"
]
}
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": "Field",
"widget": {
"type": "dtl-fluent-expression-editor",
"isExpression": true
}
}
},
"layout": [
"field"
]
}
Gen line numbers — gen-line-numbers.json
Demonstrates widget.lineNumbers = "exampleValue" on dtl-fluent-expression-editor.
{
"type": "object",
"title": "Expression editor — Line numbers",
"description": "Demonstrates widget.lineNumbers = \"exampleValue\" on dtl-fluent-expression-editor.",
"properties": {
"field": {
"type": "string",
"title": "Field",
"widget": {
"type": "dtl-fluent-expression-editor",
"lineNumbers": "exampleValue"
}
}
},
"layout": [
"field"
]
}
Gen widget height — gen-widget-height.json
Height: Height must be specified including units (10px / 5em / 2vh, etc.)
{
"type": "object",
"title": "Expression editor — Height",
"description": "Height: Height must be specified including units (10px / 5em / 2vh, etc.)",
"properties": {
"field": {
"type": "string",
"title": "Field",
"widget": {
"type": "dtl-fluent-expression-editor",
"widgetHeight": "exampleValue"
}
}
},
"layout": [
"field"
]
}
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"
}
}