Version: 2.4

Basic Components Widgets

Checkbox `dtl-form-input-checkbox`

The checkbox is a type of input field that allows users to select only checked or unchecked values. Checkboxes is represented as small square that can be checked or unchecked by clicking on them. Checkbox is associated with a label that describes the option it represents. The use of checkboxes helps to simplify the process of collecting information by presenting the user with a clear list of options to choose from, while also allowing for flexible and multi-faceted data collection.

Widget Or Layout: unknown

Value:

{
  "type": "boolean",
  "title": "Checkbox",
  "widget": {
    "type": "checkbox"
  }
}

Link `dtl-form-input-link`

The link field is an input field in a form that allows users to enter a hyperlink, such as a URL or email address. The field is represented by a text box, into which the user can type or paste a link. The use of a link field is particularly useful for collecting information about online resources, such as websites, online profiles, or articles.

Widget Or Layout: unknown

Value:

{
  "type": "string",
  "title": "Link",
  "widget": {
    "type": "link"
  }
}

Inputs

Default value

Key: default

Name: Default value

Description: The default value for this component. If the component does not contain a value, then this default value will be displayed. If the component contains a value, then the displaying of the default value is controlled by attribute "The way of storage"

Default: ""

Custom link name

Key: customTitle

Name: Custom link name

Description: Custom title for this link.

Default: ""

External link

Key: target

Name: External link

Description: Opens external link in a new tab

Default: false

Disable the link

Key: noHref

Name: Disable the link

Description: Tick the checkbox if you wish to disable this link.

Default: false

Link with label

Key: withLabel

Name: Link with label

Description: Besides the address, the user enters the link text. The value is then stored as an object {url, label} instead of an address string.

Default: false

Examples

Curated configurations from libs/framework/fluent-forms/__fixtures__/widgets/dtl-form-input-link/. Each is a complete validated FluentSchema — copy & adapt for your form.

Paste event — 01-paste-event.json

A pasted event keeps the prior accepted URL for review before an asynchronous URL transformation is applied.

{
  "type": "object",
  "title": "Link — pasted documentation URL",
  "description": "A pasted event keeps the prior accepted URL for review before an asynchronous URL transformation is applied.",
  "properties": {
    "documentationUrl": {
      "type": "string",
      "title": "Documentation URL",
      "widget": {
        "type": "link",
        "placeholder": "https://example.com/docs"
      }
    },
    "previousUrl": {
      "type": "string",
      "title": "URL before paste",
      "widget": {
        "type": "text",
        "readonly": true
      }
    }
  },
  "layout": [
    "documentationUrl",
    "previousUrl"
  ],
  "effects": [
    {
      "id": "recordUrlBeforePaste",
      "trigger": {
        "type": "widgetEvent",
        "objectPointer": "/properties/documentationUrl",
        "event": "pasted"
      },
      "do": [
        {
          "type": "set",
          "field": "previousUrl",
          "value": "${$payload.valueBefore}"
        }
      ]
    }
  ]
}

Web links with label — 02-web-links-with-label.json

External web links as in Jira: each row stores the address and the link text entered by the user as {url, label}, next to the system the link came from.

{
  "type": "object",
  "title": "Link — web links with a label",
  "description": "External web links as in Jira: each row stores the address and the link text entered by the user as {url, label}, next to the system the link came from.",
  "properties": {
    "webLinks": {
      "type": "array",
      "title": "Web links",
      "items": {
        "type": "object",
        "properties": {
          "link": {
            "type": "object",
            "title": "Link",
            "widget": {
              "type": "link",
              "placeholder": "https://"
            },
            "config": {
              "withLabel": true,
              "target": true
            }
          },
          "sourceSystem": {
            "type": "string",
            "title": "Source system",
            "widget": {
              "type": "text"
            }
          }
        }
      }
    }
  },
  "layout": [
    {
      "type": "layout",
      "propertyKey": "webLinks",
      "widget": {
        "type": "dtl-fluent-array"
      },
      "items": [
        "webLinks!.link",
        "webLinks!.sourceSystem"
      ]
    }
  ]
}

Gen no href — gen-no-href.json

Disable the link: Tick the checkbox if you wish to disable this link.

{
  "type": "object",
  "title": "Link — Disable the link",
  "description": "Disable the link: Tick the checkbox if you wish to disable this link.",
  "properties": {
    "field": {
      "type": "string",
      "widget": {
        "type": "link"
      },
      "title": "Field",
      "config": {
        "noHref": true
      }
    }
  },
  "layout": [
    "field"
  ]
}

Gen target — gen-target.json

External link: Opens external link in a new tab

{
  "type": "object",
  "title": "Link — External link",
  "description": "External link: Opens external link in a new tab",
  "properties": {
    "field": {
      "type": "string",
      "widget": {
        "type": "link"
      },
      "title": "Field",
      "config": {
        "target": true
      }
    }
  },
  "layout": [
    "field"
  ]
}

Text Item `dtl-form-input-text`

The basic component for general text input. Optionally you can configure validations, masks and visual behaviour. The validation ensures that the data entered meets certain criteria, such as being a certain length or having a specific format. The mask is used to format the text as it's being entered, such as adding dashes to a phone number or hyphens to a credit card number. This helps to improve the user experience by providing clear expectations for the type of data that should be entered and ensuring that the data is entered in a consistent format.

Widget Or Layout: unknown

Value:

{
  "type": "string",
  "title": "Text",
  "widget": {
    "type": "text"
  }
}

Inputs

Default value

Key: default

Name: Default value

Default: ""

Disable wrapping

Key: overflowValueHidden

Name: Disable wrapping

Description: If the content of the value does not fit into the free space of the form, it will be shortened. The entire value will be displayed as a tooltip.

Default: false

Show delete value icon

Key: showClear

Name: Show delete value icon

Description: If enabled, the delete value icon (X) will be displayed on hover when the input contains a value.

Default: false

Examples

Curated configurations from libs/framework/fluent-forms/__fixtures__/widgets/dtl-form-input-text/. Each is a complete validated FluentSchema — copy & adapt for your form.

Basic — 01-basic.json

{
  "type": "object",
  "title": "Text — basic",
  "properties": {
    "name": {
      "type": "string",
      "title": "Name",
      "widget": {
        "type": "text"
      }
    }
  },
  "layout": [
    "name"
  ]
}

With validation — 02-with-validation.json

Length + regex pattern validation declared on the property itself (standard JSON Schema). The widget renders inline errors when input violates either constraint.

{
  "type": "object",
  "title": "Text — with JSON Schema validation",
  "description": "Length + regex pattern validation declared on the property itself (standard JSON Schema). The widget renders inline errors when input violates either constraint.",
  "properties": {
    "username": {
      "type": "string",
      "title": "Username",
      "widget": {
        "type": "text",
        "placeholder": "lowercase letters and digits"
      },
      "pattern": "^[a-z0-9]+$",
      "minLength": 3,
      "maxLength": 20
    }
  },
  "layout": [
    "username"
  ]
}

With mask — 03-with-mask.json

Mask formats input as the user types (here: Czech postal code, e.g. 131 00). Mask is enforced visually; combine with pattern if you need server-side validation too.

{
  "type": "object",
  "title": "Text — with input mask",
  "description": "Mask formats input as the user types (here: Czech postal code, e.g. `131 00`). Mask is enforced visually; combine with `pattern` if you need server-side validation too.",
  "properties": {
    "zip": {
      "type": "string",
      "title": "PSČ",
      "widget": {
        "type": "text",
        "mask": "999 99",
        "placeholder": "___ __"
      },
      "pattern": "^[0-9]{3} [0-9]{2}$"
    }
  },
  "layout": [
    "zip"
  ]
}

Readonly — 04-readonly.json

Display-only field whose value comes from a JEXL expression evaluated at runtime. Used for derived/computed display values that should never be edited.

{
  "type": "object",
  "title": "Text — readonly with default expression",
  "description": "Display-only field whose value comes from a JEXL expression evaluated at runtime. Used for derived/computed display values that should never be edited.",
  "properties": {
    "displayId": {
      "type": "string",
      "title": "Display ID",
      "widget": {
        "type": "text",
        "readonly": true
      },
      "default": "${$value.prefix + '-' + $value.id}"
    },
    "prefix": {
      "type": "string",
      "title": "Prefix",
      "widget": {
        "type": "text"
      }
    },
    "id": {
      "type": "string",
      "title": "ID",
      "widget": {
        "type": "text"
      }
    }
  },
  "layout": [
    "prefix",
    "id",
    "displayId"
  ]
}

Required with tooltip — 05-required-with-tooltip.json

Required field with a contextual tooltip rendered next to the label (info icon on hover). Combines widget.required (UI marker + runtime validation) with widget.tooltip (i18n-resolved help text).

{
  "type": "object",
  "title": "Text — required with tooltip",
  "description": "Required field with a contextual tooltip rendered next to the label (info icon on hover). Combines widget.required (UI marker + runtime validation) with widget.tooltip (i18n-resolved help text).",
  "properties": {
    "fullName": {
      "type": "string",
      "title": "Full name",
      "widget": {
        "type": "text",
        "required": true,
        "tooltip": "Use the legal name as it appears on the contract.",
        "placeholder": "First and last name"
      },
      "minLength": 2
    }
  },
  "layout": [
    "fullName"
  ]
}

Paste transform — 06-paste-transform.json

After a user pastes a customer code, the pasted event writes an uppercase value back to the same text control. Programmatic writes do not emit another pasted event.

{
  "type": "object",
  "title": "Text — uppercase pasted customer code",
  "description": "After a user pastes a customer code, the pasted event writes an uppercase value back to the same text control. Programmatic writes do not emit another pasted event.",
  "properties": {
    "customerCode": {
      "type": "string",
      "title": "Customer code",
      "widget": {
        "type": "text",
        "placeholder": "Paste customer code"
      }
    }
  },
  "layout": [
    "customerCode"
  ],
  "effects": [
    {
      "id": "uppercasePastedCustomerCode",
      "trigger": {
        "type": "widgetEvent",
        "objectPointer": "/properties/customerCode",
        "event": "pasted"
      },
      "do": [
        {
          "type": "set",
          "field": "customerCode",
          "value": "${$payload.valueAfter.toUpperCase()}"
        }
      ]
    }
  ]
}

Gen overflow value hidden — gen-overflow-value-hidden.json

Disable wrapping: If the content of the value does not fit into the free space of the form, it will be shortened. The entire value will be displayed as a tooltip.

{
  "type": "object",
  "title": "Text Item — Disable wrapping",
  "description": "Disable wrapping: If the content of the value does not fit into the free space of the form, it will be shortened. The entire value will be displayed as a tooltip.",
  "properties": {
    "field": {
      "type": "string",
      "widget": {
        "type": "text"
      },
      "title": "Field",
      "config": {
        "overflowValueHidden": true
      }
    }
  },
  "layout": [
    "field"
  ]
}

Gen show clear — gen-show-clear.json

Show delete value icon: If enabled, the delete value icon (X) will be displayed on hover when the input contains a value.

{
  "type": "object",
  "title": "Text Item — Show delete value icon",
  "description": "Show delete value icon: If enabled, the delete value icon (X) will be displayed on hover when the input contains a value.",
  "properties": {
    "field": {
      "type": "string",
      "widget": {
        "type": "text"
      },
      "title": "Field",
      "config": {
        "showClear": true
      }
    }
  },
  "layout": [
    "field"
  ]
}

Long text `dtl-form-input-textarea`

The text area is a multi-line text input field in a form that is used to collect large amounts of text data from the user. Unlike a regular text field, a text area can accommodate multiple lines of text, making it well-suited for collecting longer pieces of information such as descriptions, comments, or feedback. The use of a text area helps to make it easy for users to enter and read large amounts of text data, while also providing a way to ensure that the data collected is accurate and consistent. If you want the user to enter Rich text (such as title, colors, font size, font weight etc., use Rich Text

Widget Or Layout: unknown

Value:

{
  "type": "string",
  "title": "Textarea",
  "widget": {
    "type": "textarea"
  }
}

Inputs

Height (px)

Key: widgetHeight

Name: Height (px)

Description: The height in pixels.

Default: ""

Default value

Key: default

Name: Default value

Default: ""

Examples

Curated configurations from libs/framework/fluent-forms/__fixtures__/widgets/dtl-form-input-textarea/. Each is a complete validated FluentSchema — copy & adapt for your form.

Paste event — 01-paste-event.json

A pasted event copies the value accepted by the text area into a read-only audit preview.

{
  "type": "object",
  "title": "Long text — pasted incident notes",
  "description": "A pasted event copies the value accepted by the text area into a read-only audit preview.",
  "properties": {
    "incidentNotes": {
      "type": "string",
      "title": "Incident notes",
      "widget": {
        "type": "textarea",
        "widgetHeight": 160
      }
    },
    "lastPastedNotes": {
      "type": "string",
      "title": "Last pasted notes",
      "widget": {
        "type": "text",
        "readonly": true
      }
    }
  },
  "layout": [
    "incidentNotes",
    "lastPastedNotes"
  ],
  "effects": [
    {
      "id": "recordPastedNotes",
      "trigger": {
        "type": "widgetEvent",
        "objectPointer": "/properties/incidentNotes",
        "event": "pasted"
      },
      "do": [
        {
          "type": "set",
          "field": "lastPastedNotes",
          "value": "${$payload.valueAfter}"
        }
      ]
    }
  ]
}

Mask Field `dtl-form-input-mask`

The mask field is an input field that uses a predefined format or pattern to guide users in entering data. The format can include symbols or placeholders to indicate the required format, such as a date, phone number, or credit card number. The field automatically applies the formatting as users enter the data, making it easier to enter accurate and consistent data. This helps to reduce errors and improve the quality of the data collected in the form.

Widget Or Layout: unknown

Value:

{
  "type": "string",
  "title": "Mask",
  "widget": {
    "type": "mask"
  }
}

Inputs

Default value

Key: default

Name: Default value

Default: ""

Mask

Key: mask

Name: Mask

Description: maskTooltip

Default: ""

Placeholder

Key: maskPlaceholder

Name: Placeholder

Description: A label that is displayed in the value of the component as a hint. When the user inputs a value the label disappears.

Default: ""

Examples

Curated configurations from libs/framework/fluent-forms/__fixtures__/widgets/dtl-form-input-mask/. Each is a complete validated FluentSchema — copy & adapt for your form.

Gen mask placeholder — gen-mask-placeholder.json

Placeholder: A label that is displayed in the value of the component as a hint. When the user inputs a value the label disappears.

{
  "type": "object",
  "title": "Mask Field — Placeholder",
  "description": "Placeholder: A label that is displayed in the value of the component as a hint. When the user inputs a value the label disappears.",
  "properties": {
    "field": {
      "type": "string",
      "widget": {
        "type": "mask"
      },
      "title": "Field",
      "config": {
        "maskPlaceholder": "Enter the value…"
      }
    }
  },
  "layout": [
    "field"
  ]
}

Gen mask — gen-mask.json

Mask: maskTooltip

{
  "type": "object",
  "title": "Mask Field — Mask",
  "description": "Mask: maskTooltip",
  "properties": {
    "field": {
      "type": "string",
      "widget": {
        "type": "mask"
      },
      "title": "Field",
      "config": {
        "mask": "999-999"
      }
    }
  },
  "layout": [
    "field"
  ]
}

Tri state checkbox `dtl-form-input-tri-state-checkbox`

A tri-state checkbox is a GUI element with three possible states: checked, unchecked, and indeterminate. The indeterminate state is used when the checkbox's status depends on its child checkboxes or specific criteria. It's commonly employed in hierarchical data or groups of related checkboxes. The behavior of a tri-state checkbox can be customized by developers to suit their application's needs.

Widget Or Layout: unknown

Value:

{
  "type": "boolean",
  "title": "Tri state checkbox",
  "widget": {
    "type": "triStateCheckbox"
  }
}

Editor `dtl-form-input-tiptap`

The rich text field, also known as a WYSIWYG (What You See Is What You Get) editor, is a type of text input field in a form that allows users to enter and format text with various styles, such as bold, italic, and underline. This type of text field is well-suited for collecting information that requires visual formatting, such as descriptions or comments. Rich text fields can also include validation to ensure that the entered data meets specific criteria, such as having a minimum or maximum length. The use of a rich text field helps to improve the user experience by allowing users to create visually appealing and well-formatted text, while also providing a way to ensure that the data collected is accurate and consistent.

Widget Or Layout: unknown

Value:

{
  "type": "string",
  "title": "Textarea",
  "widget": {
    "type": "tiptap"
  }
}

Inputs

Default value

Key: default

Name: Default value

Default: ""

Owner Id

Key: ownerId

Name: Owner Id

Description: Owner Id

Default: ""

Owner type

Key: ownerType

Name: Owner type

Description: Owner type

Default: ""

Hide iframe in menu

Key: hideMenuItemIframe

Name: Hide iframe in menu

Default: false

Hide diagram in menu

Key: hideMenuItemDiagram

Name: Hide diagram in menu

Default: false

Hide image in menu

Key: hideMenuItemImage

Name: Hide image in menu

Default: false

Hide attachments in menu

Key: hideMenuItemAttachments

Name: Hide attachments in menu

Default: false

Hide code block insert in menu

Key: hideMenuItemInsertCode

Name: Hide code block insert in menu

Default: false

Hide source code insert in menu

Key: hideMenuItemSourceCode

Name: Hide source code insert in menu

Default: false

Hash suggestions

Key: hashtagOption

Name: Hash suggestions

Description: Hash suggestions

Default: "tickets"

Script for suggestions

Key: suggestionScriptCode

Name: Script for suggestions

Default: ""

Script data for suggestions

Key: suggestionScriptData

Name: Script data for suggestions

Description: Data that will be available in the suggestion script under the 'data' variable.

Default: null

Script after click

Key: clickScriptCode

Name: Script after click

Default: ""

Click script data

Key: clickScriptData

Name: Click script data

Description: Script data

Default: null

Component selector to display more data

Key: moreSelector

Name: Component selector to display more data

Default: ""

Input Parameters

Key: moreInputs

Name: Input Parameters

Default: {}

Examples

Curated configurations from libs/framework/fluent-forms/__fixtures__/widgets/dtl-form-input-tiptap/. Each is a complete validated FluentSchema — copy & adapt for your form.

Gen hide menu item attachments — gen-hide-menu-item-attachments.json

Demonstrates config.hideMenuItemAttachments = true on dtl-form-input-tiptap.

{
  "type": "object",
  "title": "Editor — Hide attachments in menu",
  "description": "Demonstrates config.hideMenuItemAttachments = true on dtl-form-input-tiptap.",
  "properties": {
    "field": {
      "type": "string",
      "widget": {
        "type": "tiptap"
      },
      "title": "Field",
      "config": {
        "hideMenuItemAttachments": true
      }
    }
  },
  "layout": [
    "field"
  ]
}

Gen hide menu item diagram — gen-hide-menu-item-diagram.json

Demonstrates config.hideMenuItemDiagram = true on dtl-form-input-tiptap.

{
  "type": "object",
  "title": "Editor — Hide diagram in menu",
  "description": "Demonstrates config.hideMenuItemDiagram = true on dtl-form-input-tiptap.",
  "properties": {
    "field": {
      "type": "string",
      "widget": {
        "type": "tiptap"
      },
      "title": "Field",
      "config": {
        "hideMenuItemDiagram": true
      }
    }
  },
  "layout": [
    "field"
  ]
}

Gen hide menu item iframe — gen-hide-menu-item-iframe.json

Demonstrates config.hideMenuItemIframe = true on dtl-form-input-tiptap.

{
  "type": "object",
  "title": "Editor — Hide iframe in menu",
  "description": "Demonstrates config.hideMenuItemIframe = true on dtl-form-input-tiptap.",
  "properties": {
    "field": {
      "type": "string",
      "widget": {
        "type": "tiptap"
      },
      "title": "Field",
      "config": {
        "hideMenuItemIframe": true
      }
    }
  },
  "layout": [
    "field"
  ]
}

Gen hide menu item image — gen-hide-menu-item-image.json

Demonstrates config.hideMenuItemImage = true on dtl-form-input-tiptap.

{
  "type": "object",
  "title": "Editor — Hide image in menu",
  "description": "Demonstrates config.hideMenuItemImage = true on dtl-form-input-tiptap.",
  "properties": {
    "field": {
      "type": "string",
      "widget": {
        "type": "tiptap"
      },
      "title": "Field",
      "config": {
        "hideMenuItemImage": true
      }
    }
  },
  "layout": [
    "field"
  ]
}

Gen hide menu item insert code — gen-hide-menu-item-insert-code.json

Demonstrates config.hideMenuItemInsertCode = true on dtl-form-input-tiptap.

{
  "type": "object",
  "title": "Editor — Hide code block insert in menu",
  "description": "Demonstrates config.hideMenuItemInsertCode = true on dtl-form-input-tiptap.",
  "properties": {
    "field": {
      "type": "string",
      "widget": {
        "type": "tiptap"
      },
      "title": "Field",
      "config": {
        "hideMenuItemInsertCode": true
      }
    }
  },
  "layout": [
    "field"
  ]
}

Gen hide menu item source code — gen-hide-menu-item-source-code.json

Demonstrates config.hideMenuItemSourceCode = true on dtl-form-input-tiptap.

{
  "type": "object",
  "title": "Editor — Hide source code insert in menu",
  "description": "Demonstrates config.hideMenuItemSourceCode = true on dtl-form-input-tiptap.",
  "properties": {
    "field": {
      "type": "string",
      "widget": {
        "type": "tiptap"
      },
      "title": "Field",
      "config": {
        "hideMenuItemSourceCode": true
      }
    }
  },
  "layout": [
    "field"
  ]
}

Password `dtl-form-input-password`

The password field is an input field in a form that is used to collect sensitive information, such as a password or passphrase. The field is represented by a text box, but the characters entered into the field are obscured and replaced with asterisks or other symbols to protect the confidentiality of the information. Password field also includes additional security features, such as password strength meter.

Widget Or Layout: unknown

Value:

{
  "type": "string",
  "title": "Password",
  "widget": {
    "type": "password"
  }
}

Inputs

Default value

Key: default

Name: Default value

Default: ""

Disable wrapping

Key: overflowValueHidden

Name: Disable wrapping

Description: If the content of the value does not fit into the free space of the form, it will be shortened. The entire value will be displayed as a tooltip.

Default: false

Show delete value icon

Key: showClear

Name: Show delete value icon

Description: If enabled, the delete value icon (X) will be displayed on hover when the input contains a value.

Default: false

Examples

Curated configurations from libs/framework/fluent-forms/__fixtures__/widgets/dtl-form-input-password/. Each is a complete validated FluentSchema — copy & adapt for your form.

Gen overflow value hidden — gen-overflow-value-hidden.json

Disable wrapping: If the content of the value does not fit into the free space of the form, it will be shortened. The entire value will be displayed as a tooltip.

{
  "type": "object",
  "title": "Password — Disable wrapping",
  "description": "Disable wrapping: If the content of the value does not fit into the free space of the form, it will be shortened. The entire value will be displayed as a tooltip.",
  "properties": {
    "field": {
      "type": "string",
      "widget": {
        "type": "password"
      },
      "title": "Field",
      "config": {
        "overflowValueHidden": true
      }
    }
  },
  "layout": [
    "field"
  ]
}

Gen show clear — gen-show-clear.json

Show delete value icon: If enabled, the delete value icon (X) will be displayed on hover when the input contains a value.

{
  "type": "object",
  "title": "Password — Show delete value icon",
  "description": "Show delete value icon: If enabled, the delete value icon (X) will be displayed on hover when the input contains a value.",
  "properties": {
    "field": {
      "type": "string",
      "widget": {
        "type": "password"
      },
      "title": "Field",
      "config": {
        "showClear": true
      }
    }
  },
  "layout": [
    "field"
  ]
}

Switch `dtl-form-input-switch`

The switch is a type of input field in a form that allows users to toggle between two states, such as on/off, yes/no, or true/false. Switch is represented as a small rectangular toggle that can be moved left or right to change its state. It is often used as a more compact alternative to checkboxes for binary decisions, and can also be used in place of radio buttons for single-choice selection. The use of switches helps to simplify the user interface by providing a clear and intuitive way to make binary selections, while also allowing for more compact and aesthetically pleasing forms.

Widget Or Layout: unknown

Value:

{
  "type": "boolean",
  "title": "Switch",
  "widget": {
    "type": "switch"
  }
}

Inputs

Left label

Key: leftLabel

Name: Left label

Description: The label, which will be located to the left of the component

Default: ""

Right label

Key: rightLabel

Name: Right label

Description: The label, which will be located to the right of the component

Default: ""

Save on change

Key: saveOnChange

Name: Save on change

Description: When enabled, changing the switch value will immediately trigger an inplace save without requiring the fluent-inplace wrapper

Default: false

Examples

Curated configurations from libs/framework/fluent-forms/__fixtures__/widgets/dtl-form-input-switch/. Each is a complete validated FluentSchema — copy & adapt for your form.

Gen save on change — gen-save-on-change.json

Save on change: When enabled, changing the switch value will immediately trigger an inplace save without requiring the fluent-inplace wrapper

{
  "type": "object",
  "title": "Switch — Save on change",
  "description": "Save on change: When enabled, changing the switch value will immediately trigger an inplace save without requiring the fluent-inplace wrapper",
  "properties": {
    "field": {
      "type": "boolean",
      "widget": {
        "type": "switch"
      },
      "title": "Field",
      "config": {
        "saveOnChange": true
      }
    }
  },
  "layout": [
    "field"
  ]
}

Autocomplete `tsm-autocomplete`

The autocomplete field, also known as the "autocomplete" feature, is an interactive input element in a form that provides users with instant suggestions to complete their entries based on previous inputs or a predefined set of options. As soon as the user starts typing in the field, the system dynamically generates and displays a list of relevant suggestions, from which the user can choose, allowing them to quickly and efficiently complete their entry without the need to type out the entire text.

Widget Or Layout: unknown

Value:

{
  "type": "object",
  "title": "Autocomplete",
  "oneOf": [
    {
      "title": "null",
      "const": "null"
    }
  ],
  "widget": {
    "type": "tsm-autocomplete"
  }
}

Inputs

Default value

Key: default

Name: Default value

Default: ""

Show clear

Key: showClear

Name: Show clear

Description: Sets the visibility of the delete button for clearing text in the filtering input

Default: true

Force selection

Key: forceSelection

Name: Force selection

Description: The forceSelection option in Autocomplete ensures that users can only select a value from the predefined options in the dropdown list. This prevents the user from entering any custom or arbitrary text that is not part of the list of suggestions.

Default: true

Title

Key: title

Name: Title

Description: The title of constant select item.

Default: ""

Const

Key: const

Name: Const

Description: The value of constant select item.

Default: null

Script

Key: scriptCode

Name: Script

Description: Script option - Selected script will be evaluated and the result will fill suggestions.

Default: null

Attribute name for value name

Key: remoteFieldTitle

Name: Attribute name for value name

Description: Name of the attribute used for creating the title of the select item. e.g. name or code.

Default: null

Attribute name for value

Key: remoteFieldConst

Name: Attribute name for value

Description: Name of the attribute used for creating the value of the select item. e.g. id.

Default: null

Disable cache

Key: disableCache

Name: Disable cache

Description: Disable cache for script

Default: false

Return entire object

Key: allObjectConst

Name: Return entire object

Description: Allows you to return the entire object instead of a single item, which is defined in "Attribute name for value".

Default: true

Context

Key: scriptContext

Name: Context

Description: Context passed to script - Example: {"exampleKey": "exampleValue"}

Default: {}

Examples

Curated configurations from libs/framework/fluent-forms/__fixtures__/widgets/tsm-autocomplete/. Each is a complete validated FluentSchema — copy & adapt for your form.

Gen all object const — gen-all-object-const.json

Return entire object: Allows you to return the entire object instead of a single item, which is defined in "Attribute name for value".

{
  "type": "object",
  "title": "Autocomplete — Return entire object",
  "description": "Return entire object: Allows you to return the entire object instead of a single item, which is defined in \"Attribute name for value\".",
  "properties": {
    "field": {
      "type": "object",
      "oneOf": [
        {
          "title": null,
          "const": null
        }
      ],
      "widget": {
        "type": "tsm-autocomplete"
      },
      "title": "Field",
      "config": {
        "allObjectConst": false
      }
    }
  },
  "layout": [
    "field"
  ]
}

Gen disable cache — gen-disable-cache.json

Disable cache: Disable cache for script

{
  "type": "object",
  "title": "Autocomplete — Disable cache",
  "description": "Disable cache: Disable cache for script",
  "properties": {
    "field": {
      "type": "object",
      "oneOf": [
        {
          "title": null,
          "const": null
        }
      ],
      "widget": {
        "type": "tsm-autocomplete"
      },
      "title": "Field",
      "config": {
        "disableCache": true
      }
    }
  },
  "layout": [
    "field"
  ]
}

Gen force selection — gen-force-selection.json

Force selection: The forceSelection option in Autocomplete ensures that users can only select a value from the predefined options in the dropdown list. This prevents the user from entering any custom or arbitrary text

{
  "type": "object",
  "title": "Autocomplete — Force selection",
  "description": "Force selection: The forceSelection option in Autocomplete ensures that users can only select a value from the predefined options in the dropdown list. This prevents the user from entering any custom or arbitrary text",
  "properties": {
    "field": {
      "type": "object",
      "oneOf": [
        {
          "title": null,
          "const": null
        }
      ],
      "widget": {
        "type": "tsm-autocomplete"
      },
      "title": "Field",
      "config": {
        "forceSelection": false
      }
    }
  },
  "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": "Autocomplete — Show clear",
  "description": "Show clear: Sets the visibility of the delete button for clearing text in the filtering input",
  "properties": {
    "field": {
      "type": "object",
      "oneOf": [
        {
          "title": null,
          "const": null
        }
      ],
      "widget": {
        "type": "tsm-autocomplete"
      },
      "title": "Field",
      "config": {
        "showClear": false
      }
    }
  },
  "layout": [
    "field"
  ]
}

Numeric field `dtl-form-input-number`

The numeric field is an input field in a form that is used to collect numerical data from the user. The field is typically formatted to only accept numbers and can be further customized to restrict the type of numbers that are accepted. For example, the field could be set up to only accept positive numbers, whole numbers, or numbers within a certain range. Validation can also be applied to the numeric field to ensure that the entered data meets specific criteria, such as being within a certain range or having a specific number of decimal places. The use of a numeric field helps to ensure that the data collected is accurate and consistent, and also makes it easier to process the data in downstream applications.

Widget Or Layout: unknown

Value:

{
  "type": "number",
  "title": "Number",
  "widget": {
    "type": "number"
  }
}

Inputs

Fraction digits

Key: fractionDigits

Name: Fraction digits

Description: The number of decimal places that this component will contain. If you wish to allow only whole numbers, leave the value at 0

Default: 0

Step

Key: step

Name: Step

Description: How much the value should increase/decrease when the arrow is clicked. If the value is set to 0, then the value will be incremented/decremented based on "Number of decimal places".

Default: 0

Mode

Key: mode

Name: Mode

Description: Mode (decimal or currency)

Default: "decimal"

Currency

Key: currency

Name: Currency

Description: Currency

Default: "CZK"

Show buttons for steps

Key: showButtons

Name: Show buttons for steps

Default: true

Default value

Key: default

Name: Default value

Default: null

localeFormatting

Key: localeFormatting

Name: localeFormatting

Default: true

Examples

Curated configurations from libs/framework/fluent-forms/__fixtures__/widgets/dtl-form-input-number/. Each is a complete validated FluentSchema — copy & adapt for your form.

Gen fraction digits — gen-fraction-digits.json

Fraction digits: The number of decimal places that this component will contain. If you wish to allow only whole numbers, leave the value at 0

{
  "type": "object",
  "title": "Numeric field — Fraction digits",
  "description": "Fraction digits: The number of decimal places that this component will contain. If you wish to allow only whole numbers, leave the value at 0",
  "properties": {
    "field": {
      "type": "number",
      "widget": {
        "type": "number"
      },
      "title": "Field",
      "config": {
        "fractionDigits": 1
      }
    }
  },
  "layout": [
    "field"
  ]
}

Gen locale formatting — gen-locale-formatting.json

Demonstrates config.localeFormatting = false on dtl-form-input-number.

{
  "type": "object",
  "title": "Numeric field — localeFormatting",
  "description": "Demonstrates config.localeFormatting = false on dtl-form-input-number.",
  "properties": {
    "field": {
      "type": "number",
      "widget": {
        "type": "number"
      },
      "title": "Field",
      "config": {
        "localeFormatting": false
      }
    }
  },
  "layout": [
    "field"
  ]
}

Gen show buttons — gen-show-buttons.json

Demonstrates config.showButtons = false on dtl-form-input-number.

{
  "type": "object",
  "title": "Numeric field — Show buttons for steps",
  "description": "Demonstrates config.showButtons = false on dtl-form-input-number.",
  "properties": {
    "field": {
      "type": "number",
      "widget": {
        "type": "number"
      },
      "title": "Field",
      "config": {
        "showButtons": false
      }
    }
  },
  "layout": [
    "field"
  ]
}

Gen step — gen-step.json

Step: How much the value should increase/decrease when the arrow is clicked. If the value is set to 0, then the value will be incremented/decremented based on "Number of decimal places".

{
  "type": "object",
  "title": "Numeric field — Step",
  "description": "Step: How much the value should increase/decrease when the arrow is clicked. If the value is set to 0, then the value will be incremented/decremented based on \"Number of decimal places\".",
  "properties": {
    "field": {
      "type": "number",
      "widget": {
        "type": "number"
      },
      "title": "Field",
      "config": {
        "step": 1
      }
    }
  },
  "layout": [
    "field"
  ]
}

Rating `dtl-form-input-rating`

The rating field is an input field in a form that allows users to rate or score something along a numerical scale. The field represented by a row of stars, each of which can be clicked or selected to indicate a specific rating. Rating fields can be used to collect customer feedback, product reviews, or other forms of evaluation. They can also be used to collect information about personal preferences, such as movie ratings or book reviews. The use of a rating field helps to simplify the process of collecting numerical data by providing a clear and intuitive way to make selections, while also allowing for flexible and multi-faceted data collection.

Widget Or Layout: unknown

Value:

{
  "type": "number",
  "title": "Rating",
  "widget": {
    "type": "rating"
  }
}

Inputs

Default value

Key: default

Name: Default value

Default: ""

Select `dtl-select`

The select field, also known as a drop-down menu, is an input field in a form that allows users to select an option from a list of pre-defined options. The field is typically represented by a drop-down list, from which the user can select a single option. The use of a select field helps to simplify the process of collecting data, by providing a clear and concise way for users to make selections. The field can also help to ensure the accuracy and consistency of the data collected, by limiting the available options to a predefined set of values. Select fields can be used to collect a wide range of information, such as geographical locations, job titles, product categories, or any other information that can be represented by a set of predefined options. If you need selecting from TSM based data, use an appropriate component such as "Register value", "Customer segment" or "Account.

Widget Or Layout: unknown

Value:

{
  "type": "string",
  "title": "Select",
  "oneOf": [
    {
      "title": "null",
      "const": "null"
    }
  ],
  "widget": {
    "type": "select"
  }
}

Inputs

Default value

Key: default

Name: Default value

Default: ""

Select type

Key: selectType

Name: Select type

Default: "__ref:SelectType.Select"

Display first for single option

Key: displayFirstForSingleOption

Name: Display first for single option

Default: false

Unselect enabled

Key: unselectEnabled

Name: Unselect enabled

Default: false

Radio buttons direction

Key: radioButtonsDirection

Name: Radio buttons direction

Default: "__ref:RadioButtonsDirection.Horizontal"

Type

Key: type

Name: Type

Default: ""

Title

Key: title

Name: Title

Description: The title of constant select item.

Default: ""

Const

Key: const

Name: Const

Description: The value of constant select item.

Default: null

Source type

Key: optionsSource

Name: Source type

Default: ""

Script

Key: scriptCode

Name: Script

Default: ""

External data

Key: externalData

Name: External data

Description: Reference to another widget value in the form. Use a JEXL expression, e.g. $context.form.chars.myChar. The referenced value must be an array of objects matching the configured field mappings (Attribute name for value name, Attribute name for value).

Default: null

Attribute name for value name

Key: remoteFieldTitle

Name: Attribute name for value name

Description: Name of the attribute used for creating the title of the select item. e.g. name or code.

Default: null

Attribute name for value

Key: remoteFieldConst

Name: Attribute name for value

Description: Name of the attribute used for creating the value of the select item. e.g. id. When "Return entire object" is enabled, it is used as the key for comparing values (nested paths supported, e.g. customer.id).

Default: null

Return entire object

Key: allObjectConst

Name: Return entire object

Description: Allows you to return the entire object instead of a single item, which is defined in "Attribute name for value". It is recommended to also fill in "Attribute name for value" — values are then compared by that key (resilient to differing object shape/reference).

Default: false

Merge manually entered data with remote data

Key: mergeRemoteAndLocalData

Name: Merge manually entered data with remote data

Description: Tick the checkbox if you wish to merge manually inputted data with downloaded data. Tick only if this is your usecase.

Default: false

Disable cache

Key: disableCache

Name: Disable cache

Description: Disable cache for script

Default: false

Show all data

Key: showExcludeValues

Name: Show all data

Description: Show also saved data that does not match the current value menu in non-edit mode.

Default: false

Script data

Key: scriptData

Name: Script data

Description: Additional params for script evaluation

Default: null

Label mode

Key: labelMode

Name: Label mode

Default: "field"

Label template

Key: labelTemplate

Name: Label template

Default: ""

Selected value display

Key: selectedValueDisplay

Name: Selected value display

Description: Label + tooltip: shows plain text label with a tooltip containing the rendered template. Rendered template: displays the template directly in the select field.

Default: "label"

Examples

Curated configurations from libs/framework/fluent-forms/__fixtures__/widgets/dtl-select/. Each is a complete validated FluentSchema — copy & adapt for your form.

Script options — 01-script-options.json

{
  "type": "object",
  "title": "Select — SpEL script options",
  "properties": {
    "field": {
      "type": "string",
      "title": "Výběr",
      "widget": {
        "type": "select"
      },
      "config": {
        "optionsSource": "script",
        "scriptCode": "mojeData",
        "remoteFieldTitle": "hodnota",
        "remoteFieldConst": "klic"
      }
    }
  },
  "layout": [
    "field"
  ]
}

Gen all object const — gen-all-object-const.json

Return entire object: Allows you to return the entire object instead of a single item, which is defined in "Attribute name for value". It is recommended to also fill in "Attribute name for value" — values are then compared

{
  "type": "object",
  "title": "Select — Return entire object",
  "description": "Return entire object: Allows you to return the entire object instead of a single item, which is defined in \"Attribute name for value\". It is recommended to also fill in \"Attribute name for value\" — values are then compared",
  "properties": {
    "field": {
      "type": "string",
      "oneOf": [
        {
          "title": null,
          "const": null
        }
      ],
      "widget": {
        "type": "select"
      },
      "title": "Field",
      "config": {
        "allObjectConst": true
      }
    }
  },
  "layout": [
    "field"
  ]
}

Gen disable cache — gen-disable-cache.json

Disable cache: Disable cache for script

{
  "type": "object",
  "title": "Select — Disable cache",
  "description": "Disable cache: Disable cache for script",
  "properties": {
    "field": {
      "type": "string",
      "oneOf": [
        {
          "title": null,
          "const": null
        }
      ],
      "widget": {
        "type": "select"
      },
      "title": "Field",
      "config": {
        "disableCache": true
      }
    }
  },
  "layout": [
    "field"
  ]
}

Gen display first for single option — gen-display-first-for-single-option.json

Demonstrates config.displayFirstForSingleOption = true on dtl-select.

{
  "type": "object",
  "title": "Select — Display first for single option",
  "description": "Demonstrates config.displayFirstForSingleOption = true on dtl-select.",
  "properties": {
    "field": {
      "type": "string",
      "oneOf": [
        {
          "title": null,
          "const": null
        }
      ],
      "widget": {
        "type": "select"
      },
      "title": "Field",
      "config": {
        "displayFirstForSingleOption": true
      }
    }
  },
  "layout": [
    "field"
  ]
}

Gen merge remote and local data — gen-merge-remote-and-local-data.json

Merge manually entered data with remote data: Tick the checkbox if you wish to merge manually inputted data with downloaded data. Tick only if this is your usecase.

{
  "type": "object",
  "title": "Select — Merge manually entered data with remote data",
  "description": "Merge manually entered data with remote data: Tick the checkbox if you wish to merge manually inputted data with downloaded data. Tick only if this is your usecase.",
  "properties": {
    "field": {
      "type": "string",
      "oneOf": [
        {
          "title": null,
          "const": null
        }
      ],
      "widget": {
        "type": "select"
      },
      "title": "Field",
      "config": {
        "mergeRemoteAndLocalData": true
      }
    }
  },
  "layout": [
    "field"
  ]
}

Gen show exclude values — gen-show-exclude-values.json

Show all data: Show also saved data that does not match the current value menu in non-edit mode.

{
  "type": "object",
  "title": "Select — Show all data",
  "description": "Show all data: Show also saved data that does not match the current value menu in non-edit mode.",
  "properties": {
    "field": {
      "type": "string",
      "oneOf": [
        {
          "title": null,
          "const": null
        }
      ],
      "widget": {
        "type": "select"
      },
      "title": "Field",
      "config": {
        "showExcludeValues": true
      }
    }
  },
  "layout": [
    "field"
  ]
}

Gen unselect enabled — gen-unselect-enabled.json

Demonstrates config.unselectEnabled = true on dtl-select.

{
  "type": "object",
  "title": "Select — Unselect enabled",
  "description": "Demonstrates config.unselectEnabled = true on dtl-select.",
  "properties": {
    "field": {
      "type": "string",
      "oneOf": [
        {
          "title": null,
          "const": null
        }
      ],
      "widget": {
        "type": "select"
      },
      "title": "Field",
      "config": {
        "unselectEnabled": true
      }
    }
  },
  "layout": [
    "field"
  ]
}

Date & Time `dtl-form-input-date`

The date time field is an input field in a form that is used to collect date and time information from the user. Use configuration to select if the user should input Date and / Or Time parts. The field presents the user with a calendar-style interface, making it easy to select a specific date and time. Date fields may include validation to ensure that the entered data meets specific criteria, such as being within a certain range or being a valid date format.

Widget Or Layout: unknown

Value:

{
  "type": "string",
  "title": "Date",
  "widget": {
    "type": "date"
  }
}

Inputs

Default value

Key: default

Name: Default value

Default: ""

Show icon

Key: showIcon

Name: Show icon

Description: If enabled, the icon will be displayed.

Default: true

Show delete value icon

Key: showCloseIcon

Name: Show delete value icon

Description: If enabled, the delete value icon(X) will be displayed.

Default: true

View Time

Key: showTime

Name: View Time

Description: If enabled the time will be also displayed.

Default: false

Show seconds

Key: showSeconds

Name: Show seconds

Description: If enabled the seconds will be also displayed.

Default: null

Show milliseconds

Key: showMilliseconds

Name: Show milliseconds

Description: If enabled, the milliseconds will be displayed.

Default: false

Time only

Key: timeOnly

Name: Time only

Description: If enabled, the date will not be displayed.

Default: false

Month and year

Key: monthYear

Name: Month and year

Description: If enabled, the month and year be displayed.

Default: false

Round end date

Key: roundEndDate

Name: Round end date

Description: If "time display" is not checked, the selected date is always rounded to the end of the day.

Default: false

Show pick datetime button

Key: showPickDateTimeButton

Name: Show pick datetime button

Description: Show pick datetime button

Default: true

Pick datetime button label

Key: pickDateTimeButtonLabel

Name: Pick datetime button label

Description: Pick datetime button label

Default: null

Min date

Key: minDate

Name: Min date

Default: null

Max date

Key: maxDate

Name: Max date

Default: null

Chip css class

Key: chipClass

Name: Chip css class

Description: CSS class for the dates difference

Default: null

Countdown time from

Key: countdownTimeFrom

Name: Countdown time from

Description: Displayes difference between two dates. (For example: "16.03.2023 (7d 5h 3min)")

Default: null

Examples

Curated configurations from libs/framework/fluent-forms/__fixtures__/widgets/dtl-form-input-date/. Each is a complete validated FluentSchema — copy & adapt for your form.

Gen month year — gen-month-year.json

Month and year: If enabled, the month and year be displayed.

{
  "type": "object",
  "title": "Date & Time — Month and year",
  "description": "Month and year: If enabled, the month and year be displayed.",
  "properties": {
    "field": {
      "type": "string",
      "widget": {
        "type": "date"
      },
      "title": "Field",
      "config": {
        "monthYear": true
      }
    }
  },
  "layout": [
    "field"
  ]
}

Gen show close icon — gen-show-close-icon.json

Show delete value icon: If enabled, the delete value icon(X) will be displayed.

{
  "type": "object",
  "title": "Date & Time — Show delete value icon",
  "description": "Show delete value icon: If enabled, the delete value icon(X) will be displayed.",
  "properties": {
    "field": {
      "type": "string",
      "widget": {
        "type": "date"
      },
      "title": "Field",
      "config": {
        "showCloseIcon": false
      }
    }
  },
  "layout": [
    "field"
  ]
}

Gen show icon — gen-show-icon.json

Show icon: If enabled, the icon will be displayed.

{
  "type": "object",
  "title": "Date & Time — Show icon",
  "description": "Show icon: If enabled, the icon will be displayed.",
  "properties": {
    "field": {
      "type": "string",
      "widget": {
        "type": "date"
      },
      "title": "Field",
      "config": {
        "showIcon": false
      }
    }
  },
  "layout": [
    "field"
  ]
}

Gen show milliseconds — gen-show-milliseconds.json

Show milliseconds: If enabled, the milliseconds will be displayed.

{
  "type": "object",
  "title": "Date & Time — Show milliseconds",
  "description": "Show milliseconds: If enabled, the milliseconds will be displayed.",
  "properties": {
    "field": {
      "type": "string",
      "widget": {
        "type": "date"
      },
      "title": "Field",
      "config": {
        "showMilliseconds": true
      }
    }
  },
  "layout": [
    "field"
  ]
}

Gen show time — gen-show-time.json

View Time: If enabled the time will be also displayed.

{
  "type": "object",
  "title": "Date & Time — View Time",
  "description": "View Time: If enabled the time will be also displayed.",
  "properties": {
    "field": {
      "type": "string",
      "widget": {
        "type": "date"
      },
      "title": "Field",
      "config": {
        "showTime": true
      }
    }
  },
  "layout": [
    "field"
  ]
}

Gen time only — gen-time-only.json

Time only: If enabled, the date will not be displayed.

{
  "type": "object",
  "title": "Date & Time — Time only",
  "description": "Time only: If enabled, the date will not be displayed.",
  "properties": {
    "field": {
      "type": "string",
      "widget": {
        "type": "date"
      },
      "title": "Field",
      "config": {
        "timeOnly": true
      }
    }
  },
  "layout": [
    "field"
  ]
}

Icon picker `tsm-form-input-icon-picker`

The icon picker is an input field on a form that is used to select an icon displayed next to the form input field. The icon will be placed on the left or right side of the form field.

Widget Or Layout: unknown

Value:

{
  "type": "string",
  "title": "Icon",
  "widget": {
    "type": "tsm-form-input-icon-picker"
  }
}

Inputs

Default value

Key: default

Name: Default value

Default: ""

Barcode and QR code scanner `tsm-barcode-scanner`

A field whose value can be read from a barcode or QR code using the device camera. The scanned code is shown to the user and stored only after confirmation.

Widget Or Layout: unknown

Value:

{
  "type": "string",
  "title": "Scanned code",
  "widget": {
    "type": "tsm-barcode-scanner"
  }
}

Inputs

default

Key: default

Name: default

Default: ""

jsonProperty

Key: jsonProperty

Name: jsonProperty

Default: ""

scanPattern

Key: scanPattern

Name: scanPattern

Default: ""

allowPhotoFallback

Key: allowPhotoFallback

Name: allowPhotoFallback

Default: true

showClear

Key: showClear

Name: showClear

Default: true

Examples

Curated configurations from libs/framework/fluent-forms/__fixtures__/widgets/tsm-barcode-scanner/. Each is a complete validated FluentSchema — copy & adapt for your form.

Basic — 01-basic.json

Serial number of a device read from its barcode label during a field visit.

{
  "type": "object",
  "title": "Barcode scanner — serial number",
  "description": "Serial number of a device read from its barcode label during a field visit.",
  "properties": {
    "serialNumber": {
      "type": "string",
      "title": "Sériové číslo elektroměru",
      "widget": {
        "type": "tsm-barcode-scanner",
        "placeholder": "Načtěte kód nebo zadejte ručně",
        "required": true
      },
      "config": {
        "scanPattern": "^\\d{16}$",
        "allowPhotoFallback": true,
        "showClear": true
      }
    }
  },
  "required": [
    "serialNumber"
  ],
  "layout": [
    "serialNumber"
  ]
}

Json property — 02-json-property.json

QR code carrying a JSON payload; only the configured property is stored in the form value.

{
  "type": "object",
  "title": "Barcode scanner — property of a JSON payload",
  "description": "QR code carrying a JSON payload; only the configured property is stored in the form value.",
  "properties": {
    "iban": {
      "type": "string",
      "title": "IBAN z QR platby",
      "widget": {
        "type": "tsm-barcode-scanner",
        "readonly": false
      },
      "config": {
        "jsonProperty": "payment.iban",
        "allowPhotoFallback": false,
        "showClear": true
      }
    }
  },
  "layout": [
    "iban"
  ]
}

Gen allow photo fallback — gen-allow-photo-fallback.json

Demonstrates config.allowPhotoFallback = false on tsm-barcode-scanner.

{
  "type": "object",
  "title": "Barcode and QR code scanner — allowPhotoFallback",
  "description": "Demonstrates config.allowPhotoFallback = false on tsm-barcode-scanner.",
  "properties": {
    "field": {
      "type": "string",
      "widget": {
        "type": "tsm-barcode-scanner"
      },
      "title": "Field",
      "config": {
        "allowPhotoFallback": false
      }
    }
  },
  "layout": [
    "field"
  ]
}

Gen scan pattern — gen-scan-pattern.json

Demonstrates config.scanPattern = "^[A-Za-z0-9]+$" on tsm-barcode-scanner.

{
  "type": "object",
  "title": "Barcode and QR code scanner — scanPattern",
  "description": "Demonstrates config.scanPattern = \"^[A-Za-z0-9]+$\" on tsm-barcode-scanner.",
  "properties": {
    "field": {
      "type": "string",
      "widget": {
        "type": "tsm-barcode-scanner"
      },
      "title": "Field",
      "config": {
        "scanPattern": "^[A-Za-z0-9]+$"
      }
    }
  },
  "layout": [
    "field"
  ]
}

Gen show clear — gen-show-clear.json

Demonstrates config.showClear = false on tsm-barcode-scanner.

{
  "type": "object",
  "title": "Barcode and QR code scanner — showClear",
  "description": "Demonstrates config.showClear = false on tsm-barcode-scanner.",
  "properties": {
    "field": {
      "type": "string",
      "widget": {
        "type": "tsm-barcode-scanner"
      },
      "title": "Field",
      "config": {
        "showClear": false
      }
    }
  },
  "layout": [
    "field"
  ]
}

Location coordinates `tsm-geolocation-input`

Two coordinates with one-time device location acquisition, measurement accuracy, and optional manual entry or an unavailability reason.

Widget Or Layout: unknown

Value:

{
  "type": "object",
  "title": "Location coordinates",
  "widget": {
    "type": "tsm-geolocation-input"
  }
}

Inputs

Allow manual coordinate entry

Key: allowManualEntry

Name: Allow manual coordinate entry

Description: A technician can enter latitude and longitude without retrieving the current location.

Default: true

Allow completion without coordinates

Key: allowUnavailable

Name: Allow completion without coordinates

Description: A technician can confirm that the location could not be determined and provide a reason.

Default: false

Accuracy warning threshold (m)

Key: accuracyThreshold

Name: Accuracy warning threshold (m)

Description: When the result is less accurate, the application advises the technician to measure again.

Default: 20

Maximum fallback measurement age (ms)

Key: fallbackMaximumAge

Name: Maximum fallback measurement age (ms)

Description: Zero requires a fresh measurement. A value of 60000 allows a measurement up to one minute old.

Default: 0

Examples

Curated configurations from libs/framework/fluent-forms/__fixtures__/widgets/tsm-geolocation-input/. Each is a complete validated FluentSchema — copy & adapt for your form.

Field visit — 01-field-visit.json

A required location with manual coordinate entry and a 20 metre accuracy warning. Only fresh measurements are accepted from the browser cache.

{
  "type": "object",
  "title": "Device location during a technician's field visit",
  "description": "A required location with manual coordinate entry and a 20 metre accuracy warning. Only fresh measurements are accepted from the browser cache.",
  "properties": {
    "location": {
      "type": "object",
      "title": "Poloha zařízení",
      "widget": {
        "type": "tsm-geolocation-input",
        "required": true,
        "labelPosition": "top"
      },
      "config": {
        "allowManualEntry": true,
        "allowUnavailable": false,
        "accuracyThreshold": 20,
        "fallbackMaximumAge": 0
      }
    }
  },
  "required": [
    "location"
  ],
  "layout": [
    "location"
  ]
}

Unavailable with reason — 02-unavailable-with-reason.json

A technician can enter both coordinates or explicitly record unavailability with a reason. An acquisition error alone does not satisfy the required field.

{
  "type": "object",
  "title": "Required location with an explicit field-work exception",
  "description": "A technician can enter both coordinates or explicitly record unavailability with a reason. An acquisition error alone does not satisfy the required field.",
  "properties": {
    "location": {
      "type": "object",
      "title": "Poloha při zásahu",
      "widget": {
        "type": "tsm-geolocation-input",
        "required": true,
        "labelPosition": "left"
      },
      "config": {
        "allowManualEntry": true,
        "allowUnavailable": true,
        "accuracyThreshold": 20,
        "fallbackMaximumAge": 0
      }
    }
  },
  "required": [
    "location"
  ],
  "layout": [
    "location"
  ]
}

Gen accuracy threshold — gen-accuracy-threshold.json

Accuracy warning threshold (m): When the result is less accurate, the application advises the technician to measure again.

{
  "type": "object",
  "title": "Location coordinates — Accuracy warning threshold (m)",
  "description": "Accuracy warning threshold (m): When the result is less accurate, the application advises the technician to measure again.",
  "properties": {
    "field": {
      "type": "object",
      "widget": {
        "type": "tsm-geolocation-input"
      },
      "title": "Field",
      "config": {
        "accuracyThreshold": 40
      }
    }
  },
  "layout": [
    "field"
  ]
}

Gen allow manual entry — gen-allow-manual-entry.json

Allow manual coordinate entry: A technician can enter latitude and longitude without retrieving the current location.

{
  "type": "object",
  "title": "Location coordinates — Allow manual coordinate entry",
  "description": "Allow manual coordinate entry: A technician can enter latitude and longitude without retrieving the current location.",
  "properties": {
    "field": {
      "type": "object",
      "widget": {
        "type": "tsm-geolocation-input"
      },
      "title": "Field",
      "config": {
        "allowManualEntry": false
      }
    }
  },
  "layout": [
    "field"
  ]
}

Gen allow unavailable — gen-allow-unavailable.json

Allow completion without coordinates: A technician can confirm that the location could not be determined and provide a reason.

{
  "type": "object",
  "title": "Location coordinates — Allow completion without coordinates",
  "description": "Allow completion without coordinates: A technician can confirm that the location could not be determined and provide a reason.",
  "properties": {
    "field": {
      "type": "object",
      "widget": {
        "type": "tsm-geolocation-input"
      },
      "title": "Field",
      "config": {
        "allowUnavailable": true
      }
    }
  },
  "layout": [
    "field"
  ]
}

Gen fallback maximum age — gen-fallback-maximum-age.json

Maximum fallback measurement age (ms): Zero requires a fresh measurement. A value of 60000 allows a measurement up to one minute old.

{
  "type": "object",
  "title": "Location coordinates — Maximum fallback measurement age (ms)",
  "description": "Maximum fallback measurement age (ms): Zero requires a fresh measurement. A value of 60000 allows a measurement up to one minute old.",
  "properties": {
    "field": {
      "type": "object",
      "widget": {
        "type": "tsm-geolocation-input"
      },
      "title": "Field",
      "config": {
        "fallbackMaximumAge": 1
      }
    }
  },
  "layout": [
    "field"
  ]
}

Time interval `dtl-form-input-duration`

Widget Or Layout: unknown

Value:

{
  "type": "number",
  "title": "Time interval",
  "config": {
    "showDays": true,
    "showHours": true,
    "showMinutes": true,
    "unit": "minutes",
    "hoursPerDay": 24
  },
  "widget": {
    "type": "duration"
  }
}

Inputs

Allow days

Key: showDays

Name: Allow days

Description: Show the days input field in edit mode.

Default: true

Allow hours

Key: showHours

Name: Allow hours

Description: Show the hours input field in edit mode.

Default: true

Allow minutes

Key: showMinutes

Name: Allow minutes

Description: Show the minutes input field in edit mode.

Default: true

Storage unit

Key: unit

Name: Storage unit

Description: Unit in which the resulting numeric value is stored (days, hours or minutes). For example, with the "minutes" unit the value 132 is displayed as "2h 12min".

Default: "minutes"

Hours per day

Key: hoursPerDay

Name: Hours per day

Description: How many hours make up one day when converting to the "days" field. 24 = calendar day, 8 = working day (effort estimation). Default 24.

Default: 24

Default value

Key: default

Name: Default value

Default: null

Examples

Curated configurations from libs/framework/fluent-forms/__fixtures__/widgets/dtl-form-input-duration/. Each is a complete validated FluentSchema — copy & adapt for your form.

Gen hours per day — gen-hours-per-day.json

Hours per day: How many hours make up one day when converting to the "days" field. 24 = calendar day, 8 = working day (effort estimation). Default 24.

{
  "type": "object",
  "title": "Time interval — Hours per day",
  "description": "Hours per day: How many hours make up one day when converting to the \"days\" field. 24 = calendar day, 8 = working day (effort estimation). Default 24.",
  "properties": {
    "field": {
      "type": "number",
      "config": {
        "showDays": true,
        "showHours": true,
        "showMinutes": true,
        "unit": "minutes",
        "hoursPerDay": 48
      },
      "widget": {
        "type": "duration"
      },
      "title": "Field"
    }
  },
  "layout": [
    "field"
  ]
}

Gen show days — gen-show-days.json

Allow days: Show the days input field in edit mode.

{
  "type": "object",
  "title": "Time interval — Allow days",
  "description": "Allow days: Show the days input field in edit mode.",
  "properties": {
    "field": {
      "type": "number",
      "config": {
        "showDays": false,
        "showHours": true,
        "showMinutes": true,
        "unit": "minutes",
        "hoursPerDay": 24
      },
      "widget": {
        "type": "duration"
      },
      "title": "Field"
    }
  },
  "layout": [
    "field"
  ]
}

Gen show hours — gen-show-hours.json

Allow hours: Show the hours input field in edit mode.

{
  "type": "object",
  "title": "Time interval — Allow hours",
  "description": "Allow hours: Show the hours input field in edit mode.",
  "properties": {
    "field": {
      "type": "number",
      "config": {
        "showDays": true,
        "showHours": false,
        "showMinutes": true,
        "unit": "minutes",
        "hoursPerDay": 24
      },
      "widget": {
        "type": "duration"
      },
      "title": "Field"
    }
  },
  "layout": [
    "field"
  ]
}

Gen show minutes — gen-show-minutes.json

Allow minutes: Show the minutes input field in edit mode.

{
  "type": "object",
  "title": "Time interval — Allow minutes",
  "description": "Allow minutes: Show the minutes input field in edit mode.",
  "properties": {
    "field": {
      "type": "number",
      "config": {
        "showDays": true,
        "showHours": true,
        "showMinutes": false,
        "unit": "minutes",
        "hoursPerDay": 24
      },
      "widget": {
        "type": "duration"
      },
      "title": "Field"
    }
  },
  "layout": [
    "field"
  ]
}

Checkbox dtl-form-input-checkbox​

Link dtl-form-input-link​

Inputs​

Examples​

Text Item dtl-form-input-text​

Inputs​

Examples​

Long text dtl-form-input-textarea​

Inputs​

Examples​

Mask Field dtl-form-input-mask​

Inputs​

Examples​

Tri state checkbox dtl-form-input-tri-state-checkbox​

Editor dtl-form-input-tiptap​

Inputs​

Examples​

Password dtl-form-input-password​

Inputs​

Examples​

Switch dtl-form-input-switch​

Inputs​

Examples​

Autocomplete tsm-autocomplete​

Inputs​

Examples​

Numeric field dtl-form-input-number​

Inputs​

Examples​

Rating dtl-form-input-rating​

Inputs​

Select dtl-select​

Inputs​

Examples​

Date & Time dtl-form-input-date​

Inputs​

Examples​

Icon picker tsm-form-input-icon-picker​

Inputs​

Barcode and QR code scanner tsm-barcode-scanner​

Inputs​

Examples​

Location coordinates tsm-geolocation-input​

Inputs​

Examples​

Time interval dtl-form-input-duration​

Inputs​

Examples​

Checkbox `dtl-form-input-checkbox`

Link `dtl-form-input-link`

Inputs

Examples

Text Item `dtl-form-input-text`

Inputs

Examples

Long text `dtl-form-input-textarea`

Inputs

Examples

Mask Field `dtl-form-input-mask`

Inputs

Examples

Tri state checkbox `dtl-form-input-tri-state-checkbox`

Editor `dtl-form-input-tiptap`

Inputs

Examples

Password `dtl-form-input-password`

Inputs

Examples

Switch `dtl-form-input-switch`

Inputs

Examples

Autocomplete `tsm-autocomplete`

Inputs

Examples

Numeric field `dtl-form-input-number`

Inputs

Examples

Rating `dtl-form-input-rating`

Inputs

Select `dtl-select`

Inputs

Examples

Date & Time `dtl-form-input-date`

Inputs

Examples

Icon picker `tsm-form-input-icon-picker`

Inputs

Barcode and QR code scanner `tsm-barcode-scanner`

Inputs

Examples

Location coordinates `tsm-geolocation-input`

Inputs

Examples

Time interval `dtl-form-input-duration`

Inputs

Examples