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.


Login page step by step

=> Add couple of text blocks to the HMI

=> Configure Text property of 2nd text block with the following code


Figure 01: Displaying the current HMI user

=> Publish and see the simple HMI

=> Check if it ask password to access (If it asks password, you can use the same password when you publish the content)

=> Who is the current user __SystemGuest or __SystemAdministrator

=> Login to the HMI Server, where we are publishing our application (without real HMI server, we can’t complete the test)

=> Check in the server computer for controlling the authentication required

Figure 02: Controlling the authentication required process in HMI server

=> Authentication required

    => None, password is not required (login user is __SystemGuest)

    => Always authenticate, it will ask password

=> You may need to restart the HMI server application to take change in effect (if you had old app published)

Default User

=> We may need to set a user as default, For example, a viewer, whenever the system starts this user will be auto-login

=> We need to understand what is default user and what he can do

=> What kind of users we can have

=> In which group, each user belongs


Figure 03: Menus for creating users and groups

=> We create a user by clicking on <create new user> name it as viewer, password viewer

=> We select the Auto-Login feature checked, when ever the system starts this user will be auto logged in

=> We can use Auto-Logout period very long time (for example 30 days)


Figure 04: Default user ‘Viewer’ created with Auto logout 30 days

Custom login page

By default, the template creates user such as __SystemGuest (if we don’t have Auto-Login user)

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

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

Figure 06:  Select the loginPage1.html 

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

Figure 08:  Login to the HMI (same password used when we publish the content)

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.

Authentication required  -> None,  it will not ask the password and the login user will be   _SystemGuest

Login page will bring the login page and gives options to user for login dialog  -> the user will be current user

Logout  -> log out the current user and the current user again  _SystemGuest

Figure 09:  Always authenticate option asks password and None does not ask it as Figure 02

Now we can add a Login button and Logout button to our Desktop view

=> We call GoToLoginPage method when user click on Login button

=> We call the following JavaScript code when Logout button is pressed

 TcHmi.Server.logoutEx({ timeout: 2000 }, function(data) {
    console.log('User logout not successful.');       

Testing Application

Now publish the application and see the following desktop view, current user is viewer

Figure 10:  So far done published and current user is ‘Viewer’

=> Click on Login, it will call Login, it will give options to use other users, we use __SystemAdministrator

=> If we press on Logout, it will go default viewer

Figure 11:  Logged in as ‘__SystemAdministrator’ by using login mechanism

Sample Application

In the final application, we have created some buttons which can be visible based on the access right, also we list all users and groups defined in the system by JavaScript. Also, we can create users by supplying user credentials/login names. The primary view is displayed in the following screenshot.

Figure 12:  Sample application for hiding button based on user right

Login page button : If you have set authentication active (not None) then we get the loginpage, if we run the SW in real HMI server.

Logout button: Logout the current user and _SystemGuest will be active  

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

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

Figure 13:  Listing existing groups and users

Calling GoToLoginPage from JavaScript

According to beckhoff web page, we can drag and drop the built in function GoToLoginPage directly which will call the login page. 

var myLogInButton = TcHmi.Controls.get('TcHmiButton');
var mytext = myLogInButton.getText();
if (!mytext.includes('out')) { // out can be what was showing previously for example, Logout     console.log('GoToLoginPage');     var mybool = TcHmi.Functions.Beckhoff.GoToLoginPage(); } else {
    TcHmi.Server.logoutEx({         timeout: 2000     }, function(data) {         console.log('Logout successful.');     }); }

This will logout the current user and if there is no body logged in it will call the login page. If we want to check if a user is logged in and change the text of the login button we can add the following code during the attached time of the button.

var user = TcHmi.Server.getCurrentUser();
var desktop = TcHmi.Controls.get('TcHmiButton');
if (user.includes('DefaultViewer')) {
} else {

Calling Login without the default loginpage

We can log in to the system without using the login page. We provide username, password, persistent, and Reload properties by ourselves. If we press loginbyEditboxData, it will allow us to log in as we have done by the login button and with the default login dialog. Persistent and Reload can be supplied with the server’s internal variable.


1: Login page only works  with the remote HMI server (actual 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. Also if you use browser (for example chrome) in your local machine, it will not work. You must publish to real HMI server.

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


Download the Sample

Download the sample from the link given above.

Next, let’s try to understand how to create user icon at

Ask questions related to Hemelix sample code and design at Google group