JavaScript plays a vital role in TwinCAT HMI development. You can make the HMI elegant and beautiful by using JavaScript by using properly.

A JavaScript function is a block of code designed to perform a particular task that is executed when “something” invokes it (calls it). The purpose of the JavaScript function is to define the code once and use it many times. A JavaScript function can call another function, see the example below. See the references and TIPs section at the bottom of this page.

function function_one() {
    function_two(); // considering the next alert, I figured you wanted to call function_two first
    alert("The function called 'function_one' has been called.");
}
function function_two() {
    alert("The function called 'function_two' has been called.");
}
function_one();

See more at this page https://www.hemelix.com/scada-hmi/twincat-hmi/twincat-hmi-async-function/

Create control by using JavaScript:

Normally we drag and drop the control from the toolbox in the engineering environment, we can do the same by using JavaScript code. The following function monitor the onAttached event for Desktop. When the event occurs then it creates a button based on the information supplied. It checks if the Desktop control is available and then adds the created control to the Desktop.

 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); 
    }
});

How to access the button created by the JS code:

console.log('some log');
var buttonID = TcHmi.Controls.get('MyButton') ;
buttonID.setText('Hello Success'); //Change the button text

Example using JavaScript code:

In this simple exercise, we shall change the image source by using JavaScript. if we insert a number in the text box then a source name is returned by JavaScript as shown in the code snippet. As you can see, we are returning an image file path to the caller based on the value of par1.

    var FunctionJS1 = function (par1) {
        switch (par1) {
            case 1:
                return 'Images/valve.svg';
                break;
            case 2:
                return 'Images/valve_hor_closed.svg';
                break;
            case 3:
                return 'Images/Beckhoff_Logo.svg';
                break;
            case 4:
                return 'Images/lock.svg';
                break;
            case 5:
                return 'Images/thermometer.svg';
                break;
            case 6:
                return 'Images/valve_ver_open.svg';
                break;
            default:
                return 'Images/MainDoor.svg';
        }
    };

 How to start the example:

=>Either you can start a new TwinCAT HMI project or open the sample which we are providing as a sample code.

=>Insert a JavaScript function to the solution (normally we create a folder for functions)

=>Insert the above code in the function template provided by the environment (take care of matching parenthesis and brackets).

=> Note that we are passing par1 as a parameter that has a type INT (different than String)