HMI User Management

The management of users on any software system is critical to the security of the system and the organization. Proper procedures should be in place within the organization to identify the proper permissions each new user should receive.  Each person or user may not have equal rights, for example, an expert-level user who knows how the system works as compared to an entry-level worker does not know. So there might be potential risks of misusing the system. This section just describes different features with samples for the TwinCAT environment.


Custom login page

By default, the template creates user such as __SystemGuest

=> Add a custom login page as  described in the Beckhoff documentation as shown in the following image.

Figure 1:  Add a new item to the project in visual studio

Figure 2:  Select the loginPage1.html 

Figure 3:  Check in the server side if the selection is OK

Figure 4:  Login to the HMI

Authentication can be kept OFF (username and password will not be asked) by using the configuration of the HMI Server, Authentication required can be set to Always authenticate (always ask the password), or None (password is not asked at all). The configuration page is shown in the following screenshot.

Figure 5:  Always authenticate option asks password and None does not ask it

Sample Application

Few users and groups have been created with different access right as shown in the following Beckhoff page.

Login page : we can login to the system, it offers the standard login page. Different button can be shown or hidden based on the configuration.

All Users and Groups: It will display all users in the system, if we want to use it we must login as admin of the system. Following JavaScript code is executed.

 HmiUserList = [];
        timeout: 2000
    function(data) {
        if (data.error === TcHmi.Errors.NONE) {
            if (
            ) {
                console.log('Data related error while getting the list of UserGroups');
            var dicLengthGroup = Object.keys(data.groupDetailsList).length;
            var arrayList = Object.keys(data.groupDetailsList);
            for (let i = 0; i < dicLengthGroup; i++) {
                        timeout: 2000
                    function(dataUser) {
                        if (dataUser.error === TcHmi.Errors.NONE) 
                            var dicLengthUserListLength = Object.keys(dataUser.userList).length;
                            var userNameList = Object.keys(dataUser.userList);
                            //console.log(`User Length = ${dicLengthUserListLength}`);
                            for (let ii = 0; ii < dicLengthUserListLength; ii++) {
                                oco = new Object();
                                oco.UserName = dataUser.userList[ii];
                                oco.GroupName = arrayList[i];
                                var count = HmiUserList.push(oco);
                                console.log(`count = ${count}`);
                                var targetControl = TcHmi.Controls.get("TcHmi_Controls_Beckhoff_TcHmiDatagrid");
                        } else {
                            // Error
        } else {
            cosole.log('Call related error while calling the function');



1: Login page only works  with the remote HMI server, to test all related feature you must publish the content and test it with the HMI server. If you try with live view then it will not work because the framework has not been loaded fully.

2: Many times our changes are not taken into use (for some reason), RESTART HMI SERVER COMPUTER!