Version: 8.1

Controls

Level: intermediate

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.

Array of modifications (diff)
/* 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)

Resources​

Resources