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.

Parameters

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. Example: { '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

Example within a control - TypeScript

In this example, a button is dynamically created within a separate control and added to the DOM.

// Place in __prevInit of your own control:
var myButton = TcHmi.ControlFactory.createEx<TcHmi.Controls.Beckhoff.TcHmiButton>
    (
        'TcHmi.Controls.Beckhoff.TcHmiButton',
        'MyButton',
        {
            'data-tchmi-top': 25,
            'data-tchmi-left': 250,
            'data-tchmi-width': 200,
            'data-tchmi-height': 50,
            'data-tchmi-text': 'Dynamic Button',
            'data-tchmi-background-color': {
                color: 'rgba(55, 55, 55, 1)',
            },
        },
        this // <- this sets the framework parent/child relationship,
             // but does not add it in the DOM
    );
if (!myButton) {
    // handle error
    throw new Error(this.getId() + ': Could not create sub button');
}
// Add the button to the DOM at a specific position
this.getElement().append(myButton.getElement());

Example Codebehind – TypeScript

In this example, a button is created dynamically after the desktop is loaded. This control is then added via the existing addChild API of the View control, which also adds the button to the screen.

TcHmi.EventProvider.register('Desktop.onAttached', function (e, data) {
    let desktop = TcHmi.Controls.get<TcHmi.Controls.System.TcHmiView>('Desktop');
    let myButton = TcHmi.ControlFactory.createEx<TcHmi.Controls.Beckhoff.TcHmiButton>
        (
            'TcHmi.Controls.Beckhoff.TcHmiButton',
            '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)'
                }
            },
            desktop // <- this sets the framework parent/child relationship only
        );
    if (desktop && myButton) {
        // Views have an API to add a button and
        // places it into a good place in DOM.
        desktop.addChild(myButton);
    }
});