Controls are objects that organize interaction between the user and Creatio. For example, buttons, details, fields, etc. Usually, navigation bars, dialog boxes, and toolbars display controls.
Terrasoft.controls.Component is the parent class for controls. Terrasoft.BaseObject class is the parent class for the Component class. The Bindable mixin of the Component class lets you bind control properties to the needed view model properties, methods, or attributes.
Declare events in the control to ensure it operates as intended. Control inherits the following events from the Component class:
- added. Triggered after the control is added to the container.
- afterrender. Triggered after the control is added and the HTML view is added to the DOM.
- afterrerender. Triggered after the control is rendered and the HTML view is updated in the DOM.
- beforererender. Triggered before the control is rendered and the HTML view is added to the DOM.
- destroy. Triggered before the control is deleted.
- destroyed Triggered after the control is deleted.
- init. Triggers after the control is initialized.
Learn more about the Component class events in the JS classes reference.
Control can subscribe to browser events and define its own events.
Implement the control in the diff array of modifications.
The template (template <tpl>) defines the control appearance. Creatio generates the control view in the page view while rendering the control to the page view. Generation is based on the specified template.
The control element has no business logic. The module where you add the control implements the business logic.
The control has styles and selectors attributes that are defined in the Component parent class. These attributes let you customize styles flexibly.
Case description
Create control which enables to enter only integer values in the specified range. Perform the checking of the entered value by pressing the Enter key and display the corresponding message if the number is outside the range. Use the Terrasoft.controls.IntegerEdit control as parent.
Source code
You can download the package with case implementation using the following link.
Case implementation algorithm
1. Create a client module
The procedure for creating a custom schema is covered in the “Create a client schema”.
Run the Add – Module menu command on the Schemas tab of the Configuration section.
Specify following properties of the schema:
- [Name] – “UsrLimitedIntegerEdit”
- [Title] – "UsrLimitedIntegerEdit"
Add the following source code to the schema:
2. Create a class of the control
Modify the source code according to the example below.
Save the schema.
Ecxept the extend and alternateClassName standard properties, the minLimit and maxLimit properties that specify the range of allowed values are added to the class. Default values are used for these properties.
The required control logic is implemented in the onEnterKeyPressed override method After calling the base logic in which the generation of the value change events is performed, the entered value is checked for validity. If the number is not valid, the corresponding warning message is displayed in the input field. The isOutOfLimitsmethod is provided to check the occurrence of the entered value in the range of allowed values.
3. Add the control to the Creatio interface
To add the created control to the Creatio, create the replacing schema, for example, the contact record page. Create a replacing client module and specify the Display schema – Contact card (ContactPageV2) schema as parent object (Fig. 1). Creating a replacing page is covered in the “Create a client schema” article.

Add the following source code to the schema:
Save the schema.
The added ScoresAttribute attribute contains the value connected to the value entered in input field of the control. You can use an integer column of the object connected to the view model of the record edit page instead of the attribute.
The configuration object determining the values of the properties of control entity is added to the diff array. The value of the “value” property is connected to the ScoresAttribute attribute. The values that specify a valid input range are assigned to the minLimit and maxLimit properties.
As a result, the integer field will be added to the contact record page (Fig. 2). The warning message will be displayed in the field if the invalid message will be entered (Fig. 3).

