Widgets and widget parameters
The function of widget-config.js
describes the parameters of widget types
defines which widget is connected to TM1 backend
- every widget can be modified by changing parameters in widget-config
during deployment time
- every widget parameter could be override during a user session in
data-repository pressing control, this allow dynamic widget parameterization depend on data query results
the config file is case-sensitive
- listen is a valid parameter in all widget types, structure of listen:
[{event, method, (parameter)}…]
Methods
refresh
refreshWithWaitingForEvent: waits for specified event in parameter
parameter is valid only for method refreshWithWaitingForEvent
updateContent: updates only the data, not refresh the HTML code
Common Parameters
marginTop: pixel count or percent of padding position
marginRight: pixel count or percent of padding position
marginBottom: pixel count or percent of padding position
marginLeft: pixel count or percent of padding position
paddingTop: pixel count or percent of padding position
paddingRight: pixel count or percent of padding position
paddingBottom: pixel count or percent of padding position
paddingLeft: pixel count or percent of padding position
width
height
visible
ComboChartWidget
Overview
A chart widget that allows to combine the features of a bar chart and a line chart.
Usage example
{
type:string,
label:string,
borderColor:string,
backgroundColor:string,
pointRadius:int,
borderWidth:int,
fill:boolean,
stack:int
}
Configuration
data:
datasets:
paddingTop:
paddingRight:
padding Bottom:
PaddingLeft:
- tooltipsEnabled: true or false, parameters of dataset are shown
on mouse hover
tooltipsMode: mode of hover tooltip menu
legendGroupByStack: makes group from dataset legends
skin: Selected skin of widget
- plot: true or false, not just y, but x values are also given
(not just categories, like years, types, etc.)
id: widget id which used for reference in framework
xAxesLabel: label of X axes
xAxesDisplay: true or false,, default true, display the x axes
- xAxesGridLinesDisplay: true or false, display the x axes grid
lines
- xAxesGridLinesDrawBorder: true or false, display the x axes
grid lines drow border
- xAxesGridLinesDrawOnChartArea: true or false, display the x
axes grid lines draw on chart are
- xAxesGridLinesDrawTicks: true or false, display the x axes
grid lines draw ticks
xAxesGridLinesColor: color of the x axes grid lines
xAxesTicksFontSize: size of the x axes ticks
xAxesTicksFontFamily: string, default ‘imago, sans-serif’
xAxesTicksFontStyle: string, default ‘bold’
xAxesTicksFontColor: color of the x axes ticks
xAxesTicksPadding: padding between X axes ticks
xAxesTicksOffset:
xAxesLabelDisplay: true or false, display the x axes label
xAxesLabelFontSize: size of the x axes label
xAxesLabelFontFamily: font family of the x axes label
xAxesLabelFontColor: color of the a axes label
xAxesLabelFontStyle: style of the x axes label
xAxesLabelPadding: padding between X axes label
xAxesLabelRotation: vertical, horizontal
xAxesStacked: stack datasets on X axes
xAxesTicksBegintAtZero: true or false, begin the x axes at zero
- xAxesOffsetGridLines: if true, grid lines will be shifted to be
between labels
xAxesZeroLineColor: color of the X axes zero line
leftYAxesDisplay: true or false, display the left y axes
leftYAxesBorderDash: length and spacing of dashes on grid lines
leftYAxesStacked: stack datasets on Y axes
leftYAxesMin: minimum of the left y axes
leftYAxesMax: max of the left y axes
leftYAxesStepSize: step size of the left y axes
leftYAxesZeroLineColor: color of the left Y axes zero line
- leftYAxesGridLinesDisplay: true or false, display the left y
axes grid lines
- leftYAxesGridLinesDrawBorder: first grid line is visible, even
if others are not
leftYAxesGridLinesColor: color of the left y axes grid lines
- leftYAxesGridLinesDrawOnChartArea: true or false, display the y
axes grid lines draw on chart are
- leftYAxesGridLinesDrawTicks: true or false, display the left y
axes grid line ticks
leftYAxesLabel: label of the left y axes
leftYAxesLabelConcat: str to add to the left Y axes ticks
leftYAxesLabelFontSize: font size of the left y axes label
leftYAxesLabelFontFamily: font family of the left y axes label
leftYAxesLabelFontColor: font color of the left y axes label
leftYAxesLabelFontStyle: font style of the left y axes label
leftYAxesLabelPadding: padding between Y axes label
leftYAxesLabelRotation: vertical, horizontal
- leftYAxesTicksBegintAtZero: true or false, begin the left y
axes with zero
leftYAxesTicksFontSize: font size of the left y axes ticks
leftYAxesTicksFontFamily: font family of the left y axes ticks
leftYAxesTicksFontStyle: font style of the left y axes ticks
leftYAxesTicksFontColor: font color of the left y axes ticks
leftYAxesTicksPadding: padding between Y axes ticks
- leftYAxesTicksDisplay: true or false, display the left y axes
ticks
- leftYAxesTicksOffset: offset (distance) between ticks of left Y
axes
leftYAxesLabelSeparatesThousands: Separates the Y Axes
- rightYAxesBorderDash: length and spacing of dashes on grid
lines
- rightYAxesTicksBegintAtZero: begin at zero the right y axes
ticks
rightYAxesTicksPadding: padding between Y axes ticks
- rightYAxesTicksDisplay: true or false, display the right y axes
ticks
- rightYAxesGridLinesDisplay: true or false display the right y
axes grid lines
rightYAxesLabel: label of the right y axes label
- rightYAxesLabelDisplay: true or false, display the right y
axes label
rightYAxesLabelFontColor: color of the right y axes label
- rightYAxesLabelFontFamily: font family of the right y axes
label
rightYAxesLabelFontSize: size of the right y axes label
rightYAxesLabelFontStyle: style of the right y axes label
rightYAxesLabelPadding: padding between Y axes label
rightYAxesLabelRotation: vertical, horizontal
rightYAxesStacked: stack datasets on Y axes
- rightYAxesDisplay: true or false, display the right y axes
display
rightYAxesGridLinesColor: color of the right y axes grid lines
- rightYAxesGridLinesDrawBorder: border of the right y axes grid
lines
rightYAxesTicksFontColor: color of the right y axes ticks
- rightYAxesTicksFontFamily: font family of the right y axes
ticks
rightYAxesTicksFontSize: size of the right y axes ticks
rightYAxesTicksFontStyle: style of the right y axes ticks
- rightYAxesTicksOffset: offset (distance) between ticks of right
Y axes
canvasHeight: height of the canvas
canvasWidth: width of the canvas
draggable: true or false, if chart is draggable and moveable
responsive: true or false, chart size depends on screen size
aspectRatio:
maintainAspectRatio: true or false, width depends on height
bezierCurve: true or false, display the bezier curve
showLinearXAxes: true or false, display the linear x axes
customLabelsForYAxes:: Labels For Y Axes like %
tooltipsSeparatesThousands:: Separates the the tooltips
TM1 integration
Data connection: YES
Repository behaviour
2 init queries:
query for X-axis labels Structure: {value:, label:}
parsingControl type: list
query for data Structure: {value:}
parsingControl type: matrix
Usage example
{
Widgetconfig:
{
id: 'hrdemoReportChart1',
type: ComboChartWidget,
width: '800',
height: '400',
title: '',
datasets: [{
"type": "line",
"backgroundColor": "rgba(52,199,89,0.4)",
"borderColor": "#34C759",
"borderWidth": 1,
"pointRadius": 0,
"stack": 1,
legendBackgroundColor: "#34C759",
"dataLabelFontColor": "#fff",
"dataLabelVisible": false,
"fill": true,
dataLabelBorderRadius: 5,
"legendLabel": "Base"
},
{
"type": "line",
"backgroundColor": "rgba(0,122,255,0.4)",
"borderColor": "#007AFF",
"borderWidth": 2,
"pointRadius": 0,
legendBackgroundColor: "#007AFF",
"stack": 2,
dataLabelBorderRadius: 5,
"dataLabelFontColor": "#fff",
"dataLabelVisible": false,
"fill": true,
"legendLabel": "Budget"
}],
tooltipsEnabled: true,
marginBottom: '50',
skin: 'combochartFTE',
legendGroupByStack: true,
bezierCurve: false,
xAxesGridLinesDisplay: true,
xAxesGridLinesDrawBorder: true,
xAxesTicksFontSize: 14,
xAxesTicksFontFamily: 'SFCompactDisplay, sans-serif',
xAxesTicksFontColor: '#333333',
xAxesTicksBegintAtZero: false,
xAxesTicksPadding: 10,
xAxesLabelFontSize: 12,
xAxesLabelFontFamily: 'imago, sans-serif',
xAxesLabelFontColor: '#747b85',
xAxesZeroLineColor: '#dee1e5',
leftYAxesDisplay: true,
leftYAxesStacked: false,
leftYAxesZeroLineColor: '#dee1e5',
leftYAxesGridLinesDisplay: true,
leftYAxesGridLinesDrawBorder: true,
leftYAxesGridLinesColor: '#dee1e5',
leftYAxesGridLinesDrawOnChartArea: true,
leftYAxesGridLinesDrawTicks: true,
leftYAxesLabelFontSize: 12,
leftYAxesLabelFontFamily: 'imago, sans-serif',
leftYAxesLabelFontColor: '#747b85',
leftYAxesLabelFontStyle: 'normal',
leftYAxesLabelPadding: 10,
leftYAxesTicksFontSize: 21,
leftYAxesTicksPadding: 20,
leftYAxesTicksFontStyle: 'normal',
leftYAxesTicksFontFamily: 'SFCompactDisplay, sans-serif',
leftYAxesTicksFontColor: '#333333',
leftYAxesTicksDisplay: true,
rightYAxesLabelFontSize: 12,
}
// repository.js
init: [
{
url: (db) => `/api/v1/ExecuteMDX?$expand=Cells($select=Ordinal,FormattedValue;$expand=Members($select=Name))`,
type: 'POST',
server: true,
body: (db) => {
return {
key: 'hrdemoReportChart1_init_1',
year: v('hrdemoReportRow1Cell3SegmentedControl').selected === '2024' ? '2024' : '2023'
};
},
parsingControl: {
type: 'list',
query:
(r, x) => {
return {
value: (r.Cells[x].Members[4].Name).slice(4, 6),
label: (r.Cells[x].Members[4].Name).slice(4, 6)
};
}
}
},
{
url: (db) => `/api/v1/ExecuteMDX?$expand=Cells($select=Ordinal,FormattedValue;$expand=Members($select=Name))`,
type: 'POST',
server: true,
body: (db) => {
return {
key: 'hrdemoReportChart1_init_2',
year: v('hrdemoReportRow1Cell3SegmentedControl').selected === '2024' ? '2024' : '2023'
};
},
parsingControl: {
type: 'matrix',
length: 2,
query: [
(r, x) => {
return {value: parseInt(r.Cells[x].FormattedValue)};
},
(r, x) => {
return {value: parseInt(r.Cells[x + 1].FormattedValue)};
}
]
}
}
]
}
ContainerWidget
Overview
A logical widget that allows the creation of multi-layered applications. A ContainerWidget provides the same functionality as a page widget (contains other widgets) but on top of the main application UI layer. The widget does not necessarily covers the whole available screen: it can be in a small area (for example a popup)
Configuration
id: widget id which used for reference in framework
anchor: anchor to link the container
widthStr:
heightStr: height of widget (in % or px)
offset: size of the offset
bgColor: background color of the widget
anchorVisible: if anchor visible (flag)
anchorOnClick: toggle backdrop (flag)
visible: if widget visible (flag)
bgScrollable: scrollability of the background (flag)
closeBtn: if widget has a close button(flag)
fixed: if widget fixed (flag)
position: position of the widget
skin: skin of the widget
backdrop: boolean if display backdrop, default false
closeOnClickBackdrop: boolean, default true
heightFixed: boolean, default true
positionAndCalculateBestSpace: string (right, left)
fadingSpeed: int, default 300
TM1 integration
Data connection: NO
Usage example
// widget-config.js
{
{
id: 'hrdemoSimulationVersionSelectorPopUp',
type: ContainerWidget,
anchorVisible: false,
anchorOnClick: true,
backdrop: true,
visible: false,
closeBtn: false,
width: '285px',
heightFixed: false,
bgScrollable: true,
fixed: true,
behaviour: 'popup',
positionAndCalculateBestSpace: 'bottom',
skin: 'version_popup4',
fadingSpeed: 0,
widgets: [
{
id: 'hrdemoSimulationVersionSelectorPopUpDropbox',
type: DropBoxWidget,
skin: 'version_dropbox',
multiSelect: false,
hideIfNoData: false,
selectFirst: true,
}
]
},
}
}
DatePickerWidget
Overview
This widget allows users to select a date
Configuration
allowEmptyDate: Allows selecting no date (empty value)
closeAfterSelectingTheDate: Closes the calendar popup after a date is selected
datePicked: Initially selected date in the widget (format: yyyy.mm.dd or yyyy.mm)
editable: Determines if the input field is editable manually
fullYearButtonText: Label of the full year selection button
fullYearButtonVisible: Whether the full year button is visible
local: Locale used for formatting the displayed date
maxDate: Maximum selectable date
minDate: Minimum selectable date
monthLocale: Locale used for displaying month names (e.g. ‘en-US’)
monthPicker: Enables month-only selection mode (year + month, no days)
ordinal: Unique string to distinguish pick actions (used internally)
panelFixed: Prevents the calendar popup from closing automatically
skin: Selected skin of the widget (affects visual appearance)
title: Title text displayed above the date field
titleVisible: Determines if the title should be shown
TM1 integration
Data connection: OPTIONAL
Repository behaviour
- state query or init query, if no min and max date defined, used query
is init then:
parsingControl type: object
datePicked
minDate
maxDate
pick query:
optional query, that will be fired every time, once a date is selected
Usage example
// widget-config.js
{
id: 'hrdemoSimulationHireOrganisationPopUpGridRow4DatePicker',
type: DatePickerWidget,
width: '319px',
skin: 'headcount_popup_datepicker',
icon: 'icon-calendar',
label: '',
panelFixed: true,
multiSelect: false,
hideIfNoData: false,
selectFirst: true,
}
// repository.js
hrdemoAddDummyPopupGridRow5Cell2DatePicker: {
pick() {
Api.updateWidgetsContent(['hrdemoAddDummyPopupGridRow9Cell2Text', 'hrdemoAddDummyPopupGridRow11Cell2Text', 'hrdemoAddDummyPopupGridRow10Cell2TextBox']);
}
},
}
DropBoxWidget
Overview
This widget is used to select one single or multiple items at a time from a given list of items.
Configuration
backdrop: boolean, default false, whether the backdrop is displayed
editable: boolean, default true
itemIconOff: string, icon
itemIconOn: string, icon
disableSearch: disable search function
panelWidth:: Width of the panel
placeHolder:
selectFirst: boolean, default false, if there is no selected item the first displayed as selected
serverSideFilter:
titleFontSize: font size of the title
titleFontColor: font color of the title
textFontSize: font size of the text
textFontColor: font color of the text
titleTextAlignment: alignment of the title
textAlignment: alignment of the text
title: title of the drop-down
titleVisible: if widget title visible (flag)
multiselect: simple or multiple options can be selected (flag)
hideIfNoData: hide widget if no data inside (flag)
skin: skin of the widget
TM1 integration
Data connection: OPTIONAL
Repository behaviour
state query or init query. If no items used query is init then:
parsingControl type: list or object (in case of PicklistValues)
name
on
choose query:
optional query, that will be fired every time, once an element is selected or deselected
Usage example
// repository.js
{
hrdemoSimulationCompensationChangePopUpGridRow6Cell2DropBox: {
choose() {
Utils.setWidgetValue('compChangePosition', v('hrdemoAddDummyPopupGridRow6Cell2DropBox').value);
Utils.setWidgetValue('systemValueNewBonusValue', '0');
Api.updateWidgetsContent(['hrdemoSimulationCompensationChangePopUpGridRow9Cell2Text', 'hrdemoSimulationCompensationChangePopUpGridRow11Cell2Text', 'hrdemoSimulationCompensationChangePopUpGridRow10Cell2TextBox']);
},
init() {
return new RestRequest(this.restRequest)
},
restRequest:
{
url: (db) => `/api/v1/ExecuteMDX?$expand=Cells($select=Ordinal,FormattedValue;$expand=Members($select=Name))`,
type: 'POST',
server: true,
body: (db) => {
return {
key: 'hrdemoAddDummyPopupGridRow6Cell2DropBox_init'
};
},
parsingControl: {
type: 'list',
query:
(r, x) => {
let selected = v('compChangePosition');
return {
name: r.Cells[x].FormattedValue,
on: r.Cells[x].FormattedValue === selected
};
}
}
}
},
}
GaugeWidget
Overview
A gauge chart primary used in executive dashboard reports to show KPI-s.
Configuration
canvasId:
title: Widget title text
colors: color of the widget
skin: Selected skin of widget
values: The values on the chart
valueLabels:
labels: the labels on the chart
minRange: the minimum value on the chart
maxRange: the maximum value on the chart
showAxisValues: It’s a boolean, default true
separatesThousands: It’s separates the values
fontFamily: font family of the chart
TM1 integration
Data connection: YES
Repository behaviour
1 init query:
query for data Structure: {values: [x, y, z], labels:, minRange:, maxRange:}
parsingControl type: matrix
Usage example
// widget-config.js
{
id: 'hrdemoSimulationRow3CellGauge',
type: GaugeWidget,
width: '200',
showAxisValues: true,
colors: ["#007AFF", "#858686"],
fontFamily: 'imago, sans-serif',
skin: 'simulation_gauge',
separatesThousands: true
}
// repository.js
hrdemoSimulationCompensationChangePopUpGridRow6Cell2DropBox: {
choose() {
Utils.setWidgetValue('compChangePosition', v('hrdemoAddDummyPopupGridRow6Cell2DropBox').value);
Utils.setWidgetValue('systemValueNewBonusValue', '0');
Api.updateWidgetsContent(['hrdemoSimulationCompensationChangePopUpGridRow9Cell2Text', 'hrdemoSimulationCompensationChangePopUpGridRow11Cell2Text', 'hrdemoSimulationCompensationChangePopUpGridRow10Cell2TextBox']);
},
init() {
return new RestRequest(this.restRequest)
},
restRequest:
{
url: (db) => `/api/v1/ExecuteMDX?$expand=Cells($select=Ordinal,FormattedValue;$expand=Members($select=Name))`,
type: 'POST',
server: true,
body: (db) => {
return {
key: 'hrdemoAddDummyPopupGridRow6Cell2DropBox_init'
};
},
parsingControl: {
type: 'list',
query:
(r, x) => {
let selected = v('compChangePosition');
return {
name: r.Cells[x].FormattedValue,
on: r.Cells[x].FormattedValue === selected
};
}
}
}
},
GridCellWidget
Overview
Logical widget type representing one cell of a GridRowWidget
Configuration
id: widget id which used for reference in framework
type: type of widget
marginLeft: left margin
marginRight: right margin
marginTop: top margin
marginBottom: bottom margin
width: width of the widget (in % or px)
height: height of the widget
visible: if widget visible (flag)
skin:skin of the widget
alignment: alignment of the widget (dropbox)
- listen:{event, method} events for the widget listen to and method to
do
TM1 integration
Data connection: NO
Usage example
// widget-config.js
{
id: 'hrdemoSimulationRow3Cell2',
type: GridCellWidget,
alignment: 'center-left',
width: '65%',
widgets: []
}
GridRowWidget
Overview
Logical widget type representing one row of a GridWidget
Configuration
id: Widget Id which used for reference in framework
type: Type of Widget
visible: Toggle visibility of panel content
width: width of the widget
height: height of widget
marginLeft: pixel count of margin position
marginRight: pixel count of margin position
marginTop: pixel count of margin position
marginBottom: pixel count of margin position
alignment: left, center or right side
- listen: {event, method} events for the widget listen to and method to
do
skin: Selected skin of widget
- widgets: [{id: ‘tab1name’,label: ‘text’,action: ‘text’,selected:
true},…
TM1 integration
Data connection: NO
Data connection: NO
Usage example
// widget-config.js
{
id: 'hrdemoSimulationRow4',
type: GridRowWidget,
width: '100%',
height: '70px',
widgets: []
}
GridTableCellWidget
Overview
Logical widget type representing one cell of a GridTableWidget. Main purpose: contain one widget from the followingtypes text, textbox, dropBox, slider, toggle, datepicker
Configuration
borderLeft:
borderRight:
cellBackgroundColor
cellVisible:
cellSkin:
cellWidth:
cellPaddingRight:
cellPaddingLeft:
paddingRight
paddingLeft
skin: skin of the widget
- alignment: string, default center-center alignment of the contained widget (dropbox)
top-left
center-left
bottom-left
top-center
center-center
bottom-center
top-right
center-right
bottom-right
top-space-between
center-space-between
bottom-space-between
borderLeft: if widget has a left border (flag)
borderRight: if widget has a right border (flag)
width
TM1 integration
Data connection: NO
Usage example
// widget-config.js
{
id: 'hrdemoSimulationCell4',
type: GridTableCellWidget,
width: '100%',
height: '70px',
widgets: []
}
GridTableHeaderCellWidget
Overview
Logical widget type representing one cell of a GridTableHeaderRowWidget.
Configuration
cellHeaderSkin:
cellVisible:
alignment: alignment of the widget
top-left
center-left
bottom-left
top-center
center-center
bottom-center
top-right
center-right
bottom-right
top-space-between
center-space-between
bottom-space-between
- borderLeft: true or false, toggle the left border visibility of the
table
- borderRight: true or false, toggle the right border visibility of the
table
width:
TM1 integration
Data connection: 1
Usage example
// widget-config.js
{
id: 'hrdemoSimulationHeaderCell4',
type: GridTableHeaderCellWidget,
width: '100%',
height: '70px',
widgets: []
}
GridTableHeaderRowWidget
Overview
A technical sub-widget built specifically for the GridTableWidget. It provides the ability to make and customize a header for a GridTable. Main purpose: group together GridTableHeaderCellWidgets.
Configuration
alignment: alignment of the widget (dropbox)
borderBottom: if widget has a bottom border (flag)
borderTop: if widget has a top border (flag)
height:
TM1 integration
Data connection: NO
Usage example
// widget-config.js
{
id: 'hrdemoSimulationHeaderRow4',
type: GridTableHeaderRowWidget,
width: '100%',
height: '70px',
widgets: []
}
GridTableLightWidget
Overview
GridTableLightWidget is the lightweight successor of
GridTableWidget. Instead of creating individual child widgets per
cell it renders the entire table directly from the data returned by the
repository. This dramatically simplifies widget configuration while the
runtime still supports:
sticky/frozen headers and columns,
copy-to-clipboard support that respects the user’s current selection,
paging with context aware requests,
Excel export (full dataset or current page),
the familiar event map for
launch,changeandtext_changeevents.
The widget is ideal for large datasets, grids generated from TM1 MDX responses, or any scenario where the classic grid widgets caused configuration bloat. The helloanalogic demo application showcases three flavours of the widget (interactive, compact card-style and plain text) so the examples below reference those assets for consistency.
Typical use cases
Planning dashboards: render multi-thousand row TM1 cubes without pre-creating child widgets and still offer inline editing for text fields or combo boxes.
Operations consoles: blend button, select and custom HTML cells to trigger repository logic (launching detail pages, reassigning owners, etc.).
Read-only reports: emit a simple
columns+ matrixcontentpayload to display an existing table with frozen columns.
Widget configuration
Only a handful of parameters are defined in widget-config.js because
almost every behaviour is described by the repository payload:
id(required): unique identifier used by events and the repository.type(required): alwaysGridTableLightWidget.skin(optional): CSS skin applied to the widget container.pageSize(optional): default page size override when the repository honours paging metadata.
Example from apps/helloanalogic/static/assets/js/configs/widget-config.js:
Usage example
{
id: 'gridTableLightDemoTable',
type: GridTableLightWidget,
skin: 'gridTableLightDemo'
}
{
id: 'gridTableLightCompactTable',
type: GridTableLightWidget,
skin: 'gridTableLightCompact'
}
{
id: 'gridTableLightTextTable',
type: GridTableLightWidget,
skin: 'gridTableLightText'
}
// Commented examples demonstrating server driven paging
// {
// id: 'gridTableLightServerTable',
// type: GridTableLightWidget,
// skin: 'gridTableLightDemo'
// },
// {
// id: 'gridTableLightServerTable2',
// type: GridTableLightWidget,
// skin: 'gridTableLightDemo',
// pageSize: 20
// }
Repository contract
The repository (apps/helloanalogic/static/assets/js/configs/repository.js)
drives almost everything:
initmust return an object withcolumnsandcontent. Thecolumnsarray describes column keys, titles and optional sizing or alignment.contentis a list of rows; each row can either be a shorthand array of raw values (text only) or an object withcellsdescribing individual cell types.Optional metadata extends behaviour without updating the widget config:
totalCount,page,pageSize,allowCopyToClipBoard,freezeHeader,freezeFirstColumns,enableExportorexportConfig.Styling hooks accept strings, plain objects or arrays at multiple levels (root container, table, rows, cells, rendered element).
Event handlers
launch,changeandtext_changereceive the familiar grid context (ctx.getRow(),ctx.getColumn(),ctx.getCell()) so repository logic can coordinate updates across widgets.
The gridTableLightDemoTable repository entry demonstrates interactive
cells, paging, export and styling:
Usage example
gridTableLightDemoTable: {
init(ctx) {
const extra = ctx && ctx.getExtraParams ? ctx.getExtraParams() : {};
const DEFAULT_PAGE_SIZE = 100;
const requestedPageSize = typeof extra.pageSize === 'number' ? extra.pageSize : DEFAULT_PAGE_SIZE;
const pageSize = requestedPageSize === 0 ? 0 : (requestedPageSize || DEFAULT_PAGE_SIZE);
const totalCount = 20000;
const page = extra.page ? Math.max(1, parseInt(extra.page, 10) || 1) : 1;
const startIndex = pageSize ? Math.max(0, (page - 1) * pageSize) : 0;
const endIndex = pageSize ? Math.min(totalCount, startIndex + pageSize) : totalCount;
const columns = [];
for (let idx = 0; idx < Math.min(30, Math.max(6, v('gridTableLightDemoColumnCount') || 20)); idx++) {
// ...push column descriptors (record, status, owner, etc.)
}
const content = [];
for (let index = startIndex; index < endIndex; index++) {
// ...compose cells with text/combo/button/custom types and styling
}
return {
columns,
content,
totalCount,
page,
pageSize,
allowCopyToClipBoard: true,
freezeHeader: true,
freezeFirstColumns: 2,
enableExport: true,
exportConfig: {fileName: 'grid-table-light-demo.xlsx'},
rootClasses: ['grid-table-light-demo-root'],
tableClasses: 'grid-table-light-demo-table',
bodyStyle: 'max-height:520px'
};
},
launch(ctx) { /* update info banner */ },
change(ctx) { /* owner select change */ },
text_change(ctx) { /* inline rename */ }
}
Other repository entries show specialised payloads:
gridTableLightCompactTablebuilds rows entirely in memory, returns apageSizethat matches the total row count, and logs events.gridTableLightTextTablesends acolumnsarray and a plain two-dimensionalcontentarray for read-only scenarios.gridTableLightDemoInfoTextreacts to widget events to display the last user action.
Server backed MDX examples
Two commented repository entries document how to connect a
GridTableLightWidget directly to TM1 MDX queries. Although disabled
in the demo, the snippets are production ready:
Usage example
gridTableLightServerTable: {
init() {
return new RestRequest(this.request);
},
request: {
url: () => '/api/v1/ExecuteMDX?$expand=Cells($select=Ordinal,FormattedValue;$expand=Members($select=Name, Attributes/Editable))',
type: 'POST',
server: true,
body: () => ({key: 'safariAssetRegister2_mdx'}),
parsingControl: {
type: 'script',
script: (data) => {
const transformed = Utils.transformMdxResponseToGridTableLight(data);
return Object.assign({
freezeHeader: true,
allowCopyToClipBoard: true,
enableExport: true,
exportConfig: {fileName: 'safari-asset-register.xlsx'}
}, transformed);
}
}
}
}
gridTableLightServerTable2: {
init() {
return new RestRequest(this.request);
},
request: {
url: (widgets, ctx) => {
const baseUrl = '/api/v1/ExecuteMDX?$expand=Cells($select=Ordinal,FormattedValue;$expand=Members($select=Name, Attributes/Editable))';
const result = Utils.buildMdxQueryUrl(baseUrl, {
includeCount: true,
columnCount: GRID_TABLE_LIGHT_SERVER_TABLE2_COLUMN_COUNT,
defaultRowCount: GRID_TABLE_LIGHT_SERVER_TABLE2_DEFAULT_ROW_COUNT,
metadataKey: GRID_TABLE_LIGHT_SERVER_TABLE2_METADATA_KEY,
returnMetadata: true
}, ctx);
return result && result.url ? result.url : baseUrl;
},
type: 'POST',
server: true,
body: () => ({key: 'safariAssetRegister2_mdx'}),
parsingControl: {
type: 'script',
script: (data, widgetId, repoObj, ctx) => {
const transformed = Utils.transformMdxResponseToGridTableLight(data);
const metadata = ctx && ctx[GRID_TABLE_LIGHT_SERVER_TABLE2_METADATA_KEY] ? ctx[GRID_TABLE_LIGHT_SERVER_TABLE2_METADATA_KEY] : {};
const pageSize = Number.isFinite(metadata.rowCount) && metadata.rowCount > 0 ? metadata.rowCount : GRID_TABLE_LIGHT_SERVER_TABLE2_DEFAULT_ROW_COUNT;
const page = Number.isFinite(metadata.page) && metadata.page > 0
? metadata.page
: (metadata.exportAll ? 1 : (pageSize > 0 ? Math.floor((metadata.skipRows || 0) / pageSize) + 1 : 1));
const countValue = data ? data['Cells@odata.count'] : undefined;
const parsedCountValue = typeof countValue === 'number' ? countValue : Number.parseInt(countValue, 10);
const totalCount = Number.isFinite(parsedCountValue)
? Math.ceil(parsedCountValue / (metadata.columnCount || GRID_TABLE_LIGHT_SERVER_TABLE2_COLUMN_COUNT))
: Math.max(0, (transformed.content || []).length + (metadata.exportAll ? 0 : (metadata.skipRows || 0)));
return Object.assign({
pageSize,
page,
totalCount,
freezeHeader: true,
allowCopyToClipBoard: true,
enableExport: true,
exportConfig: {fileName: 'safari-asset-register-paged.xlsx'}
}, transformed);
}
}
}
}
The first example performs a one-shot MDX execution and enriches the
transformed payload with clipboard and export toggles. The second
example shows how to honour paging metadata stored on the context object
(ctx) so Excel export can temporarily request pageSize: 0 and the
client can fetch all rows.
Implementation checklist
Add the widget to
widget-config.jswith the desired skin.Implement a repository
initmethod that returnscolumnsandcontent(plus optional metadata).Wire event handlers to update auxiliary widgets (see
gridTableLightDemoInfoTextin the demo).When loading data from TM1 or another REST source, wrap the request with
RestRequestand convert the payload usingUtils.transformMdxResponseToGridTableLight.Optionally store paging/column settings in
ctxor widget values to persist user selections across refreshes.
By following the above steps you can replace verbose GridTableWidget
setups with a single lightweight configuration while retaining full
control over styling, behaviour and TM1 integrations.
GridTablePlusWidget
Overview
GridTablePlusWidget embeds a full Tabulator
instance inside Analogic. It accepts high level column and cell metadata
from the repository, translates them to Tabulator column definitions and
renders the grid with built-in support for grouping, selection, inline
editing and clipboard integration. Compared to
GridTableLightWidget it targets interactive dashboards where Tabulator’s
rich feature set (re-sizable columns, range selection, context menus,
custom formatters/editors) is required out of the box.
Typical use cases
Portfolio tables: grouped, filterable project lists with context menus and inline editing as showcased by
analogicTableDemoTableinhelloanalogic.【F:apps/helloanalogic/static/assets/js/configs/repository.js†L964-L1035】【F:apps/helloanalogic/static/assets/js/configs/widget-config.js†L6433-L6484】Ad-hoc data grids: quickly render TM1 payloads or custom arrays with editors/filters for each column, such as the
analogicTableDemoSimpleTableexample.【F:apps/helloanalogic/static/assets/js/configs/repository.js†L1102-L1284】【F:apps/helloanalogic/static/assets/js/configs/widget-config.js†L6485-L6529】Embedded analytics: mix standard Tabulator options (grouping, clipboard, tooltips) with Analogic skins to build rich analysis panels without wiring dozens of child widgets.【F:apps/helloanalogic/static/assets/js/configs/repository.js†L977-L1003】【F:apps/helloanalogic/static/assets/js/configs/widget-config.js†L6459-L6479】
Widget configuration
Only a minimal configuration lives in widget-config.js because
Tabulator behaviour is mostly repository-driven:
id(required): unique widget identifier.type(required): must beGridTablePlusWidget.title: optional caption displayed above the table.minWidth/width/height: sizing hints passed to the widget container.【F:apps/helloanalogic/static/assets/js/configs/widget-config.js†L6465-L6484】【F:apps/helloanalogic/static/assets/js/configs/widget-config.js†L6506-L6527】hideIfNoData: hides the widget when the repository returns no rows.【F:apps/helloanalogic/static/assets/js/configs/widget-config.js†L6465-L6484】tabulatorOptions: default Tabulator options merged with repository-supplied settings (for example layout, selection mode or tooltips).【F:apps/helloanalogic/static/assets/js/configs/widget-config.js†L6468-L6480】【F:analogic/static/assets/js/widgets/grid-table-plus/grid-table-plus.js†L51-L96】tabulatorColumnOptions/tabulatorEvents: optional overrides for individual columns or Tabulator callbacks that are merged with the repository payload.【F:analogic/static/assets/js/widgets/grid-table-plus/grid-table-plus.js†L47-L96】
Widget behaviour
At runtime GridTablePlusWidget merges three sources of options: the
widget configuration, repository payload and data-driven column/cell
metadata. Columns returned by the repository are normalised, default
formatters are wrapped to ensure Analogic styling, and the widget keeps a
cellData matrix for quick access to the underlying metadata during
events.【F:analogic/static/assets/js/widgets/grid-table-plus/grid-table-plus.js†L53-L124】 Tabulator receives the combined
definition via prepareTabulatorSetup and is recreated when the
repository sends fresh data.【F:analogic/static/assets/js/widgets/grid-table-plus/grid-table-plus.js†L69-L124】
Repository contract
The repository entry must return an object with the following keys:
columns: an array of column definitions (title,field, optional formatter/editor, alignment etc.). The widget augments each column with Tabulator-specific defaults and merges overrides fromtabulatorColumnOptions.【F:apps/helloanalogic/static/assets/js/configs/repository.js†L965-L1002】【F:analogic/static/assets/js/widgets/grid-table-plus/grid-table-plus.js†L69-L111】data: either plain values or Analogic cell objects (value,displayValue,metadata). Each row is converted into Tabulator data while preserving the__analogicCellsmap for event handlers. 【F:apps/helloanalogic/static/assets/js/configs/repository.js†L1005-L1048】【F:analogic/static/assets/js/widgets/grid-table-plus/grid-table-plus.js†L96-L124】options: additional Tabulator options (grouping, clipboard, height etc.) that are merged with widget and default settings.【F:apps/helloanalogic/static/assets/js/configs/repository.js†L976-L1003】【F:analogic/static/assets/js/widgets/grid-table-plus/grid-table-plus.js†L102-L124】events: map of Tabulator event names to repository functions (for exampletableBuiltorcellEdited). The widget binds them and exposes helpers likectx.getTabulator(),ctx.getRowComponent()orctx.getCell()for deeper integrations.【F:apps/helloanalogic/static/assets/js/configs/repository.js†L1003-L1067】【F:analogic/static/assets/js/widgets/grid-table-plus/grid-table-plus.js†L47-L124】
Usage example
helloanalogic demonstrates two variations:
// widget-config.js
{
id: 'analogicTableDemoTable',
type: GridTablePlusWidget,
title: 'Project Portfolio Overview',
minWidth: 960,
hideIfNoData: false,
tabulatorOptions: {
height: '520px',
layout: 'fitDataStretch',
movableColumns: true,
resizableColumnFit: true,
selectable: true,
selectableRangeMode: 'drag',
tooltipGenerationMode: 'hover'
}
}
// repository.js
{
analogicTableDemoTable: {
init() {
return {
columns,
data: rows,
options: {
groupBy: 'department',
placeholder: 'No project portfolio data available',
clipboard: true
},
events: {
tableBuilt: 'tableBuilt',
rowSelectionChanged: 'selectionChanged',
cellClick: 'cellClicked',
cellEdited: 'cellEdited'
}
};
}
}
}
The simplified table follows the same contract but returns synthetic
cells and only subscribes to cellEdited events, proving that the
widget can handle both complex and lightweight use cases with the same
API.【F:apps/helloanalogic/static/assets/js/configs/repository.js†L1102-L1284】
GridTableWidget
Overview
A table-type widget for displaying data in rows and columns. Unlike the HorizontalTableWidget the content is not read-only and the gridTableCells can contain nearly any type of widgets. The main difference between the GridWidget and the GridTableWidget is that in the GridTableWidget the cells in the same column always contain the same widget (except for the header row).
Configuration
hideIfNoData:
skin: Selected skin of widget
maxRows:
minWidth:
allowFullContentUpdated:
allowChangedDataUpdate:
allowCopyToClipBoard:
disableRefreshGridCell:
width:
- borderTop: true or false, toggle the top border visibility of
the table
- borderBottom: true or false, toggle the bottom border
visibility of the table
rowHeight: toggle the height of the row
TM1 integration
Data connection: YES
Repository behaviour
all data query of widgets in grid table are written here
- init/state query for each widget (label for button, title/body for
text, value for slider, etc.)
parsing control: matrix, widgets in columns
- column visibility is also defined here: cellVisible parameter in
parsing
cell background color: cellBackgroundColor parameter in parsing
GridWidget
Overview
Logical widget type to contain other widgets arranged in an orthogonal grid.
Configuration
id: widget id which used for reference in framework
type: type of widget
skin: skin of the widget
- listen: {event, method} events for the widget listen to and
method to do
TM1 integration
Data connection: NO
HistogramComboChartWidget
Overview
A combination chart which combines the features of a histogram and a line chart.
Configuration
id: Widget Id which used for reference in framework
type: Type of Widget
title: title of the widget
paddingTop:
paddingRight:
paddingBottom:
paddingLeft:
datasets:
xAxesGridLinesDrawOnChartArea:
yAxesGridLinesDrawOnChartArea:
xAxesLabelRotation:
yAxesLabelRotation:
xAxesDisplay: Display of the x Axes
yAxesGridLinesDrawBorder: display the lines on y axes
xAxesGridLinesDrawBorder: display the lines on x axes
yAxesTicksPadding: Padding of the y Axes ticks
xAxesTicksPadding: Padding of the x Axes ticks
xAxesTicksOffset: Off sett of the x Axes ticks
yAxesTicksOffset: Off sett of the y Axes ticks
xAxesLabelDisplay: Boolean, display of the x Axes label
yAxesLabelDisplay: Boolean, display of the y Axes label
xAxesLabelFontSize: Font size of the x Axes label
yAxesLabelFontSize: Font size of the y Axes label
yAxesLabelPadding: Padding of the y axes label
xAxesLabelPadding: Padding of the x axes label
aspectRatio:
maintainAspectRatio:
datasetHistogram: dataset of the histogram
datasetsLine: dataset of the line(s)
- listen: {event, method} events for the widget listen to and
method to do
- xAxesGridLinesDisplay: true or false, display the x axes
grid lines
xAxesGridLinesColor: color of the x axes grid lines
xAxesTicksFontSize: size of the x axes ticks
xAxesTicksFontFamily: font family of the x axes ticks
xAxesTicksFontStyle: font style of the x axes ticks
xAxesTicksFontColor: color of the x axes ticks
yAxesDisplay:true or false, display the y axes
- yAxesGridLinesDisplay: true or false, display the y axes
grid lines
yAxesGridLinesColor: color of the y axes grid lines
yAxesTicksFontSize: size of the y axes ticks
yAxesTicksFontFamily: font family of the y axes ticks
yAxesTicksFontStyle: font style of the y axes ticks
yAxesTicksFontColor: color of the y axes ticks
xAxesLabelFontFamily: font family of x axes label
xAxesLabelFontColor: color of the x axes label
yAxesLabelFontFamily: font family y axes label
yAxesLabelFontColor: color of the y axes label
yAxisStacked: stack datasets on Y axes
xAxisLabel: label of the x axis
yAxisLabel: y axis label
- histYAxisBufferTop: buffer on the top of the maximum value
(%) on the histogram
- histYAxisBufferBottom: buffer on the bottom of the minimum
value (%) on the histogram
- lineYAxisBufferTop: buffer on the top of the maximum value
(%) on the line
- lineYAxisBufferBottom: buffer on the bottom of the minimum
value (%) on the line
yAxesGridLinesNum: number of grid line on Y axes
widgets: segmentedBar widget ID (see on figure)
TM1 integration
Data connection: YES
Repository behaviour
2 init queries:
query for X-axis labels Structure: {value:, label:}
parsingControl type: list
2. query for data Structure: {x: left side of histogram bar, /x value of line point, y: height of histogram bar/y value of line point}
parsingControl type: matrix
HorizontalTableWidget
Overview
A table-type widget for displaying data in rows and columns. Includes some limited interactive functionality (buttons, search field), but the content of the cells is read-only.
Configuration
columnNames: list of column name: [‘column1’, ‘column2’,…]
columnTypes: list of column type: [‘int’, ‘string’,…]
columnWidths: list of column width(pixel): [‘200’, ‘300’,…]
searchField: toggle Search widget component visibility
selectFirst:
fadeOutNum: max displayed rows without scrolling, default 10
hideIfNoData:
multiselect:
skin: skin of the widget
selectedRowBackgroundColor
TM1 integration
Data connection: YES
Repository behaviour
state or init query if data feed from TM1:
parsingControl type: matrix
value
editable
ordinal
cellEdit query:
fired every time, once a cell is editable and edited by the user {value: r.Cells[x].FormattedValue, editable: false, ordinal: x}; return {active: true}
ImageUploadWidget
Overview
This widget is used for uploading images and photos.
Configuration
allowedMimeTypes: Allowed MIME types for file upload
allowedWidthInPixel: Maximum allowed width of uploaded image in pixels
allowedHeightInPixel: Maximum allowed height of uploaded image in pixels
backgroundColor: Background color of the widget
borderColor: Color of the border around the widget
borderWidth: Width of the border in pixels
cornerRadius: Radius of the widget’s corners in pixels
dividerWidth: Width of the divider line between elements
effect: Visual effect applied to the widget
fontBold: Whether the text should be bold
fontColor: Color of the text
fontSize: Size of the font used for text
gradient: Background gradient style
icon: Icon of the widget
iconHeight: Height of the icon in pixels
iconPosition: Position of the icon (e.g., left, right)
iconWidth: Width of the icon in pixels
label: Text label shown on the widget
maxFileSize: Maximum total upload size in megabytes
maxFileSizePerFile: Maximum file size per individual file in megabytes
progressVisible: Show progress bar during upload
skin: Selected skin of the widget
uploadSuccessMessage: Message shown after successful upload
showUploadSuccessMessage: Whether to show success message after upload
skipStoppingTheLoaderAfterSuccessUpload: Skip hiding the loader after successful upload
TM1 integration
Data connection: NO
ImageWidget
Overview
This widget is used for displaying images and photos.
Configuration
icon: Icon of widget
- fileName: if image is not an icon, name of the image file needs to be
uploaded under ..AnalogicDeploymentstemplateSkins\usedSkin\images.
title: title of the image widget
skin: Selected skin of widget
TM1 integration
Data connection: NO
Usage example
// widget-config.js
{
id: 'hrdemoSettingsRow1Cell1Logo',
type: ImageWidget,
titleFontColor: '#AEAEB2',
fileName: 'knowledgeseed_stratos.png',
titleFontSize: '22px',
width: 290,
height: 90
}
LineAreaChartWidget
Configuration
id: widget id which used for reference in framework
type: Type of Widget
title: Widget title text
- listen: {event, method} events for the widget listen to and method to
do
skin: Selected skin of widget
- datasets: [{legendLabel: string, borderColor: string, borderWidth:
int, backgroundColor: string, fill: boolean, lineTension: float, pointRadius: int},…]
legendSkin: Selected skin of widget
xAxisLabel: label of X axes
xAxesDisplay: true or false,, default true, display the x axes
- xAxesGridLinesDisplay: true or false, display the x axes grid
lines
xAxesTicksDisplay: the ticks of the X axes
xAxesTicksLabelDisplay: the labes of the ticks of the Y axes
- xAxesGridLinesDrawBorder: true or false, display the x axes
grid lines drow border
xAxesGridLinesColor: color of the x axes grid lines
xAxesTicksFontSize: size of the x axes ticks
xAxesTicksFontFamily: string, default ‘imago, sans-serif’
xAxesTicksFontStyle: string, default ‘bold’
xAxesTicksFontColor: color of the x axes ticks
xAxesTicksPadding: padding between X axes ticks
xAxesLabelDisplay: true or false, display the x axes label
xAxesLabelFontSize: size of the x axes label
xAxesLabelFontFamily: font family of the x axes label
xAxesLabelFontColor: color of the a axes label
xAxesLabelFontStyle: style of the x axes label
xAxesLabelPadding: padding between X axes label
xAxesLabelRotation: vertical, horizontal
xAxesTicksOffset: Off sett of the x Axes ticks
xAxesOffset: Off sett of the X
- xAxesOffsetGridLines: if true, grid lines will be shifted to be
between labels
xAxesOffsetRight: Off sett of the X on right
xAxesOffsetLeft: Off sett of the X on left
xMin: the max value of theX axis
yAxisLabel: label of Y axes
yAxisDisplay: true or false, display the left y axes
- yAxesGridLinesDisplay: true or false, display the left y axes
grid lines
- yAxesGridLinesDrawBorder: first grid line is visible, even if
others are not
yMin: the max value of the Y axis
yAxesTicksDisplay: the ticks of the Y axes
yAxesTicksLabelDisplay: the labes of the ticks of the Y axes
yAxesGridLinesColor: color of the left y axes grid lines
yAxesLabel: label of the left y axes
yAxesLabelDisplay: true or false, display the y axes label
yAxesLabelConcat: str to add to the left Y axes ticks
yAxesLabelFontSize: font size of the left y axes label
yAxesLabelFontFamily: font family of the left y axes label
yAxesLabelFontColor: font color of the left y axes label
yAxesLabelFontStyle: font style of the left y axes label
yAxesLabelPadding: padding between Y axes label
yAxesLabelRotation: vertical, horizontal
yAxesTicksOffset: Off sett of the Y Axes ticks
- yAxesTicksBegintAtZero: true or false, begin the left y axes
with zero
yAxesStacked: true or false,
yAxesUnit:
yAxesDecimalNum:
yAxesSeparatesThousands: true or false,
yAxesTicksPrecisionFixed: true or false,
yAxesTicksFontSize: font size of the left y axes ticks
yAxesTicksFontFamily: font family of the left y axes ticks
yAxesTicksFontStyle: font style of the left y axes ticks
yAxesTicksFontColor: font color of the left y axes ticks
yAxesTicksPadding: padding between Y axes ticks
yAxesTicksDisplay: true or false, display the left y axes ticks
- yAxesTicksOffsetet: offset (distance) between ticks of left Y
axes
data
defaultBezierCurveTension
labelClickPopup
manualLabelAlignment
openPopupOnLabelClick
openendPopupOffsetLeft
openendPopupOffsetTop
yAxesOffset
yAxesOffsetBottom
yAxesOffsetTop
yMax
tooltipsEnabled: Boolean , it’s enable the mouse over info
tooltipsMode:
tooltipsIntersect: Boolean
aspectRatio:
maintainAspectRatio: Boolean
TM1 integration
Data connection: 1
Repository behaviour
2 init queries:
query for X-axis labels Structure: {value:, label:}
parsingControl type: list
query for data Structure: {value:}
parsingControl type: matrix
Usage example
// widget-config.js
{
id: 'hrdemoReportChart9',
type: LineAreaChartWidget,
width: '1000',
height: '600',
title: 'Base Business',
datasets: [
{
"legendLabel": "Marketing and Management",
"borderColor": "#f8bfd1",
"borderWidth": 2,
"backgroundColor": "#f8bfd1",
"fill": false,
"lineTension": 0.5,
"pointRadius": 2
},
{
"legendLabel": "Finance and HR",
"borderColor": "#8a8a8a",
"borderWidth": 0,
"backgroundColor": "#8a8a8a",
"fill": false,
"lineTension": 0.5,
"pointRadius": 2
},
],
legendSkin: 'pieChart',
visible: true,
defaultFontFamily: 'imago, sans-serif',
yAxisLabel: 'Sales',
xAxesDisplay: true,
xAxesGridLinesDisplay: false,
xAxesGridLinesDrawBorder: false,
yAxesDisplay: true,
yAxesGridLinesDisplay: false,
yAxesGridLinesDrawBorder: false,
xAxesTicksDisplay: true,
yAxesTicksDisplay: true,
xAxesTicksLabelDisplay: true,
yAxesTicksLabelDisplay: true,
xAxesLabelDisplay: true,
yAxesLabelDisplay: true
}
// repository.js
hrdemoReportChart9: {
init: [
{
url: (db) => `/api/v1/ExecuteMDX?$expand=Cells($select=Ordinal,FormattedValue;$expand=Members($select=Name))`,
type: 'POST',
server: true,
body: (db) => {
return {};
},
parsingControl: {
type: 'list',
query:
(r, x) => {
return {
value: r.Cells[x].Value,
label: r.Cells[x].Members[4].Name
};
}
}
},
{
url: (db) => `/api/v1/ExecuteMDX?$expand=Cells($select=Ordinal,FormattedValue;$expand=Members($select=Name))`,
type: 'POST',
server: true,
body: (db) => {
return {};
},
parsingControl: {
type: 'matrix',
length: 5,
query: [
(r, x) => {
return {value: r.Cells[x].FormattedValue};
}, (r, x) => {
return {value: r.Cells[x + 1].FormattedValue};
}, (r, x) => {
return {value: r.Cells[x + 2].FormattedValue};
}, (r, x) => {
return {value: r.Cells[x + 3].FormattedValue};
}, (r, x) => {
return {value: r.Cells[x + 4].FormattedValue};
}]
}
}
],
},
},
LineScatterComboWidget
Overview
A combination chart which combines the features of a scatter plot diagram and a line chart.
Configuration
datasets:
legendVisible: Boolean, Set the visibility of the legend
canvasPaddingTop:
canvasPaddingRight:
canvasPaddingBottom:
canvasPaddingLeft:
tooltipsEnabled: Boolean, Mouse Over
tooltipsMode:
aspectRatio:
maintainAspectRatio:
xAxisVisible: Boolean, It’s set the visibility of the x Axis
xAxisGridLinesDisplay: Boolean, It’s set the visibility of the x Axis Grid Lines
xAxisGridLinesDrawOnChartArea: Boolean, It’s set the visibility of the x Axis GridLines on chart
xAxisTicksDisplay: Boolean, It’s set the visibility of the x Axis ticks
xAxisTicksLabelDisplay: Boolean, It’s set the visibility of the x Axis ticks label
xAxisTicksStepSize: It’s set the step of the x Axis ticks
xAxisOffsetGridLines: Boolean, It’s set the off sett of the y axis
yAxisVisible: Boolean, It’s set the visibility of the x Axis
yAxisGridLinesDisplay: Boolean, It’s set the visibility of the y Axis Grid Lines
yAxisGridLinesDrawOnChartArea: Boolean, It’s set the visibility of the y Axis GridLines on chart
yAxisTicksDisplay: Boolean, It’s set the visibility of the y Axis ticks
yAxisTicksLabelDisplay: Boolean, It’s set the visibility of the y Axis ticks label
xAxisTicksFontSize: It’s set the size of the x axis ticks font size
yAxisTicksFontSize: It’s set the size of the y axis ticks font size
xAxisTicksFontFamily: It’s set the size of the x axis ticks font family
yAxisTicksFontFamily: It’s set the size of the y axis ticks font family
xAxisTicksFontStyle: It’s set the size of the x axis ticks font style
yAxisTicksFontStyle: It’s set the size of the y axis ticks font style
xAxisTicksFontColor: It’s set the size of the x axis ticks font color
yAxisTicksFontColor: It’s set the size of the y axis ticks font color
xAxisTicksPadding: It’s set the size of the x axis ticks padding
yAxisTicksPadding: It’s set the size of the y axis ticks padding
xAxisTicksOffset: It’s set the size of the x axis ticks off set
yAxisTicksOffset: It’s set the size of the y axis ticks off set
yAxisTicksPrecision: It’s set the size of the y axis ticks precision
yAxisTicksPrecisionFixed: Boolean, It’s set the size of the y axis ticks precision
yAxisGridLinesNum: Boolean, It’s set the size of the y axis gird line nuzms
rightBorderVisible: Boolean, It’s set the visibility of the right border
topBorderVisible: Boolean, It’s set the visibility of the top border
xMin: It’s set the size of the x axis min value
xMax: It’s set the size of the x axis max value
yMin: It’s set the size of the y axis min value
yMax: It’s set the size of the y axis max value
xAxisOffset: Boolean, It’s set the visibility of the x axes off set
xAxisOffsetRight: It’s set the visibility of the x axes off set right
xAxisOffsetLeft: It’s set the visibility of the x axes off set left
yAxisSeparatesThousand: It’s seperate the y axis
yAxisTicksPrecision:
yAxisTicksPrecisionFixed:
yAxisSeparatesThousands:
yAxisGridLinesNum:
yAxisUnit:
bezierCurveBorderWidth:
bezierCurveTension:
auxLineColor:
auxLineWidth:
auxLineDash:
Usage example
// widget-config.js
{
id: 'hrdemoReportChart10',
type: LineScatterComboWidget,
yAxisGridLinesDisplay: false,
width: '1000',
height: '440',
tooltipsEnabled: false,
maintainAspectRatio: false,
yAxisGridLinesNum: 9,
//xAxisOffset: 0.5,
xAxisTicksLabelDisplay: true,
xAxisTicksDisplay: false
}
// repository.js
hrdemoReportChart10: {
init: {
url: (db) => `/api/v1/ExecuteMDX?$expand=Cells($select=Ordinal,FormattedValue;$expand=Members($select=Name))`,
type: 'POST',
server: true,
body: (db) => {
return {
key: 'hrdemoReportChart10_init_2'
};
},
parsingControl: {
type: 'script',
script: (data, object) => {
let items = [{
label: data.Cells[0].Members[5].Name,
pointRadius: 5,
showLine: true,
static: false,
selected: true,
color: '#009FDA',
hidden: false,
values: []
}, {
label: data.Cells[1].Members[5].Name,
pointRadius: 5,
showLine: false,
static: false,
selected: true,
color: '#747678',
hidden: false,
values: []
}];
let start = 202300;
for (let i = 0; i < data.Cells.length; i += 2) {
items[0].values.push({
x: i / 2 + 1,
y: Utils.parseNumber(data.Cells[i].FormattedValue, 'HU-hu')
})
items[1].values.push({
x: i / 2 + 1,
y: Utils.parseNumber(data.Cells[i + 1].FormattedValue, 'HU-hu')
})
}
let values = [...items[0].values, ...items[1].values];
return {
datasets: items, legendVisible: true, legendSkin: 'combochartFTE',
yMax: Utils.precisionRound(Math.max(...values.map(e => e.y)), 0),
yMin: Utils.precisionRound(Math.min(...values.map(e => e.y)), 0)
};
}
}
}
},
},
PageWidget
Overview
Logical widget type to contain every widget that are displayed in a single page.
Configuration
id: widget id which used for reference in framework
type: type of widget
- listen: {event, method} events for the widget listen to and
method to do
- **widgets: contains all widgets on the page (eg.:
BusinessCaseDashboard, BusinessCaseDashboardDraft, etc.)**
TM1 integration
Data connection: NO
PanelWidget
Overview
Logical widget type for containing other widgets. A legacy widget type from the 1.0 version of the framework (currently the GridWidget provides the same functionality.
Configuration
id: Widget Id which used for reference in framework
type: Type of Widget
widgets: widget list, contains all widget on selected page
width: width of widget
- listen: {event, method} events for the widget listen to and method to
do
skin:
TM1 integration
Data connection: NO
PasswordTextWidget
Overview
This widget is used for Passwords
Configuration
id: Unique identifier of the widget, used for binding value and events
skin: Selected skin style for the widget (affects styling via class name)
value: Initial value of the password field (optional, not explicitly used here but can be set programmatically)
TM1 integration
Data connection: NO
PieChartWidget
Overview
A standard pie chart to show relative sizes of data.
Configuration
id: Widget Id which used for reference in framework
type: Type of Widget
canvasHeight:
canvasWidth:
data:
skin: selected skin of widget
legendSkin: selected skin of legend
labelAlign: alignment of label on chart (center, end, start)
labelDisplay: toggle visibility of label
labelBorderColor: border color of label rectangle
labelBackgroundColor: background color of label rectangle
labelBorderWidth: border width of label rectangle in pixel
labelBorderRadius: border radius of label rectangle in pixel
labelTextAlign:
- labelAnchor: defines the anchor point of label (center, end ,
start)
labelPaddingTop: label top padding in pixel
labelPaddingRight: label right padding in pixel
labelPaddingLeft: label left padding in pixel
labelPaddingBottom: label bottom padding in pixel
labelFontSize: label font size
labelFontColor: color of font
labelFontWeight: weight of fon(normal, bold)
aspectRatio:
maintainAspectRatio:
TM1 integration
Data connection: YES
Repository behaviour
1 init query:
1. query for data Structure: {value:, label:,backgroundColor:,borderWidth:,borderColor:}
parsingControl type: list
example response:
Usage example
// widget-config.js
{
id: 'hrdemoReportChart6',
type: PieChartWidget,
width: '1000',
height: '600',
title: '',
tooltipsEnabled: true,
marginBottom: '50',
skin: 'skin4',
legendSkin: 'pieChart',
legendGroupByStack: false,
labelAlign: 'end',
labelAnchor: 'end',
labelDisplay: true,
labelBackgroundColor: '#FFFFFF',
labelFontColor: '#000',
}
// repository.js
hrdemoReportChart6: {
init: {
url: (db) => `/api/v1/ExecuteMDX?$expand=Cells($select=Ordinal,FormattedValue;$expand=Members($select=Name, Attributes/Long_name))`,
type: 'POST',
server: true,
body: (db) => {
return {
key: 'hrdemoReportChart6_init_2',
year: v('hrdemoReportRow1Cell3SegmentedControl').selected === '2024' ? '2024' : '2023'
};
},
parsingControl: {
type: 'script',
script: (data, object) => {
let items = [];
for (let i = 0; i < data.Cells.length; i++) {
items.push({
value: Utils.parseNumber(data.Cells[i].FormattedValue, "HU-hu"),
label: data.Cells[i].Members[4].Attributes['Long_name'],
backgroundColor: Repository.hrdemoReportChart6.iconColor[i]
})
}
return {dataset: items};
}
}
},
iconColor: {
'0': '#F44336',
'1': '#673AB7',
'2': '#03A9F4',
'3': '#4CAF50',
'4': '#FFC107',
'5': '#015D52',
'6': '#6A5D4D',
'7': '#DE4C8A',
}
},
},
PivotTableWidget
Overview
Configuration
id: Widget Id which used for reference in framework
- selectorTreeColNames: [‘Dimensions’, ‘Hierarchies’, ‘Subsets’,
‘Elements’]
colors:
data:
presetData:
tree:
TM1 integration
Data connection: YES
Repository behaviour
No repository specifics documented.
RadarChartWidget
Overview
A radar chart is a way of showing multiple data points and the variation between them. They are often useful for comparing the points of two or more different data sets.
Configuration
Global parameters:
min: minimum value of the axis
max: maximum value of the axis
stepSize: step size on the axis
ticks: labels of the ticks on the axis
tickColor: color of the tick labels
tickFontFamily: font family of the tick labels
tickFontSize: font size of the tick labels
tickFontStyle: font style of the tick labels
canvasHeight: height of the canvas
canvasWidth: width of the canvas
bezierCurveBorderWidth:
bezierCurveTension:
paddingTop:
paddingRight:
paddingBottom:
paddingLeft:
tooltipsEnabled:
tooltipsMode:
canvas Width: width of the canvas
legendSkin: skin of the legend
legendVisible: legend visible flag
datasets
Dataset parameters:
backgroundColor: The line fill color.
borderCapStyle: Cap style of the line.
borderColor: The line color.
borderDash: Length and spacing of dashes.
borderDashOffset: Offset for line dashes.
borderJoinStyle: Line joint style.
borderWidth: The line width (in pixels).
- clip: How to clip relative to chartArea. Positive value allows
overflow, negative value clips that many pixels inside chartArea.
0= clip at chartArea. Clipping can also be configured per side:clip: {left: 5, top: false, right: -2, bottom: 0}
- data: Specified as an array of numbers. Each point in the data array
corresponds to the label at the same index.
fill: How to fill the area under the line.
- label: The label for the dataset which appears in the legend and
tooltips.
- order: The drawing order of dataset. Also affects order for tooltip
and legend.
- tension: Bezier curve tension of the line. Set to 0 to draw straight
lines.
pointBackgroundColor: The fill color for points.
pointBorderColor: The border color for points.
pointBorderWidth: The width of the point border in pixels.
- pointHitRadius: The pixel size of the non-displayed point that reacts
to mouse events.
- pointRadius: The radius of the point shape. If set to 0, the point is
not rendered.
pointRotation: The rotation of the point in degrees.
pointStyle: Style of the point.
- spanGaps: If true, lines will be drawn between points with no or null
data. If false, points with
nulldata will create a break in the line.
TM1 integration
Data connection: YES
Repository behaviour
init query:
query for data Structure: {value:}
parsingControl type: matrix
Usage example
// widget-config.js
{
id: 'hrdemoReportChart12',
type: RadarChartWidget,
skin: 'skin3',
title: '',
titleVisible: true,
visible: true,
canvasWidth: '750',
canvasHeight: '750',
height: '750',
width: '750',
legendVisible: true,
legendSkin: 'skin3'
}
// repository.js
hrdemoGroupsRow1Cell1Button: {
launch() {
Api.openPage('hrdemoMain');
}
},
RichTextWidget
Overview
This widget is used for text editing
Configuration
bold: Enables bold text formatting in the editor
italic: Enables italic text formatting in the editor
underline: Enables underline formatting
leftAlign: Enables left text alignment
centerAlign: Enables center text alignment
rightAlign: Enables right text alignment
justify: Enables justified text alignment
ol: Enables ordered (numbered) list formatting
ul: Enables unordered (bullet) list formatting
heading: Enables heading/title formatting
fonts: Allows changing fonts in the editor
fontList: List of available font families
fontColor: Enables font color selection
backgroundColor: Enables background color selection
fontSize: Enables font size selection
imageUpload: Allows inserting uploaded images
fileUpload: Allows uploading and inserting files
videoEmbed: Allows embedding videos
urls: Enables hyperlink insertion
table: Enables inserting tables into the editor
removeStyles: Allows removing inline styles
code: Enables HTML source code editing
colors: Custom color palette for text and background
youtubeCookies: Whether to allow YouTube cookies in embedded videos
preview: Enables live preview mode
undoRedo: Enables undo and redo functionality
placeholder: Placeholder text shown when editor is empty
skin: Selected skin style for the editor appearance
TM1 integration
Data connection: NO
ScrollTableWidget
Overview
A table-type widget for displaying data in rows and columns. It provides Excel-like functionality including editing cells
Configuration
id: widget id which used for reference in framework
type: type of widget
headerWidth: width of header in pixel
format: W-B-N format for default formatting
startYear: Name of the starting year in numbers
endYear: Name of the ending year in numbers
ribbons (hidden in current version):
bar1: {name, textColor, backgroundColor}
bar2: {name, textColor, backgroundColor}
..bar5: {name, textColor, backgroundColor}
- listen: {event, method} events for the widget listen to and
method to do
TM1 integration
Data connection: YES
Repository behaviour
4 init queries:
parsingControl type: list
1. query for date labels for all column / Structure: {value:, label:}
2. query for table left section / Structure: {labelId: ,label:, comment:, childrenIds:, expandable:, children:, expanded:, format:}
query for cell data / Structure:{value:, disabled:,ordinal:}
query for formatting / Structure: {value:, ordinal:}
cellEdit
query: normal cell edit
pasteCells
query: in case of paste
Data repository specifics (Comment functionality working with 2 special event commentEdit and commentShow, these events transfer the clicked scroll table row information to the comment container’s widgets).
SegmentedBarWidget
Overview
A special multi-section bar chart widget primary used for statistical analysis
Configuration
id: Widget Id which used for reference in framework
type: Type of Widget
- hideIfNoData: boolean if true the widget will hide with empty
content
- listen: {event, method} events for the widget listen to and method to
do
skin: Selected button skin
- dataset: [dataset1:
{value:-300,color:color1,bgColor:color2,separatorVisible:true}
TM1 integration
Data connection: YES
Repository behaviour
1 init query:
query for data Structure: {value:}
parsingControl type: matrix
SegmentedControlItemWidget
Overview
Logical widget type to represent the SegmentedControlWidget options.
Configuration
id: Widget Id which used for reference in framework
type: Type of Widget
skin: Selected skin of widget
- value: ‘1’ if the default value is ON, and ‘0’ if the default
vaule is OFF
label: Label of the widget
- action: Action of Segmented Control Item (scroll, open or
launch)
- selected: true false value: sign which Item of SegmentedControl
is active
TM1 integration
Data connection: NO
SegmentedControlWidget
Overview
This widget is used to switch between displaying different sets of data.
Configuration
id: widget id which used for reference in framework
type: type of widget
skin: skin of the widget
- listen: {event, method} events for the widget listen to and
method to do
TM1 integration
Data connection: NO
Usage example
// widget-config.js
{
id: 'hrdemoPeopleServiceTeamEditorRow2Cell1SegmentedControl',
type: SegmentedControlWidget,
width: '320',
skin: 'segmented',
marginBottom: '5px',
widgets: [
{
id: 'hrdemoPeopleServiceTeamEditorRow2Cell1SegmentedControlItem1',
type: SegmentedControlItemWidget,
action: 'segmentedControlTab1',
skin: 'segmented_left_hrdemo',
selected: true,
label: 'Editor',
},
{
id: 'hrdemoPeopleServiceTeamEditorRow2Cell1SegmentedControlItem2',
type: SegmentedControlItemWidget,
action: 'segmentedControlTab2',
skin: 'segmented_right_hrdemo',
selected: false,
label: 'List',
}
}
// repository.js
hrdemoPeopleServiceTeamEditorRow2Cell1SegmentedControl: {
switch(db) {
Utils.setWidgetValue('systemValueTeamEditorTableData', false);
Utils.setWidgetValue('systemValueClickedElementGroup', false);
Utils.setWidgetValue('systemValueClickedRow', false);
Repository.hrdemoPeopleServiceTeamEditorRow1Cell1Button.clearValues();
Api.openPage('hrdemoPeopleServiceTeamList');
}
},
},
ShadowWidget
Overview
This widget is not displayed. Its purpose is background data query.
Configuration
TM1 integration
Data connection: NO
Usage example
// widget-config.js
{
id: 'hrdemoPeopleServiceTeamEditorShadow',
type: ShadowWidget
}
// repository.js
hrdemoPeopleServiceTeamEditorShadow: {
initFinished() {
Api.forceRefresh('hrdemoPeopleServiceTeamEditorLevel1GridTable');
},
init:
{
url: (db) => `/api/v1/ExecuteMDX?$expand=Cells($select=Ordinal,FormattedValue;$expand=Members($select=Name, Attributes/Caption, Attributes/Normal_Name))`,
type: 'POST',
server: true,
body: (db) => {
return {
group: v('systemValueSelectedGroup')
};
},
parsingControl: {
type: 'object',
query:
{
value: (r, x) => {
for (let i = 0; i < r.Cells.length; ++i) {
v('systemValueSelectedEmployees').push(r.Cells[i].Members[0].Name);
v('systemValueSelectedEmployeeHierarchy').push({
department: r.Cells[i + 1].FormattedValue,
team: r.Cells[i].FormattedValue,
employee: r.Cells[i].Members[0].Name
});
i++;
}
return true;
}
}
}
}
},
},
SimulationPanelSliderWidget
Overview
Configuration
id: widget id which used for reference in framework
type: type of widget
minValue:
maxValue:
currentValue:
unit:
ordinal:
parentWidgetId:
TM1 integration
Data connection: NO
SimulationPanelWidget
Overview
Configuration
id: widget id which used for reference in framework
type: type of widget
skin: skin of the widget
- listen: {event, method} events for the widget listen to and
method to do
TM1 integration
Data connection: NO
SliderWidget
Overview
This widget allows users to set or adjust a value.
Configuration
id: Widget Id which used for refeerence in framework
type: Type of Widget
width: width of the button (%), if hasLayout == true, default: 50%
hideIfNoData: boolean if true the widget will hide with empty content
largeIncrement: The larger value you can increase
- listen: {event, method} events for the widget listen to and method to
do
unit:
updateableWidgetId:
updateableWidgetValueHandler:
updateCallBack:
originalValue:
maxRange: Maximal value
minRange: Minimal value
skin: Selected skin of the widget
smallIncrement: The smaller value you can increase
title: title of the widget
trackValueFontColor: color of the track value label font
trackValueFontSize: size of the track value label font
trackValueMagnifierLabelFontColor: color of the magnifier label font
trackValueMagnifierLabelFontSize: size of the magnifier label font
value: default value of slider (can be array)
buttonsVisible: if buttons visible (flag)
- legend: gives a description of each series. ([{name: ‘First Val’,
color: ‘red’}, {name: ‘Second Val’, color: ‘pink’}, {name: ‘Third Val’, color: ‘orange’}])
visible: if widget visible (flag)
TM1 integration
Data connection: 1
Repository behaviour
state or init query if data feed from TM1:
parsingControl type: matrix
cols
minValue
maxValue
currentValue
unit
ordinal
Usage example
// widget-config.js
{
id: 'hrdemoUpdateValueGridRow4Slider',
type: SliderWidget,
width: '320px',
hideIfNoData: false,
skin: 'hrdemo_cell_value',
minRange: -100,
maxRange: 100,
alignment: 'center',
unit: '%',
updateableWidgetId: 'hrdemoUpdateValueGridRow3TextBox',
trackFillStartValue: -100,
buttonsVisible: false,
listen: [
{
event: 'launch.hrdemoUpdateValueGridRow3Button.finished',
method: 'refreshWithoutLoader'
}
]
}
// repository.js
hrdemoUpdateValueGridRow4Slider: {
getOriginalValue() {
return Utils.parseNumber(Utils.replaceDecimal(v('hrdemoUpdateValueGridRow2Text2').value), 'HU-hu');
},
init() {
if (v('hrdemoUpdateValueGridRow2Text2').value) {
return {
value: 0,
updateableWidgetValueHandler: (sliderValue) => {
let originalValue = this.getOriginalValue(),
newValue;
if (sliderValue === 0) {
newValue = originalValue;
} else {
newValue = (originalValue * (1 + (sliderValue / 100))).toFixed(2);
}
return newValue;
},
calculateSliderValue: (value) => {
let sliderWidgetValue = v('hrdemoUpdateValueGridRow4Slider');
sliderWidgetValue.value = value;
Utils.setWidgetValue('hrdemoUpdateValueGridRow4Slider', sliderWidgetValue);
let originalValue = this.getOriginalValue();
if (originalValue === 0) {
return originalValue;
}
return ((value / originalValue) - 1) * 100;
}
};
}
return {};
}
},
},
StackedColumnChartWidget
Overview
A chart widget used to show how a net value is arrived at, by breaking down the aggregate effect of negative and positive contributions.
Configuration
fontFamily : font family of the chart
fontSize : font size of the chart
fontStyle :font style of the chart
fontWeight : font weight of the chart
fontLineHeight : font line height of the chart
fontColor : font color of the chart
gridColor : grid color of the chart
gridWidth : gird Width of the chart
xAxisGridDisplay : true or false
yAxisGridDisplay : true or false
aspectRatio:
maintainAspectRatio: true or false
tooltipsEnabled: true or false
animationEnabled: true or false
rightBorderVisible: true or false, visible of the right border
rightBorderWidth: width of the right border
rightBorderColor: color of the right border
topBorderVisible: true or false, visible of the top border
topBorderWidth: width of the top border
topBorderColor: color of the top border
interactionMode:
interactionAxis:
interactionIsIntersect: true or false
lineColor: color of the line
lineWidth: width of the line
lineTension: Tension of the line
barBorderColor: Color of the border bar
barBorderRadius: Radius of the border bar
barBorderWidth: width of the border bar
barInflateAmount:
barPercentage: percentage of the bar
barCategoryPercentage:
barThickness: thickness of the bar
barMaxThickness: max thickness of the bar
barMinLength: min length of the bar
canvasPaddingTop: paddingTop of the canvas
canvasPaddingRight: paddingRight of the canvas
canvasPaddingBottom: paddingBottom of the canvas
canvasPaddingLeft: paddingLeft of the canvas
legendVisible: true or false, Visible of the legend
legendPosition: position of the legend
legendAlign: alignment of the legend
legendFontFamily: family of the legend
legendFontSize: font size of the legend
legendFontStyle: font style of the legend
legendFontWeight: font weight of the legend
legendFontLineHeight: font line height of the legend
xAxisBorderDisplay: true or false, display the border of x axis
xAxisDisplay: true or false, display the x axis
xAxisAlignToPixels: true or false, align the x axis to pixels
xAxisStacked: true or false
xAxisBorderColor: Color of the x axis border
xAxisBorderWidth: width of the x axis border
xAxisTicksLabelDisplay: true or false, display the ticks of the x axis label
xAxisTicksFontColor: Color of the x axis ticks
xAxisTicksFontFamily: Font family of the x axis ticks
xAxisTicksFontSize: Font size of the x axis ticks
xAxisTicksFontStyle: Font style of the x axis ticks
xAxisTicksFontWeight: Font weight of the x axis ticks
xAxisTicksFontLineHeight: Font line height of the x axis ticks
xAxisTicksLabelPadding: Padding of the x axis ticks label
xAxisGridDisplay: display of the x axis grid
xAxisGridColor: color of the x axis grid
xAxisGridOffset: true or false, offset of the x axis grid
xAxisTicksDisplay: display of the x axis ticks
xAxisGridDrawOnChartArea: Draw on chart area of the x axis
xAxisGridLineWidth: line width of the x axis grid
yMin: minimum value of the y axis
yMax: maximum value of the y axis
yMarginTop: margin top of the y axis
yMarginBottom: margin bottom of y axis
yMarginLeft: margin left of the y axis
yMarginRight: margin right of the y axis
yAxisDisplay: ture or false, display the y axis
yAxisAlignToPixels: true or false, align to pixels of the y axis
yAxisStacked: true or false
yAxisBorderDisplay: true or false, display the y axis
yAxisBorderColor: Color of the y axis border
yAxisBorderWidth: width of the y axis border
yAxisGridDisplay: display the y axis grid
yAxisGridDrawOnChartArea:
yAxisGridLineWidth: width of the y axis gird line
yAxisTicksDisplay: display of the y axis ticks
yAxisTicksLabelDisplay: display of the y axis ticks labels
yAxisTicksFontColor: font color of the y axis ticks
yAxisTicksFontFamily: font family of the y axis ticks
yAxisTicksFontSize: font size of the y axis ticks
yAxisTicksFontStyle: font style of the y axis ticks
yAxisTicksFontWeight: font weight of the y axis ticks
yAxisTicksFontLineHeight: font line height of the y axis ticks
yAxisTicksLabelPadding: padding of the y axis ticks labels
yAxisTicksCount: number of y axis ticks
yAxisTicksLimit: limit of the y axis ticks
yAxisGridColor: color of the y axis
yAxisGridLinesNum: number of y axis lines
yAxisShowOnlyZeroLine: true or false,show only zero line
yAxisUnit: unit of the y axis
yAxisDecimalNum: decimal number of the y axis
yAxisSeparatesThousands: true or false
yAxiyAxisTicksPrecisionFixed: true or false
labelColor: Color of the label
labelBackgroundColor: Color of the label background
labelFontFamily: Font family of the label
labelFontSize: Font size of the label
labelFontStyle: Font style of the label
labelFontWeight: Font weight of the label
labelFontLineHeight: Font line height of the label
labelPaddingTop: padding top of the label
labelPaddingLeft: padding left of the label
labelPaddingRight: padding right of the label
labelPaddingBottom: padding bottom of the label
labelAlign: align of the label
labelOffset: offset of the label
labelAnchor: anchor of the label
labelClamp: true or false, clamp of the label
labelClip: true or false, clip of the label
labelBorderRadius: border radius of the label
arrowEnabled: true or false
arrowMarginTop: margin top of the arrow
arrowMarginMiddle: margin middle of the arrow
arrowMarginBottom: margin bottom of the arrow
arrowLength: length of the arrow
arrowLineColor: line color of the arrow
arrowLineWidth: line width of the arrow
arrowCircleColor: circle color of the arrow
arrowCircleRadius: circle radius of the arrow
arrowCircleWidth: circle width of the arrow
arrowTriangleColor: Trinagle color of the arrow
arrowTriangleSize: triangle size of the arrow
arrowLabelVisible: true or false
arrowLabelColor: label color of the arrow
arrowLabelBackgroundColor: background color of the arrow
arrowLabelFontFamily: font family of the arrow
arrowLabelFontSize: font size of the arrow
arrowLabelFontStyle: font style of the arrow
arrowLabelFontWeight: font weight of the arrow
arrowLabelFontLineHeight: font line height of the arrow
arrowLabelPaddingTop: padding top of the arrow label
arrowLabelPaddingLeft: padding left of the arrow label
arrowLabelPaddingRight: padding right of the arrow label
arrowLabelPaddingBottom: padding bottom of the arrow label
arrowLabelAlign: align of the arrow label
arrowLabelOffset: offset of the arrow label
arrowLabelAnchor: anchor of the arrow label
arrowLabelClamp: true or false, clamp of the arrow label
arrowLabelClip: true or false, clip of the arrow label
arrowLabelBorderRadius: border radius of the arrow label
data: Data series to be displayed in the widget
hideZeroBars: true or false, hide bars with zero value
yAxisTicksLimit: Maximum number of tick lines on Y axis
labelDataPointVisible: true or false, show label directly at data point
labelDataLabelVisible: true or false, show label text for data
labelAlignments: Label alignment direction (e.g. ‘start’, ‘center’, ‘end’)
lalelsForceDisplay: true or false, force label visibility even in tight spaces
showZeroValueLabels: true or false, show labels for zero values
manualLabelAlignmentSetting: true or false, allow manual alignment of labels
labelClickPopup: ID of the popup to open when label is clicked
openPopupOnLabelClick: true or false, enable label click to open popup
openendPopupOffsetLeft: Horizontal offset in pixels for popup opening
openendPopupOffsetTop: Vertical offset in pixels for popup opening
TextAreaWidget
Overview
This widget is used for entering multiple lines of text. The widget is resizable by bottom right corner drag and drop
Configuration
id: widget id which used for reference in framework
type: type of widget
- listen: {event, method} events for the widget listen to and method to
do
editable: Boolean, It’s set editable true or false
skin: Selected skin of widget:
title: title of the textbox
titleVisible: visibility
defaultText: shown default
tooltip: Widget tool tip text
tooltipTitle: WidgetTootTip Title
visible: if widget visible (flag)
width: width of the button (%), if hasLayout == true, default: 50%
icon:
highlight:
placeholder:
textAlignment: alignment of the text
textFontColor: font color of the text
textFontSzite: font size of the text
titleFontColor: font color of the title
titleFontSize: font size of the title
titleTextAlignment: alignment of the title
TM1 integration
Data connection: YES
Repository behaviour
state or init if text coming from TM1 backend:
parsingControl type: object
text
ordinal
Usage example
// widget-config.js
{
id: 'hrdemoSimulationCommentPopupCommentInput',
type: TextAreaWidget,
placeholder: 'Add comment ...',
marginBottom: '30',
width: '280px',
height: '105px',
icon: 'icon-send.png',
skin: 'comment_message
}
// repository.js
hrdemoSimulationCommentPopupCommentInput: {
save: {
url: (db) => {
return `/api/v1/Processes('zSYS Analogic UI Add Comment')/tm1.ExecuteWithReturn`;
},
type: 'POST',
server: true,
body: (db) => {
let parameters = Repository.hrdemoSimulationGridTable.getCommentSaveProcessParameters();
parameters['comment'] = v('hrdemoSimulationCommentPopupCommentInput.value');
parameters['activeUser'] = v('activeUser').replace(/\\/g, '/');
Utils.setWidgetValue('hrdemoSimulationCommentPopupCommentAdded', true);
return parameters;
},
callback() {
Api.executeQueryRequest(['hrdemoSimulationCommentPopupCommentInput', 'reloadComment']);
}
},
reloadComment: {
url: (db) => `/api/v1/ExecuteMDX?$expand=Cells($select=Ordinal,FormattedValue)`,
type: 'POST',
server: true,
body: (db) => {
return Repository.hrdemoSimulationGridTable.getCommentReloadParametersAfterSave();
},
parsingControl: {
type: 'script',
script: (data) => {
let r = {
previousCommentId: data.Cells[0].FormattedValue,
commentId: data.Cells[1].FormattedValue,
text: data.Cells[2].FormattedValue,
user: data.Cells[3].FormattedValue,
date: data.Cells[4].FormattedValue
};
Utils.setWidgetValue('hrdemoSimulationCommentPopupLoadedComments', v('hrdemoSimulationCommentPopupLoadedComments').length !== 0 ? [r].concat(v('hrdemoSimulationCommentPopupLoadedComments')) : [r]);
Utils.setWidgetValue('hrdemoSimulationCommentPopupLoadFromLoadedComments', true);
Api.forceRefresh('hrdemoSimulationCommentPopupPreviousCommentsGridTable');
Api.forceRefresh('hrdemoSimulationCommentPopupCommentInput');
Api.forceRefresh('hrdemoSimulationCommentPopupControlPanelLoadMoreButton');
return {};
}
}
}
},
},
TextBoxWidget
Overview
This widget is used for entering a single line of text.
Configuration
id: widget ID used for reference in framework
type: type of widget
titleFontSize: font size of the title
titleFontColor: font color of the title
textFontSize: font size of the text
textFontColor: font color of the text
title: title of the textbox
titleVisible: if widget title visible (flag)
- defaultText: shown by default in an empty cell, like a hint for
expected content
visible: if widget visible (flag)
- hideIfNoData: boolean if true the widget will hide with empty
content
- listen: {event, method} events for the widget listen to and
method to do
skin: skin of the widget
textBoxType: type of the textbox (drop-down)
titleTextAlignment: alignment of the title
textAlignment: alignment of the text
icon: icon of the widget (drop-down)n to and method to do
highlight:
defaultText:
editable: Boolean, It’s set editable true or false
skin:
TM1 integration
Data connection: OPTIONAL
Repository behaviour
state query or init query. If query is init then:
parsingControl type: object
value
writeEnd query:
optional query, that will be fired every time, once finished editing the TextBox (clicked out from the textbox area)
Usage example
// widget-config.js
{
id: 'hrdemoSimulationCompensationChangePopUpGridRow12Cell2TextBox',
type: TextBoxWidget,
width: 350,
marginTop: '10px',
editable: true,
skin: 'custom_group',
height: '40px'
}
// repository.js
hrdemoSimulationCompensationChangePopUpGridRow12Cell2TextBox: {
init() {
if (Utils.getGridTableCurrentCell('hrdemoSimulationGridTable').yearAndMonth) {
return new RestRequest(this.restRequest);
}
return [];
},
restRequest: {
url: (db) => `/api/v1/ExecuteMDX?$expand=Cells($select=Ordinal,FormattedValue;$expand=Members($select=Name))`,
type: 'POST',
server: true,
body: (db) => {
return {
version: v('systemValueSelectedVersion2'),
period: Utils.getGridTableCurrentCell('hrdemoSimulationGridTable').yearAndMonth,
employee: Utils.getGridTableCurrentRow('hrdemoSimulationGridTable')[0].employeeNumber,
group: v('hrdemoSimulationGroupSelectorPopUpDropbox').value
};
},
parsingControl: {
type: 'object',
query:
{
value: (r, x) => {
Utils.setWidgetValue('systemValueNewBonusValue', r.Cells[x].FormattedValue);
Api.updateWidgetsContent(['hrdemoSimulationCompensationChangePopUpGridRow9Cell2Text', 'hrdemoSimulationCompensationChangePopUpGridRow11Cell2Text', 'hrdemoSimulationCompensationChangePopUpGridRow10Cell2TextBox']);
return 0;
},
defaultText: (r, x) => {
return 0;
}
}
}
}
},
},
TextWidget
Overview
This widget is used to display text
Configuration
id: widget id which used for reference in framework
type: type of widget
icon:
iconColor:
iconCustomEventName:
iconHeight:
iconPosition:
iconWidth:
title: title of the widget
body: text in the body of the widget
titleFontSize: size of the text in the title
titleFontColor: color of the text in the title
titleBackgroundColor:
titleCursor:
titleFontWeight:
bodyFontSize: size of the text in the body
bodyFontColor: color of the text in the body
bodyBackgroundColor:
bodyCursor:
bodyFontWeight:
skin: skin of the widget
titleAlignment: alignment of the title
bodyAlignment: the alignment of the text in the body
editable: If the text in the body is editable (flag)
performable:
visible: if widget is visible (flag)
ordinal:
- listen: {event, method} events for the widget listen to and
method to do
TM1 integration
Data connection: OPTIONAL
Repository behaviour
state query or init query:
parsingControl type: object
text
Usage example
// widget-config.js
{
id: 'hrdemoSimulationCompensationChangeGroupPopUpGridRow2Text1',
type: TextWidget,
titleFontSize: '13',
title: 'Group - 2023. June',
marginTop: '15px',
marginBottom: '15px',
marginLeft: '9px',
}
// repository.js
hrdemoSimulationCompensationChangeGroupPopUpGridRow2Text1: {
init() {
let m = Utils.getGridTableCurrentCell('hrdemoSimulationGridTable').yearAndMonth,
months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
if (m) {
let y = m.slice(0, 4) + '. ' + months[Utils.parseNumber(m.slice(4, 6)) - 1];
return {
title: v('hrdemoSimulationGroupSelectorPopUpDropbox').value + ' - ' + '<b style=color:#747B85>' + y + '</b>',
}
}
return {};
}
},
},
ToggleWidget
Overview
The purpose of this widget is to permit the user to make a binary choice, i.e. a choice between one of two possible mutually exclusive options. (for example: on-off choice)
Configuration
id: Widget Id which used for reference in framework
type: Type of Widget
action: action if button clicked, name of action in repository
confirmMessage: what confirm message should pop up
- groupId: ID of the connected toggle’s, each toggle has to be refer to
the same group naming
icon: selected icon of toggle when ON
iconOff: selected icon of toggle when OFF
- listen: {event, method} events for the widget listen to and method to
do
skin: Selected button skin
titleFontColor: color of the button label font
titleFontSize: size of the button label font
titleOff: title of OFF state
titleOn: title of ON state
- **value: ‘1’ if the default value is ON, and ‘0’ if the default value
is OFF**
visible: if widget visible (flag)
width: width of the button (%), if hasLayout == true, default: 5
backgroundColor:
isGridTableHierarchyExpander:
editable:
groupId:
icon:
iconOff:
icontFontSize:
icontFontColor:
skin:
titleFontColor:
titleFontSize:
titleOn:
titleOff:
value:
backgroundColor:
editable:
iconFontSize:
iconFontColor:
TM1 integration
Data connection: OPTIONAL
Repository behaviour
optional switch query, that can switch for example processes
optional query for value (0 or 1)
- only url, body and type settings are used. parsingControl settings is
not available
Usage example
// widget-config.js
{
id: 'hrdemoViewGroupGridTableCell01Toggle1',
type: ToggleWidget,
titleFontSize: '13',
skin: 'page_toggle',
iconColor: '#007AFF',
icon: 'icon-checkbox-on11',
iconOff: 'icon-checkbox-off1',
titleFontWeight: '600'
}
// repository.js
hrdemoGroupsRow1Cell1Button: {
launch() {
Api.openPage('hrdemoMain');
}
},
TornadoChartWidget
Overview
A special bar chart widget used for sensitivity analysis
Configuration
id: widget id which used for reference in framework
type: type of widget
title: title of the widget
xAxisLabel: label of the x-axis
baseValue: base value of the chart
xMin: minimum value of the x-axis
xMax: maximum value of the x-axis
range: range of the chart (= xMax - xMin)
zoomable: if the widget can be enlarged (flag)
skin: skin of the widget
- dataset: $.extend(true, o.dataset || [], data.dataset ||
demo)
- listen: {event, method} events for the widget listen to and
method to do
legendsVisible: if legends visible
dataset:
xAxisLabel:
baseValue:
legendVisible:
skin:
xMin:
range:
TM1 integration
Data connection: YES
Repository behaviour
2 init queries:
query for base value
parsingControl type: object
2. query for data Structure: {leftValue:, leftColor:, rightValue:, rightColor:, legendLabel:}
parsingControl type:
matrix
Usage example
// widget-config.js
{
id: 'hrdemoReportChart11',
type: TornadoChartWidget,
width: '1700',
height: '400',
marginLeft: '1600px',
dataset: [
{
leftColor: '#F44336',
rightColor: '#F44336'
},
{
leftColor: '#673AB7',
rightColor: '#673AB7'
},
],
xMin: 0,
xMax: 150,
skin: ''
}
// repository.js
hrdemoReportChart11: {
init:
{
url: (db) => `/api/v1/ExecuteMDX?$expand=Cells($select=Ordinal,FormattedValue;$expand=Members($select=Name))`,
type: 'POST',
server: true,
body: (db) => {
return {
key: 'hrdemoReportChart11_init'
};
},
parsingControl: {
type: 'script',
script: (r) => {
let results = [], maxValue = 0, minValue = 0, leftValue, rightValue;
for (let x = 0; x < r.Cells.length; x += 2) {
leftValue = Utils.parseNumber(r.Cells[x].FormattedValue, 'HU-hu');
rightValue = Utils.parseNumber(r.Cells[x + 1].FormattedValue, 'HU-hu');
results.push({
leftValue: 0 - leftValue,
rightValue: rightValue,
});
if (rightValue > maxValue) {
maxValue = rightValue;
}
if (leftValue > minValue) {
minValue = leftValue;
}
}
return {dataset: results, baseValue: 0, xMin: 0, xMax: maxValue * 1.3};
}
}
},
VerticalLineBoxWidget
Overview
Sub-widget of LineAreaChartWidget
Configuration
id: Widget Id which used for reference in framework
type: Type of Widget
- listen: {event, method} events for the widget listen to and method to
do
- dataset: [{lineVisible: boolean, lineStyle:
‘dotted’/’solid’/’dashed’, lineWidth: int, labelVisible: boolean, titleVisible: int, value: float, label: string, lineColor: string, labelColor: string, titleColor: string, titleBgColor: string},…]
TM1 integration
Data connection: YES
Repository behaviour
init query:
query for data Structure: {value:}
parsingControl type: matrix
WaterfallWidget
Overview
A chart widget used to show how a net value is arrived at, by breaking down the aggregate effect of negative and positive contributions.
Configuration
id: widget id which used for reference in framework
- dataset1: $.extend(true, dataset1Config, d.dataset1 ||
{legendLabel: ‘Dataset One’, legendColor: ‘pink’, datapoints: [{value: 9.06}, {value: -0.06}, {value: 0.5}, {value: 0}, {value: 9.5}]})
- dataset2: $.extend(true, dataset2Config, d.dataset2 ||
{legendLabel: ‘Dataset One’, legendColor: ‘red’, datapoints: [{value: 8.06}, {value: -3.06}, {value: 1.5}, {value: 5}, {value: 4.5}]})
xAxisLabels: labels of the x-axis
labelVisible: if label visible (flag)
legendVisible: if legend visible (flag)
minYAxis: minimum value of the y-axis
maxYAxis: maximum value of the y-axis
yAxisGridLineNum: number of horizontal grid lines
yAxisDecimalNum:
yAxisUnit:
defaultColor: default color of the widget (currently #F3F4F6)
skin: skin of the widget
yAxisTicksPrecisionFixed: true or false,
yAxisSeparatesThousands: true or false,
height: height of the chart
allowLastColumnToZero: true or false
allowLastColumnToZero: true or false, allow the last column to show zero value
labelFontSize: Font size of the labels
labelHasAction: true or false, indicates if label has a click action
openPopupOnLabel: true or false, open a popup when clicking the label
popupToOpenId: ID of the popup to be opened when label is clicked
xAxisFontSize: Font size of the X axis labels
yAxisFontSize: Font size of the Y axis labels
TM1 integration
Data connection: not specified
Repository behaviour
No repository specifics documented.
Usage example
// widget-config.js
{
id: 'hrdemoReportWaterFall',
type: WaterFallWidget,
width: '1600',
height: '400',
title: '',
minYAxis: 0,
maxYAxis: 200000,
dataset1 : {showConnectionLines: true, legendLabel: 'Dataset One', legendColor: '#007AFF',
datapoints:
[
{value: 84000, positiveColor: '#B1B3B3', negativeColor: '#B1B3B3'},
{value: 76000, positiveColor: '#007AFF', negativeColor: '#CFE0F5'},
{value: -190000, positiveColor: '#007AFF', negativeColor: '#CFE0F5'},
{value: -210000, displayValue: 210000, positiveColor: '#007AFF', negativeColor: '#CFE0F5'},
{value: 128300, isTotal: true, positiveColor: '#B1B3B3', negativeColor: '#B1B3B3'},
{value: 84000, displayValue: -84000, positiveColor: '#007AFF', negativeColor: '#CFE0F5'},
{value: -75000, displayValue: 75000, positiveColor: '#007AFF', negativeColor: '#CFE0F5'},
{value: -100000, displayValue: 100000, positiveColor: '#007AFF', negativeColor: '#CFE0F5'},
{value: 101600, positiveColor: '#B1B3B3', negativeColor: '#B1B3B3'}
]
},
marginTop: '150',
marginBottom: '50',
marginLeft: 300,
labelVisible: true,
legendVisible: false,
yAxisGridLineNum: 4,
yAxisSeparatesThousands: true,
xAxisLabels : [
{value: 'Total Cost 2022'},
{value: 'Calculated Salary'},
{value: 'Bonus'},
{value: 'Auto Allowance'},
{value: 'Other Benefits'},
{value: 'Employer Contributions'},
{value: 'Social Security'},
{value: 'Pension Fund'},
{value: 'Health Insurance'}
]
}
// repository.js
hrdemoReportWaterFall: {
init: [
{
url: (db) => `/api/v1/ExecuteMDX?$expand=Cells($select=Ordinal,FormattedValue;$expand=Members($select=Name, Attributes/Long_NameENG))`,
type: 'POST',
server: true,
body: (db) => {
return {
key: 'hrdemoReportWaterFall_init'
};
},
parsingControl: {
type: 'script',
script(r) {
let values = r.Cells.map(
(elem, index) => r.Cells.slice(
0, index + 1).map(
e => Utils.parseNumber(e.FormattedValue, 'HU-hu')).reduce(
(a, b) => a + b));
values.splice(-1, 1);
const max = Math.max.apply(this, values),
min = Math.min.apply(this, values);
return {
maxYAxis: String(Math.round((max * 1.01))),
minYAxis: String(Math.round((min * 0.99)))
};
}
}
},
{
url: (db) => `/api/v1/ExecuteMDX?$expand=Cells($select=Ordinal,FormattedValue;$expand=Members($select=Name, Attributes/Long_NameENG))`,
type: 'POST',
server: true,
body: (db) => {
return {
key: 'hrdemoReportWaterFall_init'
};
},
parsingControl: {
type: 'script',
script(r) {
const process = function (cell, index) {
const val = Utils.parseNumber(cell.FormattedValue, 'HU-hu')
return {
value: val,
displayValue: Utils.separatesThousands(val)
};
}
return Utils.getGridtableMatrix(r.Cells, 9, process);
}
}
}
]
},
},