createEx

[ Funktion ]

public static createEx(
    type: string, 
    id: string, 
    attributes: null | Dictionary<any>
    parent?: TcHmi.Controls.System.baseTcHmiControl | null
): TcHmi.Controls.System.baseTcHmiControl | undefined;

Creates a control instance with identifier, type and additional attributes.

	From version 1.8, the type was a short version of the name with prefix `'tchmi-'`, e.g. `'tchmi-button'`. Since version 1.12 the namespace is part of the type. So, for example, the new name is `'TcHmi.Controls.Beckhoff.TcHmiButton'`. The system also recognizes the old names and automatically converts them accordingly.

Parameter

Name	Type	Description
type	string	Type of the new control.
id	string	Identifier of the new control.
attributes	null, Dictionary<any>	A Dictionary ( object ) consisting of attribute names and values. Sample: { 'data-tchmi-attribute1' : true, 'data-tchmi-attribute2' : false } You can read the attribute names from the HTML editor. To do this, configure any control and open the HTML editor.
parent [ optional ]	TcHmi.Controls.System.baseTcHmiControl	Parent control of the new control. This is used to check access rights if they depend on the parental control, for example. This parameter should not be set if a control is created dynamically at application level ( CodeBehind ) and then passed to a ContainerControl (View, Content, Container etc.). The parent/child relationship is created dynamically when the control is added to the corresponding ContainerControl using the addChild function. If a control is created dynamically within another control, this other control is the logical parent control and must be passed when the new control is created, so that properties such as access rights can be applied to the child control, and the system has the option to destroy the child control if the parent control is destroyed.

Return value

Type	Description
TcHmi.Controls.System.baseTcHmiControl, undefined	The control object or `undefined` in the event of an error.

	Available from version 1.10

Sample - JavaScript

TcHmi.EventProvider.register('Desktop.onAttached', function (e, data) {
    var myButton = TcHmi.ControlFactory.createEx(
        'tchmi-button',
        'MyButton',
        {
            'data-tchmi-top': 25, 
            'data-tchmi-left': 250, 
            'data-tchmi-width': 200, 
            'data-tchmi-height': 50, 
            'data-tchmi-text': 'MyButton', 
            'data-tchmi-background-color': {
                'color': 'rgba(55, 55, 55, 1)'
            }
        }
    ); 
    var desktop = TcHmi.Controls.get('Desktop'); 
    if (desktop && myButton) {
        desktop.addChild(myButton); 
    }
});

Example – TypeScript

TcHmi.EventProvider.register('Desktop.onAttached', function (e, data) {
    let myButton = TcHmi.ControlFactory.createEx(
        'tchmi-button',
        'MyButton',
        {
            'data-tchmi-top': 25, 
            'data-tchmi-left': 250, 
            'data-tchmi-width': 200, 
            'data-tchmi-height': 50, 
            'data-tchmi-text': 'MyButton', 
            'data-tchmi-background-color': {
                'color': 'rgba(55, 55, 55, 1)'
            }
        }
    ); 
    let desktop = TcHmi.Controls.get<TcHmi.Controls.System.TcHmiView>('Desktop');
    if (desktop && myButton) {
        desktop.addChild(myButton); 
    }
});