Reporting Widgets
Report Table tsm-pivot-reporting-widget
Tabular representation of report data with filtering options.
Widget Or Layout: unknown
Value:
{
"type": "layout",
"title": "Report Table",
"widget": {
"type": "tsm-pivot-reporting-widget"
}
}
Inputs
Height
Key: height
Name: Height
Description: Height configuration: Enter the widget height as any valid CSS value. Leave empty to let the widget size itself by its content. You can combine fixed units with a dynamic calculation using calc(). Fixed height in pixels: 500px Relative to the viewport (e.g. full height minus a header): calc(100vh - 300px) Percentage of the parent element: 100% Viewport height units: 80vh CSS height (MDN) (https://developer.mozilla.org/en-US/docs/Web/CSS/height)
Default: null
Label for "sum in the column"
Key: labelTotalCountColumn
Name: Label for "sum in the column"
Default: ""
Label for "sum in the row"
Key: labelTotalCountRow
Name: Label for "sum in the row"
Default: ""
Script
Key: scriptCode
Name: Script
Default: null
Output context key (optional)
Key: outputContextKey
Name: Output context key (optional)
Description: Leave blank to disable publishing. Use a unique key for each widget, for example salesReport. Read raw filters from $outputContext.salesReport.filters and concrete dates used by TQL from $outputContext.salesReport.resolvedFilters. Raw TQL scripts publish empty filter arrays.
Default: ""
Show filter
Key: showFilter
Name: Show filter
Default: false
Enable XLSX and CSV export
Key: showExport
Name: Enable XLSX and CSV export
Default: false
Export file name
Key: exportFileName
Name: Export file name
Description: File name without an extension: text or a callback returning text (or a Promise). For fresh query dates, use ${report => ...} and report.resolvedFilters; the callback runs after export refresh without an output context key. Provide a fallback when the filter is absent.
Default: "report"
Show sum in the column
Key: showTotalCountColumn
Name: Show sum in the column
Default: true
Show sum in the row
Key: showTotalCountRow
Name: Show sum in the row
Default: true
Show line number
Key: showLineNumber
Name: Show line number
Default: false
decimalSeparator
Key: decimalSeparator
Name: decimalSeparator
Default: "auto"
configuration
Key: configuration
Name: configuration
Default: {}
tqlScript
Key: tqlScript
Name: tqlScript
Default: ""
External filter
Key: externalFilters
Name: External filter
Default: []
Examples
Curated configurations from libs/framework/fluent-forms/__fixtures__/widgets/tsm-pivot-reporting-widget/.
Each is a complete validated FluentSchema — copy & adapt for your form.
Export — 01-export.json
{
"type": "object",
"properties": {},
"layout": [
{
"type": "layout",
"title": "Monthly sales",
"widget": {
"type": "tsm-pivot-reporting-widget"
},
"config": {
"scriptCode": "salesSummary",
"showExport": true,
"exportFileName": "${'sales-' + $context.period}"
}
}
]
}
Filter context export — 02-filter-context-export.json
{
"type": "object",
"properties": {},
"layout": [
{
"type": "layout",
"title": "Monthly sales",
"widget": {
"type": "tsm-pivot-reporting-widget"
},
"config": {
"showFilter": true,
"showExport": true,
"outputContextKey": "salesReport",
"exportFileName": "${report => 'sales' + ((report.resolvedFilters ?? []).find(f => f.field == 'validFor.validFrom' && f.operator == 'btw').value.length == 2 ? '_' + (report.resolvedFilters ?? []).find(f => f.field == 'validFor.validFrom' && f.operator == 'btw').value[0].substring(0, 10) + '_' + (report.resolvedFilters ?? []).find(f => f.field == 'validFor.validFrom' && f.operator == 'btw').value[1].substring(0, 10) : '')}",
"configuration": {
"listingTypeCode": "service",
"rowItems": [
{
"id": "state",
"label": "State",
"title": "State",
"sort": "asc",
"state": {
"field": "state",
"dataType": "VARCHAR"
}
}
],
"columnItems": [],
"valuesItems": [
{
"id": "id",
"label": "Services",
"title": "Services",
"state": {
"field": "id",
"dataType": "VARCHAR"
},
"function": "count",
"result": "count(id)"
}
],
"filters": [
{
"field": "validFor.validFrom",
"operator": "btwr",
"value": [
"-30d",
"0d",
"DAY"
]
}
]
}
}
}
]
}
Gen show export — gen-show-export.json
Demonstrates config.showExport = true on tsm-pivot-reporting-widget.
{
"type": "object",
"title": "Report Table — Enable XLSX and CSV export",
"description": "Demonstrates config.showExport = true on tsm-pivot-reporting-widget.",
"properties": {},
"layout": [
{
"type": "layout",
"widget": {
"type": "tsm-pivot-reporting-widget"
},
"config": {
"showExport": true
}
}
]
}
Gen show filter — gen-show-filter.json
Demonstrates config.showFilter = true on tsm-pivot-reporting-widget.
{
"type": "object",
"title": "Report Table — Show filter",
"description": "Demonstrates config.showFilter = true on tsm-pivot-reporting-widget.",
"properties": {},
"layout": [
{
"type": "layout",
"widget": {
"type": "tsm-pivot-reporting-widget"
},
"config": {
"showFilter": true
}
}
]
}
Gen show line number — gen-show-line-number.json
Demonstrates config.showLineNumber = true on tsm-pivot-reporting-widget.
{
"type": "object",
"title": "Report Table — Show line number",
"description": "Demonstrates config.showLineNumber = true on tsm-pivot-reporting-widget.",
"properties": {},
"layout": [
{
"type": "layout",
"widget": {
"type": "tsm-pivot-reporting-widget"
},
"config": {
"showLineNumber": true
}
}
]
}
Gen show total count column — gen-show-total-count-column.json
Demonstrates config.showTotalCountColumn = false on tsm-pivot-reporting-widget.
{
"type": "object",
"title": "Report Table — Show sum in the column",
"description": "Demonstrates config.showTotalCountColumn = false on tsm-pivot-reporting-widget.",
"properties": {},
"layout": [
{
"type": "layout",
"widget": {
"type": "tsm-pivot-reporting-widget"
},
"config": {
"showTotalCountColumn": false
}
}
]
}
Gen show total count row — gen-show-total-count-row.json
Demonstrates config.showTotalCountRow = false on tsm-pivot-reporting-widget.
{
"type": "object",
"title": "Report Table — Show sum in the row",
"description": "Demonstrates config.showTotalCountRow = false on tsm-pivot-reporting-widget.",
"properties": {},
"layout": [
{
"type": "layout",
"widget": {
"type": "tsm-pivot-reporting-widget"
},
"config": {
"showTotalCountRow": false
}
}
]
}
Notes
Pivot sales report with optional keyed filter output and a fresh-query export filename callback.
Complexity: intermediate
Tags: reporting, pivot, export, output-context, relative-dates
Set config.outputContextKey to a unique key per widget; leaving it blank disables publishing. filters merges raw local and external filters; resolvedFilters contains canonical query values. The exportFileName JEXL returns a callback receiving the fresh export query snapshot, independent of output context propagation. It uses native find by field and operator, formats concrete YYYY-MM-DD bounds and falls back to sales when the date filter is absent. Plain string names are captured at click; arbitrary datasource expressions are not guaranteed to settle after refresh. Raw tqlScript bypasses configured filters and supplies empty arrays. Publishing is null while refreshing; reconfiguring a live widget clears its old key, while removing it leaves the last context. This layout creates no stored form value. The custom configuration assumes service listing columns state, id and validFor.validFrom. Put removable filters in configuration.filters; externalFilters are remerged on refresh and cannot be removed by deleting a local chip.
Report Chart tsm-chart-reporting-widget
Graphical representation of report data.
Widget Or Layout: unknown
Value:
{
"type": "layout",
"title": "Report Chart",
"widget": {
"type": "tsm-chart-reporting-widget"
}
}
Inputs
Height
Key: height
Name: Height
Default: null
Script
Key: scriptCode
Name: Script
Default: null
Buttons position
Key: buttonsPosition
Name: Buttons position
Default: "top"
Show filter
Key: showFilter
Name: Show filter
Default: false
configuration
Key: configuration
Name: configuration
Default: {}
chartConfiguration
Key: chartConfiguration
Name: chartConfiguration
Default: {}
tqlScript
Key: tqlScript
Name: tqlScript
Default: ""
External filter
Key: externalFilters
Name: External filter
Default: []
Examples
Curated configurations from libs/framework/fluent-forms/__fixtures__/widgets/tsm-chart-reporting-widget/.
Each is a complete validated FluentSchema — copy & adapt for your form.
Gen show filter — gen-show-filter.json
Demonstrates config.showFilter = true on tsm-chart-reporting-widget.
{
"type": "object",
"title": "Report Chart — Show filter",
"description": "Demonstrates config.showFilter = true on tsm-chart-reporting-widget.",
"properties": {},
"layout": [
{
"type": "layout",
"widget": {
"type": "tsm-chart-reporting-widget"
},
"config": {
"showFilter": true
}
}
]
}
Listing - Filter dtl-table-filter-widget
Listing - Filter
Widget Or Layout: unknown
Value:
{
"type": "object",
"title": "Listing - Filter",
"widget": {
"type": "dtl-table-filter-widget",
"notitle": true,
"persistent": "Never"
},
"config": {
"listingId": "",
"listingTypeCode": ""
}
}
Inputs
Title position
Key: labelPosition
Name: Title position
Default: "left"
Optional CSS class for input
Key: fieldHtmlClass
Name: Optional CSS class for input
Default: ""
Optional CSS class for description
Key: labelHtmlClass
Name: Optional CSS class for description
Default: ""
Hide title
Key: notitle
Name: Hide title
Default: false
Hidden
Key: hidden
Name: Hidden
Default: false
Listing ID
Key: listingId
Name: Listing ID
Default: null
Listing type
Key: listingTypeCode
Name: Listing type
Default: null
Profile category
Key: profileCategory
Name: Profile category
Default: null
Profile
Key: profileId
Name: Profile
Default: null
Filters
Key: filters
Name: Filters
Description: Allows defining filters for the data displayed in the list.
Default: null