has anyone ever tried to automate actions on their Mendix app in the browser with Javascript? We're trying to take a value and use Javascript to paste a value into a textbox, and then press a button, but for some reason Mendix is unable to take the input value and feed it into our microflows. It works however, when I hand key it!! Below is the Javascript code we’re running on our browser with TamperMonkey extension when it takes in an incoming value from web socket. its so weird, I’m able to change the textbox value, but the microflow will just spit back null, even though I set the element attribute. Also odd that once set the attribute value, and I can see the value set! The kicker is when I click into textbox manually, the value disappears! var text_id; text_id = document.querySelector('[id*="textBox_InputSKU"]').id.replace("-label", ""); document.getElementById(text_id).setAttribute('value', incomingScannerMessage); //Button Click to Add SKU var button_obj = document.querySelector('[data-button-id*="addSKUButton"]'); button_obj.click(); use-case for us was we have in-store scanners, and we wanted the employees to be able to just scan from wherever and it would find the appropriate textbox without the user having to go and click in it, etc. All of our scanners are actually configured as HID devices so it won't even work as a keyboard input, so we've got a websocket connection going and then executing our JS with tamper monkey extension. If we are unable to successfully manipulate DOM on the mendix app, our scanners are basically useless.
asked
Matthew Nguyen
3 answers
1
We figured it out!
we have to call the event handler of the React component, which is dynamically named
then we can call onBlur() on the object, which steps out of the textbox (unfocuses) and lets the component pick up the new input.
Here’s the code we used in case anyone is running into the same situation!
let input = document.querySelector('[placeholder="14-digit SKU"');
let lastValue = input.value;
input.value = incomingScannerMessage;
let event = new Event('input', { bubbles: true });
event.simulated = true;
let tracker = input._valueTracker;
if (tracker) {
tracker.setValue(lastValue);
}
input.dispatchEvent(event);
let handler = Object.getOwnPropertyNames(input).filter(s => s.includes('Handler'))[0]
input[handler].onBlur();
var button_obj = document.querySelector('[data-button-id*="2.Shipments.Shipment_Edit_withBoth.addSKU"]');
button_obj.click();
return;
answered
Matthew Nguyen
0
While I’ve not done this exact use case with TamperMonkey, i’ve been able to get JavaScript to set values and submit in a Mendix app.
I don’t have the example code to hand, but it was basically calling “focus” on the input element before setting the value, then calling “blur” on it. I then set the “focus” on the button before clicking it.