Layout Widgets
Accordions dtl-fluent-accordion
The accordion is a UI component used to display and organize content in a collapsible manner, allowing users to expand or collapse sections of content as needed. It consists of multiple sections or panels, with a title for each section and its associated content displayed in the body of the panel. When a user clicks on the title of a panel, the content of that panel is expanded, upon clicking again, it is collapsed.
Widget Or Layout: unknown
Value:
{
"type": "layout",
"widget": {
"type": "dtl-fluent-accordion"
},
"items": [],
"config": {
"accordions": [
{
"header": "Accordion",
"content": []
}
]
}
}
Inputs
Key for accordions remembering cache
Key: storedAccordionsActiveIndex
Name: Key for accordions remembering cache
Description: A unique identifier that the application uses to store and retrieve the cached accordion data.
Default: ""
Disable lazy loading
Key: disableLazy
Name: Disable lazy loading
Description: Disables lazy loading of accordion content. Content is rendered immediately instead of after accordion selection.
Default: false
Accordion name
Key: header
Name: Accordion name
Description: The title which will be displayed for this component.
Default: "__expr:this.translocoService.translate( translation.fluentAccordionEditor.newTab, )"
Hidden
Key: hidden
Name: Hidden
Description: Tick the checkbox if you wish the component to be hidden. It can also be controlled with an expression using the expression editor.
Default: false
Privilege
Key: priv
Name: Privilege
Description: The privilege for displaying and editing this component.
Default: null
Icon
Key: icon
Name: Icon
Description: The icon of this component.
Default: null
iconColor
Key: iconColor
Name: iconColor
Default: null
Opened
Key: selected
Name: Opened
Description: Tick the checkbox if you wish the accordion to be expanded by default.
Default: null
Examples
Curated configurations from libs/framework/fluent-forms/__fixtures__/widgets/dtl-fluent-accordion/.
Each is a complete validated FluentSchema — copy & adapt for your form.
Gen disable lazy — gen-disable-lazy.json
Disable lazy loading: Disables lazy loading of accordion content. Content is rendered immediately instead of after accordion selection.
{
"type": "object",
"title": "Accordions — Disable lazy loading",
"description": "Disable lazy loading: Disables lazy loading of accordion content. Content is rendered immediately instead of after accordion selection.",
"properties": {},
"layout": [
{
"type": "layout",
"widget": {
"type": "dtl-fluent-accordion"
},
"items": [],
"config": {
"accordions": [
{
"header": "Accordion",
"content": []
}
],
"disableLazy": true
}
}
]
}
Anchor dtl-fluent-anchor
The widget inserts an HTML <div> with a specified ID into the DOM and automatically scrolls to it when the page loads. This is useful for directing users to a specific section of a webpage upon loading.
Widget Or Layout: unknown
Value:
{
"type": "layout",
"widget": {
"type": "dtl-fluent-anchor"
},
"items": [],
"config": {}
}
Inputs
ID
Key: scrollId
Name: ID
Description: On an anchor with the selected ID, it will be automatically scrolled down in the form after it is opened, if the URL used to open the form contains this ID as a parameter.
Example: .../dashboard/9134d5eb-944c-4d09-ba62-b9be6458208e#SCROLL_TARGET_1
Default: ""
Back button tsm-button-back
The back button element is used for returning to the previous page upon clicking.
Widget Or Layout: unknown
Value:
{
"type": "layout",
"widget": {
"type": "tsm-button-back"
}
}
Inputs
Name
Key: label
Name: Name
Description: The title which will be displayed for this component.
Default: ""
Router link within the application
Key: routerLink
Name: Router link within the application
Description: The router link where the user will be navigated to upon clicking the button. For example "/ordering/order-type". If you wish to only redirect the user to the previous page, leave this option empty.
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 bar dtl-fluent-bar
The button bar component creates a section which you can open by clicking on it. Inside the section you can put additional content such as a Text item, Password field or a Checkbox. These items are only visible when the section is opened. You can add a custom text in the button bar label - for example "More", or "Click to view". There are other customizable options such as a tooltip or a CSS class.
Widget Or Layout: unknown
Value:
{
"type": "layout",
"widget": {
"type": "dtl-fluent-bar"
},
"items": []
}
Inputs
Disable lazy loading
Key: disableLazy
Name: Disable lazy loading
Description: Disables lazy loading of the bar content. The inner widgets and their forms are instantiated immediately and remain alive even when the bar is closed (validation keeps running).
Default: false
Icon
Key: icon
Name: Icon
Description: The icon class for this component.
Default: "pi pi-chevron-down"
Icon position
Key: iconPos
Name: Icon position
Description: The position of the icon for this component. It can also be controlled with an expression using the expression editor.
Default: "right"
Button Appearance
Key: buttonAppearance
Name: Button Appearance
Description: Appearance defines the type of graphical design of the button.
Default: "p-button"
Button shape
Key: buttonShape
Name: Button shape
Description: Rounded shape renders a labeled button as a pill. An icon-only button becomes fully circular.
Default: "default"
Button Severity
Key: buttonSeverity
Name: Button Severity
Description: Severity defines the button's color design.
Default: "p-button-secondary"
Dismissable on outside click
Key: dismissable
Name: Dismissable on outside click
Description: When enabled, the panel closes when clicking outside of it.
Default: false
Close on content click
Key: closeOnContentClick
Name: Close on content click
Description: When enabled, the panel closes on any click inside its content, regardless of what was clicked.
Default: false
Button label
Key: label
Name: Button label
Description: The label for this component. Leave empty to render icon-only.
Default: "__expr:injectAndTranslateDefault(translationShared.shared.more)"
Examples
Curated configurations from libs/framework/fluent-forms/__fixtures__/widgets/dtl-fluent-bar/.
Each is a complete validated FluentSchema — copy & adapt for your form.
Gen close on content click — gen-close-on-content-click.json
Close on content click: When enabled, the panel closes on any click inside its content, regardless of what was clicked.
{
"type": "object",
"title": "Button bar — Close on content click",
"description": "Close on content click: When enabled, the panel closes on any click inside its content, regardless of what was clicked.",
"properties": {},
"layout": [
{
"type": "layout",
"widget": {
"type": "dtl-fluent-bar"
},
"items": [],
"config": {
"closeOnContentClick": true
}
}
]
}
Gen disable lazy — gen-disable-lazy.json
Disable lazy loading: Disables lazy loading of the bar content. The inner widgets and their forms are instantiated immediately and remain alive even when the bar is closed (validation keeps running).
{
"type": "object",
"title": "Button bar — Disable lazy loading",
"description": "Disable lazy loading: Disables lazy loading of the bar content. The inner widgets and their forms are instantiated immediately and remain alive even when the bar is closed (validation keeps running).",
"properties": {},
"layout": [
{
"type": "layout",
"widget": {
"type": "dtl-fluent-bar"
},
"items": [],
"config": {
"disableLazy": true
}
}
]
}
Gen dismissable — gen-dismissable.json
Dismissable on outside click: When enabled, the panel closes when clicking outside of it.
{
"type": "object",
"title": "Button bar — Dismissable on outside click",
"description": "Dismissable on outside click: When enabled, the panel closes when clicking outside of it.",
"properties": {},
"layout": [
{
"type": "layout",
"widget": {
"type": "dtl-fluent-bar"
},
"items": [],
"config": {
"dismissable": true
}
}
]
}
Gen icon pos — gen-icon-pos.json
Icon position: The position of the icon for this component. It can also be controlled with an expression using the expression editor.
{
"type": "object",
"title": "Button bar — Icon position",
"description": "Icon position: The position of the icon for this component. It can also be controlled with an expression using the expression editor.",
"properties": {},
"layout": [
{
"type": "layout",
"widget": {
"type": "dtl-fluent-bar"
},
"items": [],
"config": {
"iconPos": "p-icon-search"
}
}
]
}
Gen icon — gen-icon.json
Icon: The icon class for this component.
{
"type": "object",
"title": "Button bar — Icon",
"description": "Icon: The icon class for this component.",
"properties": {},
"layout": [
{
"type": "layout",
"widget": {
"type": "dtl-fluent-bar"
},
"items": [],
"config": {
"icon": "p-icon-search"
}
}
]
}
Card dtl-fluent-card
The card component presents information in a compact, organized manner, and is commonly used to display information such as product detail or profiles.
Widget Or Layout: unknown
Value:
{
"type": "layout",
"widget": {
"type": "dtl-fluent-card"
},
"items": []
}
Inputs
Card Title
Key: header
Name: Card Title
Description: The title of this card. It can also be controlled with an expression using the expression editor.
Default: null
Card title after minimize
Key: headerAfterMinimize
Name: Card title after minimize
Description: The title of this card after minimizing. It can also be controlled with an expression using the expression editor.
Default: null
Card title URL link
Key: headerLink
Name: Card title URL link
Description: Enter the URL to redirect the user when clicking on the card title. If left empty, the title will not be clickable.
Default: null
External link
Key: headerTarget
Name: External link
Description: Opens external link in a new tab
Default: false
Icon
Key: headerIconClass
Name: Icon
Description: The icon of this component. It can also be controlled with an expression using the expression editor.
Default: null
Color highlight
Key: cardType
Name: Color highlight
Description: Color highlighting of the card. It can also be controlled with an expression using the expression editor.
Default: null
Color background highlight
Key: cardColor
Name: Color background highlight
Description: Color background highlighting of the card. It can also be controlled with an expression using the expression editor.
Default: null
Remove card styling
Key: disableCard
Name: Remove card styling
Description: Removes the card's border, shadow, and background, displaying it as a plain container.
Default: false
Control buttons
Key: buttonsOnHover
Name: Control buttons
Default: false
Enable action button
Key: activeButton
Name: Enable action button
Description: Enable action button
Default: false
Disable maximize button
Key: disableMaximize
Name: Disable maximize button
Description: Tick the checkbox to disable the maximize button. The button is present only on forms of type Dashboard. It can also be controlled with an expression using the expression editor.
Default: false
Disable minimize button
Key: disableMinimize
Name: Disable minimize button
Description: Tick the checkbox to disable the minimize button. The button is present only on forms of type Dashboard. It can also be controlled with an expression using the expression editor.
Default: false
Minimized by default
Key: minimizedByDefault
Name: Minimized by default
Description: Tick the checkbox if you wish the card to be minimized by default. It can also be controlled with an expression using the expression editor.
Default: false
Fullscreen
Key: fullscreen
Name: Fullscreen
Description: Tick the checkbox if you wish the card to be in fullscreen mode.
Default: false
Disable fullscreen close
Key: disableFullscreenClose
Name: Disable fullscreen close
Description: Button close will be hidden in fullscreen mode
Default: false
Examples
Curated configurations from libs/framework/fluent-forms/__fixtures__/widgets/dtl-fluent-card/.
Each is a complete validated FluentSchema — copy & adapt for your form.
Gen active button — gen-active-button.json
Enable action button: Enable action button
{
"type": "object",
"title": "Card — Enable action button",
"description": "Enable action button: Enable action button",
"properties": {},
"layout": [
{
"type": "layout",
"widget": {
"type": "dtl-fluent-card"
},
"items": [],
"config": {
"activeButton": true
}
}
]
}
Gen buttons on hover — gen-buttons-on-hover.json
Demonstrates config.buttonsOnHover = true on dtl-fluent-card.
{
"type": "object",
"title": "Card — Control buttons",
"description": "Demonstrates config.buttonsOnHover = true on dtl-fluent-card.",
"properties": {},
"layout": [
{
"type": "layout",
"widget": {
"type": "dtl-fluent-card"
},
"items": [],
"config": {
"buttonsOnHover": true
}
}
]
}
Gen disable card — gen-disable-card.json
Remove card styling: Removes the card's border, shadow, and background, displaying it as a plain container.
{
"type": "object",
"title": "Card — Remove card styling",
"description": "Remove card styling: Removes the card's border, shadow, and background, displaying it as a plain container.",
"properties": {},
"layout": [
{
"type": "layout",
"widget": {
"type": "dtl-fluent-card"
},
"items": [],
"config": {
"disableCard": true
}
}
]
}
Gen disable maximize — gen-disable-maximize.json
Disable maximize button: Tick the checkbox to disable the maximize button. The button is present only on forms of type Dashboard. It can also be controlled with an expression using the expression editor.
{
"type": "object",
"title": "Card — Disable maximize button",
"description": "Disable maximize button: Tick the checkbox to disable the maximize button. The button is present only on forms of type Dashboard. It can also be controlled with an expression using the expression editor.",
"properties": {},
"layout": [
{
"type": "layout",
"widget": {
"type": "dtl-fluent-card"
},
"items": [],
"config": {
"disableMaximize": true
}
}
]
}
Gen disable minimize — gen-disable-minimize.json
Disable minimize button: Tick the checkbox to disable the minimize button. The button is present only on forms of type Dashboard. It can also be controlled with an expression using the expression editor.
{
"type": "object",
"title": "Card — Disable minimize button",
"description": "Disable minimize button: Tick the checkbox to disable the minimize button. The button is present only on forms of type Dashboard. It can also be controlled with an expression using the expression editor.",
"properties": {},
"layout": [
{
"type": "layout",
"widget": {
"type": "dtl-fluent-card"
},
"items": [],
"config": {
"disableMinimize": true
}
}
]
}
Gen header target — gen-header-target.json
External link: Opens external link in a new tab
{
"type": "object",
"title": "Card — External link",
"description": "External link: Opens external link in a new tab",
"properties": {},
"layout": [
{
"type": "layout",
"widget": {
"type": "dtl-fluent-card"
},
"items": [],
"config": {
"headerTarget": true
}
}
]
}
Clone dtl-fluent-clone
The special component to allow duplication of a form section to a different place. Use "Clone key" attribute of an object to mark the object with custom key (for example "productDetail") and then use the key in this component configuration. This is intended to position parts of the form in different sections based on the form usage. Typically this is the case of Detail form within listings or on a seperate page.
Widget Or Layout: unknown
Value:
{
"type": "layout",
"widget": {
"type": "dtl-fluent-clone"
},
"items": []
}
Inputs
Clone key
Key: cloneKey
Name: Clone key
Description: The key for copying of content into the clone component
Default: ""
Content dtl-fluent-content
The content component is used to embed text created with the Editor component(see Editor description).
Widget Or Layout: unknown
Value:
{
"type": "layout",
"widget": {
"type": "dtl-fluent-content"
},
"config": {
"html": ""
}
}
Inputs
Content
Key: html
Name: Content
Description: The content which will be displayed in the component. It is inputted using the editor.
Default: null
Delimited inline dtl-fluent-delimited
The delimited inline layout renders child items next to each other and inserts a configurable separator only between adjacent non-empty values. It is useful for compact readonly combinations such as user / group pairs.
Widget Or Layout: unknown
Value:
{
"type": "layout",
"widget": {
"type": "dtl-fluent-delimited"
},
"config": {
"delimiter": "/"
},
"items": []
}
Inputs
Delimiter
Key: delimiter
Name: Delimiter
Description: Separator rendered between inline items when both adjacent values are non-empty.
Default: "/"
External content dtl-fluent-iframe
External content(iframe) is to embed external content into the current page. This makes it possible to view content from another source without leaving the current page. For example, an iframe can be used to display a map or a video from another website. The content can be interacted with within the iframe just as if it was being viewed on its own page.
Widget Or Layout: unknown
Value:
{
"type": "layout",
"widget": {
"type": "dtl-fluent-iframe"
},
"items": []
}
Inputs
Title
Key: title
Name: Title
Description: The title which will be displayed for this component.
Default: ""
Source URL
Key: src
Name: Source URL
Description: The URL of the external resource to be displayed.
Default: ""
Hide title
Key: notitle
Name: Hide title
Description: Tick the checkbox if you wish to hide the title for this component. It can also be controlled with an expression using the expression editor.
Default: false
Height (px)
Key: height
Name: Height (px)
Description: The height in pixels. It can also be controlled with an expression using the expression editor.
Default: ""
Width (px)
Key: width
Name: Width (px)
Description: the width in pixels. It can also be controlled with an expression using the expression editor.
Default: ""
Fieldset dtl-fluent-fieldset
The fieldset component is used to group related form controls or content into a single visually identifiable unit. It can be used to provide context and improve the overall organization of a form.
Widget Or Layout: unknown
Value:
{
"type": "layout",
"items": [],
"widget": {
"type": "dtl-fluent-fieldset"
},
"config": {}
}
Inputs
Read only
Key: readonly
Name: Read only
Default: false
Legend (title)
Key: legend
Name: Legend (title)
Description: Title displayed above the component.
Default: ""
Disable legend
Key: disableLegendForEmptyAndReadonly
Name: Disable legend
Description: Tick the checkbox if you wish to turn off the legend if readonly mode is enabled and the component does not contain any data.
Default: false
Default number of objects
Key: numberOfRows
Name: Default number of objects
Description: "value": displayed number of objects
"onlyForEmpty" = true: displayed set number of objects only if no data is stored in the array
"onlyForEmpty" = false: always displayed set number of objects (even if, for example, more are stored in the data)
Note: if the "onlyForEmpty" parameter is not set, the behavior corresponds to the "onlyForEmpty" = false setting
Default: null
Examples
Curated configurations from libs/framework/fluent-forms/__fixtures__/widgets/dtl-fluent-fieldset/.
Each is a complete validated FluentSchema — copy & adapt for your form.
Gen disable legend for empty and readonly — gen-disable-legend-for-empty-and-readonly.json
Disable legend: Tick the checkbox if you wish to turn off the legend if readonly mode is enabled and the component does not contain any data.
{
"type": "object",
"title": "Fieldset — Disable legend",
"description": "Disable legend: Tick the checkbox if you wish to turn off the legend if readonly mode is enabled and the component does not contain any data.",
"properties": {},
"layout": [
{
"type": "layout",
"items": [],
"widget": {
"type": "dtl-fluent-fieldset"
},
"config": {
"disableLegendForEmptyAndReadonly": true
}
}
]
}
Form section dtl-fluent-form-section
Form section with a title, an optional description and a subtle bottom divider. Provides the unified sectioned look of form dialogs — the section title stands in for the labels of the fields inside. Turn off the bottom divider for the last section in a dialog.
Widget Or Layout: unknown
Value:
{
"type": "layout",
"widget": {
"type": "dtl-fluent-form-section"
},
"items": []
}
Inputs
Section title
Key: label
Name: Section title
Description: Title of the form section. It stands in for the labels of the fields inside — field labels should not repeat it. Can be controlled by an expression using the expression editor.
Default: null
Section description
Key: description
Name: Section description
Description: Additional description displayed below the section title in a smaller muted font.
Default: null
Required section
Key: required
Name: Required section
Description: Shows a required asterisk after the section title (when the title stands in for a required field label).
Default: false
Top divider
Key: dividerTop
Name: Top divider
Description: Subtle divider line above the section. Turn on when the section is preceded by a block that is not a section (e.g. characteristics) and the line would be missing. Keep off between regular sections to avoid a double line.
Default: false
Bottom divider
Key: divider
Name: Bottom divider
Description: Subtle divider line below the section content. Turn off for the last section in a dialog.
Default: true
Examples
Curated configurations from libs/framework/fluent-forms/__fixtures__/widgets/dtl-fluent-form-section/.
Each is a complete validated FluentSchema — copy & adapt for your form.
Gen divider top — gen-divider-top.json
_Top divider: Subtle divider line above the section. Turn on when the section is preceded by a block that is not a section (e.g. characteristics) and the line would be missing. Keep off between regular sections to _
{
"type": "object",
"title": "Form section — Top divider",
"description": "Top divider: Subtle divider line above the section. Turn on when the section is preceded by a block that is not a section (e.g. characteristics) and the line would be missing. Keep off between regular sections to ",
"properties": {},
"layout": [
{
"type": "layout",
"widget": {
"type": "dtl-fluent-form-section"
},
"items": [],
"config": {
"dividerTop": true
}
}
]
}
Gen divider — gen-divider.json
Bottom divider: Subtle divider line below the section content. Turn off for the last section in a dialog.
{
"type": "object",
"title": "Form section — Bottom divider",
"description": "Bottom divider: Subtle divider line below the section content. Turn off for the last section in a dialog.",
"properties": {},
"layout": [
{
"type": "layout",
"widget": {
"type": "dtl-fluent-form-section"
},
"items": [],
"config": {
"divider": false
}
}
]
}
Html dtl-fluent-html
The Html component is used to embed plain html in a section which is then rendered.
Widget Or Layout: unknown
Value:
{
"type": "layout",
"widget": {
"type": "dtl-fluent-html"
}
}
Inputs
HTML mapping
Key: htmlMapping
Name: HTML mapping
Description: Any string that will be replaced by a variable should be unique. For example: NAME
Default: "__expr:value?.htmlMapping ?? ''"
Variable
Key: htmlVariable
Name: Variable
Description: Variable that will replace the string defined in the mapping.
Default: "__expr:value?.htmlVariable ?? ''"
Examples
Curated configurations from libs/framework/fluent-forms/__fixtures__/widgets/dtl-fluent-html/.
Each is a complete validated FluentSchema — copy & adapt for your form.
Conditional warning — conditional-warning.json
Renders literal HTML from config.html and hides it when the required value is present.
{
"type": "object",
"title": "Conditional information message",
"description": "Renders literal HTML from config.html and hides it when the required value is present.",
"properties": {
"name": {
"type": "string",
"title": "Name",
"widget": {
"type": "text"
}
}
},
"layout": [
"name",
{
"type": "layout",
"config": {
"html": "Name is missing. You may save, but the record will not be sent."
},
"widget": {
"type": "html",
"hidden": "${!isNullOrEmpty($value.name)}"
}
}
]
}
Inplace dtl-fluent-inplace
The form inplace component is a UI element that allows for in-place editing of data within a form. At first the data is in read-only mode intended for viewing, but edit mode can be entered by clicking on the edit icon. Afterwards changes can be made to the data and modifications saved or discarded by buttons.
Widget Or Layout: unknown
Value:
{
"type": "layout",
"widget": {
"type": "dtl-fluent-inplace"
},
"items": []
}
Inputs
Clone key
Key: cloneKey
Name: Clone key
Description: The key for copying of content into the clone component
Default: null
Disable autofocus
Key: disableAutofocus
Name: Disable autofocus
Description: Disable autofocus on the first input in the form
Default: false
Save on click outside
Key: saveOnClickOutside
Name: Save on click outside
Description: By default the form is reset (unsaved changes are confirmed before being discarded), by enabling this the form is saved instead.
Default: false
Display field borders even in readonly mode
Key: alwaysShowBorders
Name: Display field borders even in readonly mode
Description: Displays field borders even in readonly mode. Fields will look editable but remain non-editable (readonly). This setting applies only in readonly mode; in edit mode, no changes are applied.
Default: false
Label (column) width
Key: labelWidth
Name: Label (column) width
Description: Overrides the default 40% label column width for all form-field fields inside this inplace section (left-aligned columnar layout). Enter a CSS length, e.g. "30%" or "12rem". Empty = default 40%. The 50% row width cap still applies to this override too.
Default: null
Align labels right
Key: labelAlignRight
Name: Align labels right
Description: Right-aligns the label text of form-fields inside this section (only for the "label left" layout). Does not change the layout type or arrangement — only the label text alignment. Some users find the form easier to read this way.
Default: false
Value font weight
Key: valueFontWeight
Name: Value font weight
Description: Font weight of all displayed field values (readonly text) inside this section. Affects only the displayed value — labels, edit-mode inputs and empty "none" placeholders stay unchanged.
Default: null
Disable count is single child
Key: disableCountIsSingleChild
Name: Disable count is single child
Description: If checked, editing fields in the characteristic in the fluent-inplace component will never autosave.
Default: false
saveSuccessActions
Key: saveSuccessActions
Name: saveSuccessActions
Default: []
saveErrorActions
Key: saveErrorActions
Name: saveErrorActions
Default: []
Script
Key: scriptCode
Name: Script
Default: ""
Script data
Key: scriptData
Name: Script data
Description: Additional params for script evaluation
Default: {}
Hide script errors
Key: hideScriptError
Name: Hide script errors
Description: Whether to hide script errors from the user
Default: false
successActions
Key: successActions
Name: successActions
Default: []
errorActions
Key: errorActions
Name: errorActions
Default: []
Examples
Curated configurations from libs/framework/fluent-forms/__fixtures__/widgets/dtl-fluent-inplace/.
Each is a complete validated FluentSchema — copy & adapt for your form.
Gen always show borders — gen-always-show-borders.json
Display field borders even in readonly mode: Displays field borders even in readonly mode. Fields will look editable but remain non-editable (readonly). This setting applies only in readonly mode; in edit mode, no changes are applied.
{
"type": "object",
"title": "Inplace — Display field borders even in readonly mode",
"description": "Display field borders even in readonly mode: Displays field borders even in readonly mode. Fields will look editable but remain non-editable (readonly). This setting applies only in readonly mode; in edit mode, no changes are applied.",
"properties": {},
"layout": [
{
"type": "layout",
"widget": {
"type": "dtl-fluent-inplace"
},
"items": [],
"config": {
"alwaysShowBorders": true
}
}
]
}
Gen disable autofocus — gen-disable-autofocus.json
Disable autofocus: Disable autofocus on the first input in the form
{
"type": "object",
"title": "Inplace — Disable autofocus",
"description": "Disable autofocus: Disable autofocus on the first input in the form",
"properties": {},
"layout": [
{
"type": "layout",
"widget": {
"type": "dtl-fluent-inplace"
},
"items": [],
"config": {
"disableAutofocus": true
}
}
]
}
Gen disable count is single child — gen-disable-count-is-single-child.json
Disable count is single child: If checked, editing fields in the characteristic in the fluent-inplace component will never autosave.
{
"type": "object",
"title": "Inplace — Disable count is single child",
"description": "Disable count is single child: If checked, editing fields in the characteristic in the fluent-inplace component will never autosave.",
"properties": {},
"layout": [
{
"type": "layout",
"widget": {
"type": "dtl-fluent-inplace"
},
"items": [],
"config": {
"disableCountIsSingleChild": true
}
}
]
}
Gen hide script error — gen-hide-script-error.json
Hide script errors: Whether to hide script errors from the user
{
"type": "object",
"title": "Inplace — Hide script errors",
"description": "Hide script errors: Whether to hide script errors from the user",
"properties": {},
"layout": [
{
"type": "layout",
"widget": {
"type": "dtl-fluent-inplace"
},
"items": [],
"config": {
"hideScriptError": true
}
}
]
}
Gen label align right — gen-label-align-right.json
Align labels right: Right-aligns the label text of form-fields inside this section (only for the "label left" layout). Does not change the layout type or arrangement — only the label text alignment. Some users find the f
{
"type": "object",
"title": "Inplace — Align labels right",
"description": "Align labels right: Right-aligns the label text of form-fields inside this section (only for the \"label left\" layout). Does not change the layout type or arrangement — only the label text alignment. Some users find the f",
"properties": {},
"layout": [
{
"type": "layout",
"widget": {
"type": "dtl-fluent-inplace"
},
"items": [],
"config": {
"labelAlignRight": true
}
}
]
}
Gen save on click outside — gen-save-on-click-outside.json
Save on click outside: By default the form is reset (unsaved changes are confirmed before being discarded), by enabling this the form is saved instead.
{
"type": "object",
"title": "Inplace — Save on click outside",
"description": "Save on click outside: By default the form is reset (unsaved changes are confirmed before being discarded), by enabling this the form is saved instead.",
"properties": {},
"layout": [
{
"type": "layout",
"widget": {
"type": "dtl-fluent-inplace"
},
"items": [],
"config": {
"saveOnClickOutside": true
}
}
]
}
Labeled row dtl-fluent-labeled-row
The labeled row layout renders a form-style row with its own label on the left and arbitrary child content on the right. It is intended for wrapping a single widget or a nested inline composition such as user / group values.
Widget Or Layout: unknown
Value:
{
"type": "layout",
"widget": {
"type": "dtl-fluent-labeled-row"
},
"items": []
}
Layout dtl-fluent-columns
The 12-column layout is a popular layout design pattern that is used to divide a user interface into 12 equal-width columns. The 12-column layout is a flexible design pattern that can be used to create a wide range of layouts, from simple one-column designs to more complex multi-column layouts. It provides a simple and effective way to divide a user interface into manageable sections, and helps to ensure that the layout is consistent and scalable across different screen sizes and devices. The number 12 is the most easily divisible among reasonably small numbers; it's possible to have 12, 6, 4, 3, 2 or 1 evenly spaced columns. This gives designers tremendous flexibility over a layout.
Widget Or Layout: unknown
Value:
{
"type": "layout",
"items": [],
"config": {
"columns": [
{
"width": 6
},
{
"width": 6
}
]
},
"widget": {
"type": "dtl-fluent-columns"
}
}
Inputs
Enable sticky header
Key: enableStickyHeader
Name: Enable sticky header
Description: Used only for page forms. If enabled, the header will be sticky. It will be visible even when the user scrolls down the page.
Default: false
Border
Key: bordered
Name: Border
Description: Tick the checkbox if you wish the component wrapper to have a border.
Default: ""
Background
Key: colored
Name: Background
Description: Tick the checkbox if you wish the wrapper of the component to have a background color. Afterwards select the color
Default: ""
backgroundColor
Key: backgroundColor
Name: backgroundColor
Default: ""
Page layout
Key: pageLayout
Name: Page layout
Description: A special layout option. Required if you use the layout as the main layout of the page.
Default: false
Enable internal paddings
Key: innerPageLayout
Name: Enable internal paddings
Description: Enable internal paddings.
Default: true
grid CSS class
Key: gridStyle
Name: grid CSS class
Description: The CSS class used to change or modification of the grid layout.
Default: ""
Fixed column
Key: stickyColumn
Name: Fixed column
Description: When enabled, the column will be fixed – it remains visible during horizontal scrolling.
Ideal for quick access to action buttons or summaries.
Default: ""
Width
Key: width
Name: Width
Description: The column width in 12 column layout. For example 12 means 100%, 6 means 50% and 3 means 25%.
Default: "__expr:width ?? 6"
Offset
Key: offset
Name: Offset
Description: The column offset from the left side in 12 column layout. For example 12 means 100%, 6 means 50% and 3 means 25%.
Default: null
Fixed width
Key: fixed
Name: Fixed width
Description: Tick the checkbox if you wish the column width to be setup according to the content and the column will no longer be flexible.
Default: false
Flexible
Key: flexible
Name: Flexible
Description: Tick the checkbox if you wish the colmn width to be set to the maximum possible width. (according to the available space)
Default: false
Separator
Key: divider
Name: Separator
Description: Tick the checkbox if you wish the column to be used as a graphical separator(without text).
Default: false
Right align
Key: push
Name: Right align
Description: Tick the checkbox if you wish the column to be aligned right.
Default: false
Hidden
Key: hidden
Name: Hidden
Description: Tick the checkbox if you wish the component to be hidden. It can also be controlled with an expression using the expression editor.
Default: false
Optional CSS class
Key: fieldHtmlClass
Name: Optional CSS class
Description: 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
Default: null
Examples
Curated configurations from libs/framework/fluent-forms/__fixtures__/widgets/dtl-fluent-columns/.
Each is a complete validated FluentSchema — copy & adapt for your form.
Gen divider — gen-divider.json
Separator: Tick the checkbox if you wish the column to be used as a graphical separator(without text).
{
"type": "object",
"title": "Layout — Separator",
"description": "Separator: Tick the checkbox if you wish the column to be used as a graphical separator(without text).",
"properties": {},
"layout": [
{
"type": "layout",
"items": [],
"config": {
"columns": [
{
"width": 6
},
{
"width": 6
}
],
"divider": true
},
"widget": {
"type": "dtl-fluent-columns"
}
}
]
}
Gen enable sticky header — gen-enable-sticky-header.json
Enable sticky header: Used only for page forms. If enabled, the header will be sticky. It will be visible even when the user scrolls down the page.
{
"type": "object",
"title": "Layout — Enable sticky header",
"description": "Enable sticky header: Used only for page forms. If enabled, the header will be sticky. It will be visible even when the user scrolls down the page.",
"properties": {},
"layout": [
{
"type": "layout",
"items": [],
"config": {
"columns": [
{
"width": 6
},
{
"width": 6
}
],
"enableStickyHeader": true
},
"widget": {
"type": "dtl-fluent-columns"
}
}
]
}
Gen fixed — gen-fixed.json
Fixed width: Tick the checkbox if you wish the column width to be setup according to the content and the column will no longer be flexible.
{
"type": "object",
"title": "Layout — Fixed width",
"description": "Fixed width: Tick the checkbox if you wish the column width to be setup according to the content and the column will no longer be flexible.",
"properties": {},
"layout": [
{
"type": "layout",
"items": [],
"config": {
"columns": [
{
"width": 6
},
{
"width": 6
}
],
"fixed": true
},
"widget": {
"type": "dtl-fluent-columns"
}
}
]
}
Gen flexible — gen-flexible.json
Flexible: Tick the checkbox if you wish the colmn width to be set to the maximum possible width. (according to the available space)
{
"type": "object",
"title": "Layout — Flexible",
"description": "Flexible: Tick the checkbox if you wish the colmn width to be set to the maximum possible width. (according to the available space)",
"properties": {},
"layout": [
{
"type": "layout",
"items": [],
"config": {
"columns": [
{
"width": 6
},
{
"width": 6
}
],
"flexible": true
},
"widget": {
"type": "dtl-fluent-columns"
}
}
]
}
Gen inner page layout — gen-inner-page-layout.json
Enable internal paddings: Enable internal paddings.
{
"type": "object",
"title": "Layout — Enable internal paddings",
"description": "Enable internal paddings: Enable internal paddings.",
"properties": {},
"layout": [
{
"type": "layout",
"items": [],
"config": {
"columns": [
{
"width": 6
},
{
"width": 6
}
],
"innerPageLayout": false
},
"widget": {
"type": "dtl-fluent-columns"
}
}
]
}
Gen page layout — gen-page-layout.json
Page layout: A special layout option. Required if you use the layout as the main layout of the page.
{
"type": "object",
"title": "Layout — Page layout",
"description": "Page layout: A special layout option. Required if you use the layout as the main layout of the page.",
"properties": {},
"layout": [
{
"type": "layout",
"items": [],
"config": {
"columns": [
{
"width": 6
},
{
"width": 6
}
],
"pageLayout": true
},
"widget": {
"type": "dtl-fluent-columns"
}
}
]
}
Panel dtl-fluent-panel
The panel component is a container component that can be used to group and organize other components within a section that has it's own header. It can be manually or programatically collapsed and it's properties can be changed such as the header.
Widget Or Layout: unknown
Value:
{
"type": "layout",
"widget": {
"type": "dtl-fluent-panel"
},
"items": []
}
Inputs
Panel title
Key: title
Name: Panel title
Description: The title which will be displayed for this component.
Default: ""
Panel Implicit state
Key: collapsed
Name: Panel Implicit state
Default: false
Examples
Curated configurations from libs/framework/fluent-forms/__fixtures__/widgets/dtl-fluent-panel/.
Each is a complete validated FluentSchema — copy & adapt for your form.
Gen collapsed — gen-collapsed.json
Demonstrates config.collapsed = true on dtl-fluent-panel.
{
"type": "object",
"title": "Panel — Panel Implicit state",
"description": "Demonstrates config.collapsed = true on dtl-fluent-panel.",
"properties": {},
"layout": [
{
"type": "layout",
"widget": {
"type": "dtl-fluent-panel"
},
"items": [],
"config": {
"collapsed": true
}
}
]
}
Section dtl-fluent-section
The section component is similiar to the panel component(see it's description) with the main difference that it does not have a header.
Widget Or Layout: unknown
Value:
{
"type": "layout",
"items": [],
"widget": {
"type": "dtl-fluent-section"
}
}
Inputs
Show bottom border of inputs
Key: inputBordersShowing
Name: Show bottom border of inputs
Description: Show bottom border of inputs even if form is in read-only state (only works for inputs with the title position set to "Top")
Default: false
Compact Mode
Key: compactMode
Name: Compact Mode
Description: Compact Mode
Default: false
Clone key
Key: cloneKey
Name: Clone key
Description: The key for copying of content into the clone component
Default: ""
Splitter dtl-fluent-panel-splitter
The splitter element is used to visually separate and organize form fields into distinct sections or columns. It is represented by a horizontal or vertical line that can be resized by dragging its handle to adjust the amount of space allocated to each section. It is commonly used in forms with multiple columns or sections to provide users with a clear visual separation between different parts of the form, improving its readability and usability. It can also be customized with different styles and colors using CSS classes to match the overall design of the form.
Widget Or Layout: unknown
Value:
{
"type": "layout",
"widget": {
"type": "dtl-fluent-panel-splitter"
},
"items": [],
"config": {
"first": [],
"second": []
}
}
Inputs
Layout
Key: layout
Name: Layout
Description: The direction of the layout. Can either be horizontal or vertical.
Default: "horizontal"
range
Key: range
Name: range
Default: 50
Height of splitter container
Key: splitterContainerHeight
Name: Height of splitter container
Description: Enter the value including units: px, em, rem, vh or %
Default: "300px"
Examples
Curated configurations from libs/framework/fluent-forms/__fixtures__/widgets/dtl-fluent-panel-splitter/.
Each is a complete validated FluentSchema — copy & adapt for your form.
Gen range — gen-range.json
Demonstrates config.range = 100 on dtl-fluent-panel-splitter.
{
"type": "object",
"title": "Splitter — range",
"description": "Demonstrates config.range = 100 on dtl-fluent-panel-splitter.",
"properties": {},
"layout": [
{
"type": "layout",
"widget": {
"type": "dtl-fluent-panel-splitter"
},
"items": [],
"config": {
"first": [],
"second": [],
"range": 100
}
}
]
}
SVG dtl-fluent-svg
A SVG component is used for displaying scalable vector graphics. It allows for the creation of vector-based graphics that can be scaled up or down without losing quality or clarity. The SVG component is particularly useful for creating interactive and dynamic visualizations, such as charts and graphs, which can be customized and animated based on user interaction or data changes.
Widget Or Layout: unknown
Value:
{
"type": "layout",
"widget": {
"type": "dtl-fluent-svg"
},
"items": []
}
Tabs dtl-fluent-tab
The tabs component allows for organizing content into separate tabs or pages. Each tab typically has a label or title, and when a user clicks on a tab, the content associated with that tab is displayed. The tab component is useful for breaking up large amounts of content into smaller, more manageable chunks, and it provides a way for users to easily navigate between different sections of the content.
Widget Or Layout: unknown
Value:
{
"type": "layout",
"widget": {
"type": "dtl-fluent-tab"
},
"items": [],
"config": {
"tabs": [
{
"header": "Tab 1",
"content": []
},
{
"header": "Tab 2",
"content": []
}
]
}
}
Inputs
Disable lazy loading
Key: disableLazy
Name: Disable lazy loading
Description: Disables lazy loading of tab content. Content is rendered immediately instead of after tab selection.
Default: false
Enable scrollable tabs
Key: scrollable
Name: Enable scrollable tabs
Description: Allows tab headers to scroll when they overflow the available width.
Default: true
Key for tabs remembering cache
Key: storedTabsActiveIndex
Name: Key for tabs remembering cache
Description: A unique identifier that the application uses to store and retrieve the cached tab data.
Default: null
Tab name
Key: header
Name: Tab name
Description: The title for this tab.
Default: "__expr:this.translocoService.translate(translation.fluentTabEditor.newTab)"
Tab code
Key: id
Name: Tab code
Description: Stable tab code for effects — the activeTabChanged event sends it as previousId/activeId. Unlike indexes, it does not change when tabs are hidden or reordered. Must be unique within the component.
Default: null
Privilege
Key: priv
Name: Privilege
Description: The privilege for displaying component.
Default: null
Hidden
Key: hidden
Name: Hidden
Description: Tick the checkbox if you wish the component to be hidden. It can also be controlled with an expression using the expression editor.
Default: false
Examples
Curated configurations from libs/framework/fluent-forms/__fixtures__/widgets/dtl-fluent-tab/.
Each is a complete validated FluentSchema — copy & adapt for your form.
Gen disable lazy — gen-disable-lazy.json
Disable lazy loading: Disables lazy loading of tab content. Content is rendered immediately instead of after tab selection.
{
"type": "object",
"title": "Tabs — Disable lazy loading",
"description": "Disable lazy loading: Disables lazy loading of tab content. Content is rendered immediately instead of after tab selection.",
"properties": {},
"layout": [
{
"type": "layout",
"widget": {
"type": "dtl-fluent-tab"
},
"items": [],
"config": {
"tabs": [
{
"header": "Tab 1",
"content": []
},
{
"header": "Tab 2",
"content": []
}
],
"disableLazy": true
}
}
]
}
Gen scrollable — gen-scrollable.json
Enable scrollable tabs: Allows tab headers to scroll when they overflow the available width.
{
"type": "object",
"title": "Tabs — Enable scrollable tabs",
"description": "Enable scrollable tabs: Allows tab headers to scroll when they overflow the available width.",
"properties": {},
"layout": [
{
"type": "layout",
"widget": {
"type": "dtl-fluent-tab"
},
"items": [],
"config": {
"tabs": [
{
"header": "Tab 1",
"content": []
},
{
"header": "Tab 2",
"content": []
}
],
"scrollable": false
}
}
]
}
Text hint tsm-text-hint
The Text hint component is used to embed text inside a form using an Rich text editor serving as a hint or documentation to the user. An icon can be placed infront of the text symbolizing the type of the hint - ex. informational or warning.
Widget Or Layout: unknown
Value:
{
"type": "layout",
"widget": {
"type": "tsm-text-hint"
},
"items": []
}
Inputs
Content
Key: content
Name: Content
Description: The content which will be displayed in the component. It is inputted using the editor.
Default: null
Severity
Key: severity
Name: Severity
Description: Severity defines the color of the text and places the corresponding icon infront of the text unless an Optional icon in specified, in which case that one is used
Default: null
Optional icon
Key: customIconCssClass
Name: Optional icon
Description: This is the full icon class string to show the icon. Example: p-icon-check
Default: ""
Additional CSS class
Key: customTextCssClass
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: ""
Examples
Curated configurations from libs/framework/fluent-forms/__fixtures__/widgets/tsm-text-hint/.
Each is a complete validated FluentSchema — copy & adapt for your form.
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": "Text hint — Optional icon",
"description": "Optional icon: This is the full icon class string to show the icon. Example: p-icon-check",
"properties": {},
"layout": [
{
"type": "layout",
"widget": {
"type": "tsm-text-hint"
},
"items": [],
"config": {
"customIconCssClass": "p-icon-search"
}
}
]
}
Gen custom text css class — gen-custom-text-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": "Text hint — Additional CSS class",
"description": "Additional CSS class: You can use an additional CSS class to customize the appearance of the component. Examples: text-2xl bg-red-500 flex w-full gap-2 flex-col p-4",
"properties": {},
"layout": [
{
"type": "layout",
"widget": {
"type": "tsm-text-hint"
},
"items": [],
"config": {
"customTextCssClass": "tsm-custom-class"
}
}
]
}
Toolbar dtl-fluent-toolbar
Toolbar
Widget Or Layout: unknown
Value:
{
"type": "layout",
"widget": {
"type": "dtl-fluent-toolbar"
},
"items": []
}
tSM Control tsm-control
tSM Control - used for positioning static form-field components.
Widget Or Layout: unknown
Value:
{
"type": "tsm-control",
"id": "",
"widget": {
"type": "tsm-control"
}
}
Inputs
Inputs
Key: inputs
Name: Inputs
Default: {}
Wizard dtl-fluent-steps
The steps component functions as a versatile wizard that guides users through a multi-step process. It organizes the steps with clear labels, allowing users to easily navigate through the process. With its intuitive interface, users can track their progress, move forward or backward, and complete complex tasks in a manageable manner. The component adjusts dynamically to accommodate varying numbers of steps, ensuring a seamless user experience.
Widget Or Layout: unknown
Value:
{
"type": "layout",
"widget": {
"type": "dtl-fluent-steps"
},
"items": [],
"config": {
"steps": [
{
"header": "Step 1",
"content": []
},
{
"header": "Step 2",
"content": []
}
],
"nextButton": true,
"backButton": true,
"stepBar": true
}
}
Inputs
Button "Back"
Key: backButton
Name: Button "Back"
Description: Button "Back"
Default: false
Button "Next"
Key: nextButton
Name: Button "Next"
Description: Button "Next"
Default: false
Align "Next" button right
Key: dockNextButtonRight
Name: Align "Next" button right
Description: Align "Next" button right
Default: false
Show "Next" button first
Key: flipButtons
Name: Show "Next" button first
Description: Show "Next" button first
Default: false
Bottom navigation bar (Back | Step X of Y | Next)
Key: stepBar
Name: Bottom navigation bar (Back \| Step X of Y \| Next)
Description: Shows a bottom bar with Back/Next buttons and a "Step X of Y" counter. Replaces the original button layout.
Default: false
Stick the bar to the bottom edge
Key: stepBarSticky
Name: Stick the bar to the bottom edge
Description: The bar stays visible at the bottom edge for long step content.
Default: false
Disable lazy loading
Key: disableLazy
Name: Disable lazy loading
Description: Disables lazy loading of step content. All steps are rendered immediately (inactive ones are hidden), so the state and validation of other steps are accurate before they are first displayed. Slower on large forms.
Default: false
Show step states (header indicators)
Key: showStepStates
Name: Show step states (header indicators)
Description: Shows a state indicator on step headers: missing required fields, errors, completed steps, and dimmed not-yet-visited steps.
Default: false
Hide the unviewed steps notice
Key: hideRequiredStepsNotice
Name: Hide the unviewed steps notice
Description: The notice listing not-yet-viewed required steps is not shown above the steps. Saving stays blocked.
Default: false
Hide wizard step numbers
Key: stepsNumberHidden
Name: Hide wizard step numbers
Description: Hide wizard step numbers
Default: false
Disable step validations
Key: disableStepValidations
Name: Disable step validations
Description: Disable step validations
Default: false
Navigation mode
Key: navigationMode
Name: Navigation mode
Description: Free movement allows clicking any step. Sequential mode only allows moving forward to the immediately following step; already visited steps stay accessible.
Default: null
Default step
Key: activeIndex
Name: Default step
Description: The step opened after the form loads. With an expression, the active step can be driven by a form value.
Default: 0
Step name
Key: header
Name: Step name
Description: The title for this step.
Default: "__expr:this.translocoService.translate(translation.fluentStepsEditor.newStep)"
Step code
Key: id
Name: Step code
Description: Stable step code for effects — the activeStepChanged event sends it as previousId/activeId. Unlike indexes, it does not change when steps are hidden or reordered. Must be unique within the component.
Default: null
Privilege
Key: priv
Name: Privilege
Description: The privilege for displaying component.
Default: null
Hidden
Key: hidden
Name: Hidden
Description: Tick the checkbox if you wish the component to be hidden. It can also be controlled with an expression using the expression editor.
Default: false
Required to view before saving
Key: requiredView
Name: Required to view before saving
Description: The entity cannot be saved until the user opens this step. It can also be controlled with an expression using the expression editor.
Default: false
Custom "Next" button label
Key: nextLabel
Name: Custom "Next" button label
Description: Overrides the default "Next" button label on this step.
Default: null
Custom "Back" button label
Key: backLabel
Name: Custom "Back" button label
Description: Overrides the default "Back" button label on this step.
Default: null
Examples
Curated configurations from libs/framework/fluent-forms/__fixtures__/widgets/dtl-fluent-steps/.
Each is a complete validated FluentSchema — copy & adapt for your form.
Guided wizard — 01-guided-wizard.json
{
"type": "object",
"title": "Guided wizard — sequential mode with step states",
"properties": {
"customerName": {
"type": "string",
"title": "Customer name",
"widget": {
"type": "text",
"required": true
}
},
"customerEmail": {
"type": "string",
"title": "Customer email",
"widget": {
"type": "text"
}
},
"serviceCode": {
"type": "string",
"title": "Service code",
"widget": {
"type": "text",
"required": true
}
},
"note": {
"type": "string",
"title": "Note",
"widget": {
"type": "text"
}
}
},
"layout": [
{
"type": "layout",
"widget": {
"type": "dtl-fluent-steps"
},
"config": {
"steps": [
{
"header": "Customer",
"content": [
0,
1
],
"requiredView": true,
"nextLabel": "Continue to services"
},
{
"header": "Services",
"content": [
2
],
"requiredView": true
},
{
"header": "Summary",
"content": [
3
]
}
],
"navigationMode": "sequential",
"showStepStates": true,
"nextButton": true,
"backButton": true,
"stepBar": true,
"stepBarSticky": true,
"activeIndex": 0
},
"items": [
"customerName",
"customerEmail",
"serviceCode",
"note"
]
}
]
}
Gen back button — gen-back-button.json
Button "Back": Button "Back"
{
"type": "object",
"title": "Wizard — Button \"Back\"",
"description": "Button \"Back\": Button \"Back\"",
"properties": {},
"layout": [
{
"type": "layout",
"widget": {
"type": "dtl-fluent-steps"
},
"items": [],
"config": {
"steps": [
{
"header": "Step 1",
"content": []
},
{
"header": "Step 2",
"content": []
}
],
"nextButton": true,
"backButton": true,
"stepBar": true
}
}
]
}
Gen dock next button right — gen-dock-next-button-right.json
Align "Next" button right: Align "Next" button right
{
"type": "object",
"title": "Wizard — Align \"Next\" button right",
"description": "Align \"Next\" button right: Align \"Next\" button right",
"properties": {},
"layout": [
{
"type": "layout",
"widget": {
"type": "dtl-fluent-steps"
},
"items": [],
"config": {
"steps": [
{
"header": "Step 1",
"content": []
},
{
"header": "Step 2",
"content": []
}
],
"nextButton": true,
"backButton": true,
"stepBar": true,
"dockNextButtonRight": true
}
}
]
}
Gen flip buttons — gen-flip-buttons.json
Show "Next" button first: Show "Next" button first
{
"type": "object",
"title": "Wizard — Show \"Next\" button first",
"description": "Show \"Next\" button first: Show \"Next\" button first",
"properties": {},
"layout": [
{
"type": "layout",
"widget": {
"type": "dtl-fluent-steps"
},
"items": [],
"config": {
"steps": [
{
"header": "Step 1",
"content": []
},
{
"header": "Step 2",
"content": []
}
],
"nextButton": true,
"backButton": true,
"stepBar": true,
"flipButtons": true
}
}
]
}
Gen next button — gen-next-button.json
Button "Next": Button "Next"
{
"type": "object",
"title": "Wizard — Button \"Next\"",
"description": "Button \"Next\": Button \"Next\"",
"properties": {},
"layout": [
{
"type": "layout",
"widget": {
"type": "dtl-fluent-steps"
},
"items": [],
"config": {
"steps": [
{
"header": "Step 1",
"content": []
},
{
"header": "Step 2",
"content": []
}
],
"nextButton": true,
"backButton": true,
"stepBar": true
}
}
]
}
Gen step bar sticky — gen-step-bar-sticky.json
Stick the bar to the bottom edge: The bar stays visible at the bottom edge for long step content.
{
"type": "object",
"title": "Wizard — Stick the bar to the bottom edge",
"description": "Stick the bar to the bottom edge: The bar stays visible at the bottom edge for long step content.",
"properties": {},
"layout": [
{
"type": "layout",
"widget": {
"type": "dtl-fluent-steps"
},
"items": [],
"config": {
"steps": [
{
"header": "Step 1",
"content": []
},
{
"header": "Step 2",
"content": []
}
],
"nextButton": true,
"backButton": true,
"stepBar": true,
"stepBarSticky": true
}
}
]
}
Gen step bar — gen-step-bar.json
Bottom navigation bar (Back | Step X of Y | Next): Shows a bottom bar with Back/Next buttons and a "Step X of Y" counter. Replaces the original button layout.
{
"type": "object",
"title": "Wizard — Bottom navigation bar (Back | Step X of Y | Next)",
"description": "Bottom navigation bar (Back | Step X of Y | Next): Shows a bottom bar with Back/Next buttons and a \"Step X of Y\" counter. Replaces the original button layout.",
"properties": {},
"layout": [
{
"type": "layout",
"widget": {
"type": "dtl-fluent-steps"
},
"items": [],
"config": {
"steps": [
{
"header": "Step 1",
"content": []
},
{
"header": "Step 2",
"content": []
}
],
"nextButton": true,
"backButton": true,
"stepBar": true
}
}
]
}
Notes
Guided wizard: sequential navigation, header state indicators, bottom navigation bar with a step counter, and two steps required to view before saving.
Complexity: intermediate
Tags: layout, wizard, steps, validation
navigationMode falls back to disableNextSteps for legacy schemas ('sequential' when true). requiredView blocks form validity until the step is opened and accepts a JEXL expression, so a step can be required conditionally. config.hideRequiredStepsNotice hides the notice listing not-yet-viewed required steps without unblocking the save. config.activeIndex accepts a JEXL expression to drive the active step from a form value. Only the active step is rendered; set disableLazy: true to render every step at once (inactive ones hidden) so validation and step states of not-yet-opened steps — including nested forms and characteristics — are accurate.