Controls
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.
/* diff array of modifications. */
diff: [{
/* Run the operation that inserts the control into the page. */
"operation": “insert”,
/* The name of the parent element to insert the control. */
"parentName": "CardContentContainer",
/* The property of the parent element with which to execute the operation. */
"propertyName": "items",
/* The meta name of the button to add. */
"name": "ExampleButton",
/* Control values.
Properties to pass to the element constructor. */
"values": {
/* Set the type of the added element to button. */
"itemType": "Terrasoft.ViewItemType.BUTTON",
/* The button title. */
"caption": "ExampleButton",
/* Bind the handler method of the button click. */
"click": {"bindTo": "onExampleButtonClick"},
/* The display style of the button. */
"style": Terrasoft.controls.ButtonEnums.style.GREEN
}
}]
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.
Resources
Terrasoft.controls.Component (JS classes reference)