Button Click on Tablet Screen

[oyolal]

Hello everyone. This code below works on the computer view of WebIQ (Google Chrome Web Browser for Windows 11), but this code does not work on the tablet view of WebIQ (Google Chrome Android app).

The code of WebIQ v2.15.4, Javascript:

const reloadButton = document.getElementsByClassName('ButtonReload')[0];

 reloadButton.addEventListener('click', function() {

//TODO something

}

I checked and on tablet view, none of them worked: "press", "touch", "touched", "release", "released"

I added a mouse to my tablet via USB host, when I clicked the Reload button, it worked with a mouse, but unfortunately, WebIQ can't detect my finger pressing on the reload button.

WebIQ button control name: iq-button-reload
WebIQ button class name: iq-button iq-variant-01 ButtonReloadOnDot

So, do we know how WebIQ's default button object can't handle the onScreen clicking/pressing/tapping on the screen? Thank you.

[webiq-sk]

Your JavaScript code does not relate to WebIQ widgets, but is pure JavaScript to obtain an HTMLElement from the DOM and track clicks. As you're using WebIQ you should use the framework's functions for this instead as widgets are more complex than basic HTML elements.

As you did not specify what you actually want to achieve I can only try to deduct from what you wrote - I assume you want to reload the HMI on click on a WebIQ Button widget. In this case you should always not write custom code to get the button somehow, but simply create a custom UI Action to perform the action.

You only have to write code to get widget instances if you want to track the clicks from a LocalScript instead - but that wouldn't make sense if you only want to track button clicks in general - it's just a one-liner - create a custom UI Action in Code Manager and add the line "location.reload();":

Then simply add your custom UI Action to the button widget you wish to execute the action on and you're done.

If this is not what you want to achieve please explain what you want to achieve. 

Please note that the Scripting Demo contains some very well documented code if you want to do this from a LocalScript instead (which for a normal use case would not be recommended in this case): https://demo.smart-hmi.com/scripting-demo/js/custom-libs/local-scripts/demo-dynamic-widgets.js

[oyolal]

I found the solution to this problem today. 

Problem was: Working buttonOnClick method was not working on the tablet screen because of different performAction handling required.

Solution approach: I tried all of the methods in this code block below:

reloadButton.addEventListener('click', function() {

           console.log('clickworked');

           reloadFunctionBlock();

        });

These are all the methods that I tried both on a computer with a mouse click and Android tablet screen with a finger tap on the screen

Methods of performActions: touchstart, touchmove, touchend, touchcancel, tap , gesturestart , gesturechange , gestureend , mousedown, mouseup, mouseenter, mouseleave, click, dblclick, focus, blur, keydown, keyup, input, change, resize, scroll, wheel, drag, drop.

These are the ones that I found working both on computer and tablet views: touchend, touchstart thenI decided to use touchend for safety and maybe the user wants to correct their wrong performing etc. 

Thank you for your help.

[webiq-sk]

This is not the intended way to use it and not guaranteed to work in the future. When using a framework like Angular, React, Vue.js or, incidentally, WebIQ Visuals you should always use the framework methods, not Vanilla JS when it comes to handling interactivity.

[webiq-sk]

As a summary: when using WebIQ's built-in functionality it handles all of those things like touchstart and touchend correctly. This is not a WebIQ issue.