Gauge widget
Gauge is an analytic widget that displays a single aggregated value on a circular scale with configurable color thresholds. Learn more: Set up gauge (user documentation).
View an example of a configuration object that sets up a gauge below.
{
"operation": "insert",
"name": "GaugeWidget_b99avzi",
"values": {
"layoutConfig": {
"column": 2,
"colSpan": 1,
"row": 1,
"rowSpan": 1
},
"type": "crt.GaugeWidget",
"config": {
"title": "#ResourceString(GaugeWidget_b99avzi_title)#",
"theme": "without-fill",
"layout": {
"color": "dark-blue"
},
"text": {
"fontSizeMode": "medium",
"metricMacros": "{0}",
"template": "{0}"
},
"data": {
"formatting": {
"type": "number",
"decimalPrecision": 0,
"decimalSeparator": ".",
"thousandSeparator": ","
},
"providing": {
"attribute": "GaugeWidget_b99avzi_Data",
"schemaName": "Contact",
"filters": null,
"aggregation": {
"column": {
"orderDirection": 0,
"orderPosition": -1,
"isVisible": true,
"expression": {
"expressionType": 1,
"functionArgument": {
"expressionType": 0,
"columnPath": "Id"
},
"functionType": 2,
"aggregationType": 1,
"aggregationEvalType": 2
}
}
},
"dependencies": [
{
"attributePath": "Id",
"relationPath": "PDS.Id"
}
]
}
},
"thresholds": {
"1": {
"color": "#20A959"
},
"2": {
"color": "#0058EF"
},
"3": {
"color": "#FF4013"
},
"4": {
"color": "#FF4013"
}
},
"min": 1,
"max": 4
}
},
"parentName": "GridContainer_wv06xk5",
"propertyName": "items",
"index": 1
}
General properties
string type
Type of a Freedom UI element. For gauge, "crt.GaugeWidget."
LayoutConfig layoutConfig
Specify the widget position and size.
Parameters
Name | Type | Description |
|---|---|---|
column | number | The column number where the widget starts. |
colSpan | number | The number of columns the widget spans. |
row | number | The row number where the widget starts. |
rowSpan | number | The number of rows the widget spans. |
Widget properties (config)
string title
Widget title.
boolean hideTitle
Whether to hide the widget title at runtime. Does not affect the title of the widget opened in full-screen view. By default, "false."
Available values
Value | Description |
|---|---|
true | Hide the widget title at runtime. |
false | Display the widget title at runtime. |
boolean hideTools
Whether to hide the title-related parameters in the widget setup area. Does not affect the title of the widget opened in full-screen view. By default, "false."
Available values
Value | Description |
|---|---|
true | Hide the title-related parameters in the widget setup area. |
false | Display the title-related parameters in the widget setup area. |
string theme
The visual style of the widget. By default, "without-fill."
Available values
Value | Description |
|---|---|
full-fill | Apply a fully filled background style. |
without-fill | Apply the default style without a background fill. |
partial-fill | Apply a partially filled background style. |
glassmorphism | Apply the glassmorphic style. Available for Creatio 8.3.3 and later. |
object layout
The layout configuration of the widget.
Parameters
Name | Type | Description | ||||||||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
color | string | The accent color of the widget. Value Description burnt-coral cadmium-red forest-green steel-blue vivid-purple rusty-orange dark-turquoise green light-blue celestial-blue bright-red orange-red orange light-green turquoise dark-green red coral purple violet blue navy-blue dark-blue |
object text
The text display configuration of the widget.
Parameters
Name | Type | Description | |||||
|---|---|---|---|---|---|---|---|
template | string | The template used to display the value, for example, "{0}." | |||||
metricMacros | string | The macro that inserts the aggregated value into the template, for example, "{0}." | |||||
fontSizeMode | string | The font size mode of the displayed value. By default, "medium." extra-small small medium large extra-large |
object data
The data configuration of the widget. Includes data formatting and data providing settings.
object thresholds
The color threshold configuration of the gauge scale. Each key is a scale point (as a string number), and its value is an object with a color property.
Parameters
Name | Type | Description |
|---|---|---|
color | string | The hex color code applied to the gauge segment associated with this threshold, for example, "#20A959." |
integer min
The minimum value of the gauge scale.
integer max
The maximum value of the gauge scale.
Data formatting properties (config.data.formatting)
string type
The data type used to format the widget value.
integer decimalPrecision
The number of digits after the decimal point.
string decimalSeparator
The character used as the decimal separator, for example, "."
string thousandSeparator
The character used as the thousand separator, for example, ","
Data providing properties (config.data.providing)
string attribute
The name of the view model attribute that stores the widget data.
string schemaName
The code of the "Object" type schema that provides the data, for example, "Contact."
object filters
Filters applied to the data source. Uses the standard Creatio filter object structure. Learn more: Filter object.
object aggregation
The aggregation configuration for the data column. Defined through a column expression with an aggregationType property value that corresponds to the Terrasoft.AggregationType enumeration. Learn more: EntitySchemaQuery class.
array dependencies
The data source dependencies.
Parameters
Name | Type | Description |
|---|---|---|
attributePath | string | The path to the attribute in the current view model. |
relationPath | string | The related path that the attribute depends on. |
See also
Set up widgets (user documentation)