"Number" type field
The "Number" type field is a field type that lets users enter integer, decimal, and currency values. Learn more: Fields, Set up a Number field (user documentation).
Users can enter negative numbers. The field displays the decimal and thousands separators from the culture of the current user. The field does not display a currency symbol, even if the field is bound to a column of the "Currency" type.
View an example of a configuration object that adds a "Number" type field to the page below.
viewConfigDiff: /**SCHEMA_VIEW_CONFIG_DIFF*/[
{
"operation": "insert",
"name": "NumberInput_ab12cd",
"values": {
"type": "crt.NumberInput",
"label": "#ResourceString(NumberInput_ab12cd_label)#",
"labelPosition": "auto",
"control": "$PDS_UsrAmount",
"placeholder": "#ResourceString(NumberInput_ab12cd_placeholder)#",
"tooltip": "#ResourceString(NumberInput_ab12cd_tooltip)#",
"format": {
"decimalPrecision": 2
},
"layoutConfig": {
"column": 1,
"row": 1,
"colSpan": 1,
"rowSpan": 1
}
},
"parentName": "SideAreaProfileContainer",
"propertyName": "items",
"index": 0
}
]/**SCHEMA_VIEW_CONFIG_DIFF*/,
Properties
General properties
string type
The type of the Freedom UI element. For the "Number" type field, "crt.NumberInput."
string label
The field title.
string labelPosition
Where to display the field title. By default, "auto."
Available values
Value | Description |
|---|---|
auto | Display the title to the left of the field if the field, including the title, is wider than 320 px. Otherwise, display the title above the field. The 320 px threshold is fixed. |
left | Display the title to the left of the field. |
above | Display the title above the field. |
hidden | Hide the title. |
string control
The attribute that stores the field value, for example, "$PDS_UsrAmount." Bind the attribute to a column of the "Integer," "Decimal," or "Currency" type. If the user clears the field or enters an incomplete number, for example, "-," Creatio sets the attribute value to "null." The control property refers to an attribute bound to a column in the viewModelConfigDiff schema section. The following example binds the "PDS_UsrAmount" attribute to the "UsrAmount" column of the "PDS" data source.
viewModelConfigDiff: /**SCHEMA_VIEW_MODEL_CONFIG_DIFF*/[
{
"operation": "merge",
"path": [
"attributes"
],
"values": {
"PDS_UsrAmount": {
"modelConfig": {
"path": "PDS.UsrAmount"
}
}
}
}
]/**SCHEMA_VIEW_MODEL_CONFIG_DIFF*/,
string placeholder
The hint the field displays until the user enters a value.
string tooltip
The tooltip text that appears when the user hovers over the 
icon in the field. If the user changes the field and the value is invalid, the field displays the 
icon with the validation message instead. Learn more: Implement the validation of a field value on a page.
object format
The number format. The format property takes priority over the column type. You can also bind the property to an attribute, for example, "$UsrAmountFormat." If you omit the property, Creatio takes the precision from the column type.
Specify the format property explicitly in the following cases:
- The attribute is not bound to a column.
- The column type has no default precision. For example, a column of the "Decimal" type without a fixed precision.
Parameters
Name | Type | Description | ||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
decimalPrecision | number | The number of digits after the decimal separator. Available values: from "0" to "20," for example, "2." If you specify a value outside this range, Creatio uses the nearest limit: "0" or "20." Users can enter more digits after the decimal separator than the property allows. When the field loses focus, Creatio rounds the value to the specified number of digits and saves the rounded value to the attribute. If you omit the Value Description 0 "Integer" column type. 1 "Decimal (0.1)" column type. 2 "Decimal (0.01)," "Currency (0.01)" column types. 3 "Decimal (0.001)" column type. 4 "Decimal (0.0001)" column type. 8 "Decimal (0.00000001)" column type. |
number value
The field value. Specify the property if you do not specify the control property.
string ariaLabel
The field property mapped to the aria-label element attribute. Screen readers announce this name. By default, the field title. If the title is empty, an empty string. Screen readers do not announce the field name. Learn more about the aria-label attribute: official vendor documentation (Mozilla).
LayoutConfig layoutConfig
The field position and size on the page.
Parameters
Name | Type | Description |
|---|---|---|
column | number | The column number where the field starts. |
colSpan | number | The number of columns the field spans. |
row | number | The row number where the field starts. |
rowSpan | number | The number of rows the field spans. |
State properties
boolean visible
Whether to display the field on the page. By default, "true."
Available values
Value | Description |
|---|---|
true | Display the field. |
false | Hide the field. |
boolean readonly
Whether to display the field in read-only mode. You can select and copy the value but cannot edit it. The field displays the 
icon on hover. Use read-only mode if users need to see and copy the value. To make the field inactive, use the disabled property. To change the mode at runtime, bind the property to an attribute, for example, "$UsrIsLocked." By default, "false."
Available values
Value | Description |
|---|---|
true | Display the field in read-only mode. |
false | Display the field in edit mode. |
boolean disabled
Whether to disable the field. You cannot focus or edit a disabled field, and Creatio displays the field in gray. If users need to copy the value, use the readonly property instead. To change the state at runtime, bind the property to an attribute, for example, "$UsrIsLocked." By default, "false."
Available values
Value | Description |
|---|---|
true | Disable the field. |
false | Enable the field. |
boolean autofocus
Whether to focus the field when the page opens. By default, "false."
Available values
Value | Description |
|---|---|
true | Focus the field when the page opens. |
false | Do not focus the field when the page opens. |
string autocomplete
Whether the browser can populate the field automatically. Creatio passes the value to the autocomplete HTML attribute, so you can use any value the attribute supports. Learn more about the autocomplete attribute: official vendor documentation (Mozilla). By default, "none." Available for Creatio 8.1.4 and later.
Available values
Value | Description |
|---|---|
none | The default value. Creatio passes "none" to the |
off | Turn off automatic population of the field in the browser. |
Events
blurred
Fires when the field loses focus. Bind the event to a request. To pass parameters to the request, use the params property. The handler receives them as request properties.
The following example binds the blurred event to the usr.AmountChangedRequest custom request and passes the field value to it in the "amount" parameter.
viewConfigDiff: /**SCHEMA_VIEW_CONFIG_DIFF*/[
{
"operation": "insert",
"name": "NumberInput_bl3r0d",
"values": {
"type": "crt.NumberInput",
"control": "$PDS_UsrAmount",
"blurred": {
"request": "usr.AmountChangedRequest",
"params": {
"amount": "$PDS_UsrAmount"
}
}
},
"parentName": "SideAreaProfileContainer",
"propertyName": "items",
"index": 0
}
]/**SCHEMA_VIEW_CONFIG_DIFF*/,
Implement the request handler in the handlers schema section. The following example outputs the "amount" parameter value to the browser console.
handlers: /**SCHEMA_HANDLERS*/[
{
request: "usr.AmountChangedRequest",
handler: async (request, next) => {
console.log("Amount: ", request.amount);
return next?.handle(request);
}
}
]/**SCHEMA_HANDLERS*/,
To react to a change of the field value, handle the change of the attribute specified in the control property. Use the crt.HandleViewModelAttributeChangeRequest base request handler. The handler receives the attribute name in the attributeName property, the new value in the value property, and the previous value in the oldValue property. Learn more: Customize fields (Freedom UI).
Creatio updates the attribute after every character the user enters, as well as when the page loads data. This means the handler runs several times while the user fills out the field. To run the business logic once after the user finishes entering the value, use the blurred event.
The following example outputs the new value of the "PDS_UsrAmount" attribute to the browser console every time the value changes.
handlers: /**SCHEMA_HANDLERS*/[
{
request: "crt.HandleViewModelAttributeChangeRequest",
handler: async (request, next) => {
if (request.attributeName === "PDS_UsrAmount") {
console.log("New amount: ", request.value);
}
return next?.handle(request);
}
}
]/**SCHEMA_HANDLERS*/,
Usage examples
Set properties to static values
The following example sets all properties of a "Number" type field to static values. The example does not use attributes, so you do not need to declare them in the viewModelConfigDiff schema section. The field is not bound to a column, so the field displays the value property value, but Creatio does not save it to the database.
viewConfigDiff: /**SCHEMA_VIEW_CONFIG_DIFF*/[
{
"operation": "insert",
"name": "NumberInput_st4t1c",
"values": {
"type": "crt.NumberInput",
"label": "Amount",
"labelPosition": "left",
"placeholder": "Enter the amount",
"tooltip": "The amount in the base currency",
"format": {
"decimalPrecision": 2
},
"value": 1234.5,
"ariaLabel": "Amount in the base currency",
"visible": true,
"readonly": false,
"disabled": false,
"autofocus": false,
"autocomplete": "none",
"layoutConfig": {
"column": 1,
"row": 1,
"colSpan": 1,
"rowSpan": 1
}
},
"parentName": "SideAreaProfileContainer",
"propertyName": "items",
"index": 0
}
]/**SCHEMA_VIEW_CONFIG_DIFF*/,
Bind properties to attributes
The following example binds the properties of a "Number" type field to attributes. The control property sets the field value, so you do not need the value property.
viewConfigDiff: /**SCHEMA_VIEW_CONFIG_DIFF*/[
{
"operation": "insert",
"name": "NumberInput_b0und1",
"values": {
"type": "crt.NumberInput",
"label": "$UsrAmountLabel",
"labelPosition": "$UsrAmountLabelPosition",
"control": "$UsrAmount",
"placeholder": "$UsrAmountPlaceholder",
"tooltip": "$UsrAmountTooltip",
"format": "$UsrAmountFormat",
"ariaLabel": "$UsrAmountAriaLabel",
"visible": "$UsrAmountVisible",
"readonly": "$UsrAmountReadonly",
"disabled": "$UsrAmountDisabled",
"autofocus": "$UsrAmountAutofocus",
"autocomplete": "$UsrAmountAutocomplete",
"layoutConfig": {
"column": 1,
"row": 1,
"colSpan": 1,
"rowSpan": 1
}
},
"parentName": "SideAreaProfileContainer",
"propertyName": "items",
"index": 0
}
]/**SCHEMA_VIEW_CONFIG_DIFF*/,
/* Declaration of attributes and their values. */
viewModelConfigDiff: /**SCHEMA_VIEW_MODEL_CONFIG_DIFF*/[
{
"operation": "merge",
"path": [
"attributes"
],
"values": {
"UsrAmountLabel": {
"value": "Amount"
},
"UsrAmountLabelPosition": {
"value": "left"
},
"UsrAmount": {
"value": 1234.5
},
"UsrAmountPlaceholder": {
"value": "Enter the amount"
},
"UsrAmountTooltip": {
"value": "The amount in the base currency"
},
"UsrAmountFormat": {
"value": {
"decimalPrecision": 2
}
},
"UsrAmountAriaLabel": {
"value": "Amount in the base currency"
},
"UsrAmountVisible": {
"value": true
},
"UsrAmountReadonly": {
"value": false
},
"UsrAmountDisabled": {
"value": false
},
"UsrAmountAutofocus": {
"value": false
},
"UsrAmountAutocomplete": {
"value": "none"
}
}
}
]/**SCHEMA_VIEW_MODEL_CONFIG_DIFF*/,
See also
Overview of Freedom UI Designer and its elements (user documentation)
Set up a Number field (user documentation)
Implement the validation of a field value on a page