Controls. Introduction

Controls are objects used to create an interface between the user and a Creatio application. They are displayed in navigation panels, dialog boxes and toolbars. Controls include buttons, checkboxes, radio buttons, input fields etc.

All controls are inherited from the Terrasoft.Component class (Terrasoft.controls.Component in full), which in turn is inherited from Terrasoft.BaseObject. Because the Bindable mixin is declared in the (Component) parent class, it is possible to bind control properties to desired view model properties, methods, or attributes.

For correct operation, the necessary events are declared in the control element. Each element contains events inherited from the Terrasoft.Component class:

• added – triggered after the component is added to the container.
• afterrender – triggered after the component has been rendered and its HTML representation gets in the DOM.
• afterrerender – triggered after the component has been rendered and its HTML representation is updated in the DOM.
• beforererender – triggered before the component has been rendered and its HTML representation gets in the DOM.
• destroy – triggered before the control is deleted.
• destroyed – triggered after the control is deleted.
• init – triggered when component initialization is complete.

Learn more about Terrasoft.Component class events in the "JavaScript API for platform core” article.

Controls may subscribe to browser events and determine their own events.

The control is defined in the diff modification array of the module where it must be located.

// The diff modification array of the module
diff: [{
    // Insert operation.
    "operation": "insert",
    // Control parent element.
    "parentName": "CardContentContainer",
    // Name of the parent element property with which the operation is performed.
    "propertyName": "items",
    // Control name.
    "name": "ExampleButton",
    // Control value.
    "values": {
        // Control type.
        "itemType": "Terrasoft.ViewItemType.BUTTON",
        // Control caption.
        "caption": "ExampleButton",
        // Binding the control event to a function.
        "click": {"bindTo": "onExampleButtonClick"}, 
        // Control style.
        "style": Terrasoft.controls.ButtonEnums.style.GREEN
    }
}]

The appearance of the control is determined by the (template <tpl>) template. Element view is generated according to a specified template during the rendering of the control in the page view.

Controls do not have any business logic. The logic is determined in the module where the control is added.

The control has the styles and selectors attributes, which are determined in the Terrasoft.Component parent class. These attributes provide style customization flexibility.