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: layout

Value:

{
  "type": "layout",
  "widget": {
    "type": "dtl-fluent-accordion"
  },
  "items": [],
  "config": {
    "accordions": [
      {
        "header": "Accordion",
        "content": []
      }
    ]
  }
}

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: layout

Value:

{
  "type": "layout",
  "widget": {
    "type": "dtl-fluent-anchor"
  },
  "items": [],
  "config": {}
}

Inputs

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

Back button `tsm-button-back`

The back button element is used for returning to the previous page upon clicking.

Widget Or Layout: layout

Value:

{
  "type": "layout",
  "widget": {
    "type": "tsm-button-back"
  }
}

Inputs

Label

Key: label

Name: Label

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.

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: layout

Value:

{
  "type": "layout",
  "widget": {
    "type": "dtl-fluent-bar"
  },
  "items": []
}

Inputs

Icon position

Key: iconPos

Name: Icon position

Label

Key: label

Name: Label

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: layout

Value:

{
  "type": "layout",
  "widget": {
    "type": "dtl-fluent-card"
  },
  "items": []
}

Inputs

Card Title

Key: header

Name: Card Title

Card title URL link

Key: headerLink

Name: Card title URL link

External link

Key: headerTarget

Name: External link

Description: Opens external link in a new tab

Icon

Key: headerIconClass

Name: Icon

Color highlight

Key: cardType

Name: Color highlight

Remove card styling

Key: disableCard

Name: Remove card styling

Control buttons

Key: buttonsOnHover

Name: Control buttons

Enable action button

Key: activeButton

Name: Enable action button

Disable maximize button

Key: disableMaximize

Name: Disable maximize button

Disable minimize button

Key: disableMinimize

Name: Disable minimize button

Minimized by default

Key: minimizedByDefault

Name: Minimized by default

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: layout

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

Content `dtl-fluent-content`

The content component is used to embed text created with the Editor component(see Editor description).

Widget Or Layout: layout

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.

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: layout

Value:

{
  "type": "layout",
  "widget": {
    "type": "dtl-fluent-iframe"
  },
  "items": []
}

Inputs

Title

Key: title

Name: Title

Source URL

Key: src

Name: Source URL

Hide title

Key: notitle

Name: Hide title

Height (px)

Key: height

Name: Height (px)

Width (px)

Key: width

Name: Width (px)

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: layout

Value:

{
  "type": "layout",
  "items": [],
  "widget": {
    "type": "dtl-fluent-fieldset"
  }
}

Inputs

Legend (title)

Key: legend

Name: Legend (title)

Disable legend

Key: disableLegendForEmptyAndReadonly

Name: Disable legend

Description: Tick the checkbox if you wish to turn off the legend if readonly mode is enabled and the component does not contain any data.

Html `dtl-fluent-html`

The Html component is used to embed plain html in a section which is then rendered.

Widget Or Layout: layout

Value:

{
  "type": "layout",
  "widget": {
    "type": "dtl-fluent-html"
  }
}

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: layout

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

Disable autofocus

Key: disableAutofocus

Name: Disable autofocus

Description: Disable autofocus on the first input in the form

Save on click outside

Key: saveOnClickOutside

Name: Save on click outside

Description: By default the form is reset, by enabling this the form is saved instead.

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.

Script

Key: scriptCode

Name: Script

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: layout

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.

Border

Key: bordered

Name: Border

Description: Tick the checkbox if you wish the component wrapper to have a border.

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

Page layout

Key: config.pageLayout

Name: Page layout

Description: A special layout option. Required if you use the layout as the main layout of the page.

Enable internal paddings

Key: config.innerPageLayout

Name: Enable internal paddings

Description: Enable internal paddings.

grid CSS class

Key: gridStyle

Name: grid CSS class

grid CSS class

Key: config.gridStyle

Name: grid CSS class

Description: The CSS class used to change or modification of the grid layout.

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: layout

Value:

{
  "type": "layout",
  "widget": {
    "type": "dtl-fluent-panel"
  },
  "items": []
}

Inputs

Panel title

Key: title

Name: Panel title

Panel Implicit state

Key: collapsed

Name: Panel Implicit state

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: layout

Value:

{
  "type": "layout",
  "items": [],
  "widget": {
    "type": "dtl-fluent-section"
  },
  "config": {
    "legend": "Legend"
  }
}

Inputs

Show bottom border of inputs

Key: inputBordersShowing

Name: Show bottom border of inputs

Description: Show bottom border of inputs even if form is in read-only state (only works for inputs with the title position set to "Top")

Compact Mode

Key: compactMode

Name: Compact Mode

Description: Compact Mode

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: layout

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.

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: layout

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: layout

Value:

{
  "type": "layout",
  "widget": {
    "type": "dtl-fluent-tab"
  },
  "items": [],
  "config": {
    "tabs": [
      {
        "header": "Tab 1",
        "content": []
      },
      {
        "header": "Tab 2",
        "content": []
      }
    ]
  }
}

Inputs

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.

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: layout

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.

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

Optional icon

Key: customIconCssClass

Name: Optional icon

Description: This is the full icon class string to show the icon. Example: p-icon-check

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-column p-4

Toolbar `dtl-fluent-toolbar`

Toolbar

Widget Or Layout: layout

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: layout

Value:

{
  "type": "tsm-control",
  "id": "",
  "widget": {
    "type": "tsm-control"
  }
}

Inputs

Key: id

Name: ID

Description: The unique identification of this component.

Preview selector

Key: previewSelector

Name: Preview selector

Description: Selector of the component that will be displayed if the ID core attribute is not found.

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: layout

Value:

{
  "type": "layout",
  "widget": {
    "type": "dtl-fluent-steps"
  },
  "items": [],
  "config": {
    "steps": [
      {
        "header": "Step 1",
        "content": []
      },
      {
        "header": "Step 2",
        "content": []
      }
    ]
  }
}

Inputs

Button "Back"

Key: backButton

Name: Button "Back"

Description: Button "Back"

Button "Next"

Key: nextButton

Name: Button "Next"

Description: Button "Next"

Hide wizard step numbers

Key: stepsNumberHidden

Name: Hide wizard step numbers

Description: Hide wizard step numbers

Disable step validations

Key: disableStepValidations

Name: Disable step validations

Description: Disable step validations

Next steps disabled (all steps after the next one are not accessible)

Key: disableNextSteps

Name: Next steps disabled (all steps after the next one are not accessible)

Description: Next steps disabled (all steps after the next one are not accessible)

Default step

Key: activeIndex

Name: Default step

Description: Default step

Accordions dtl-fluent-accordion

Anchor dtl-fluent-anchor

Inputs

Back button tsm-button-back

Inputs

Button bar dtl-fluent-bar

Inputs

Card dtl-fluent-card

Inputs

Clone dtl-fluent-clone

Inputs

Content dtl-fluent-content

Inputs

External content dtl-fluent-iframe

Inputs

Fieldset dtl-fluent-fieldset

Inputs

Html dtl-fluent-html

Inplace dtl-fluent-inplace

Inputs

Layout dtl-fluent-columns

Inputs

Panel dtl-fluent-panel

Inputs

Section dtl-fluent-section

Inputs

Splitter dtl-fluent-panel-splitter

Inputs

SVG dtl-fluent-svg

Tabs dtl-fluent-tab

Inputs

Text hint tsm-text-hint

Inputs

Toolbar dtl-fluent-toolbar

Tsm Control tsm-control

Inputs

Wizard dtl-fluent-steps

Inputs

Accordions `dtl-fluent-accordion`

Anchor `dtl-fluent-anchor`

Back button `tsm-button-back`

Button bar `dtl-fluent-bar`

Card `dtl-fluent-card`

Clone `dtl-fluent-clone`

Content `dtl-fluent-content`

External content `dtl-fluent-iframe`

Fieldset `dtl-fluent-fieldset`

Html `dtl-fluent-html`

Inplace `dtl-fluent-inplace`

Layout `dtl-fluent-columns`

Panel `dtl-fluent-panel`

Section `dtl-fluent-section`

Splitter `dtl-fluent-panel-splitter`

SVG `dtl-fluent-svg`

Tabs `dtl-fluent-tab`

Text hint `tsm-text-hint`

Toolbar `dtl-fluent-toolbar`

Tsm Control `tsm-control`

Wizard `dtl-fluent-steps`