DOM element clicks the button but do not call function defined in controller for Button

Question

I have a requirement to capture events user performs on SAP UI5 app and playback same events when required.

I have developed a small UI5 app with few text fields, buttons, and links. I am using DOM events to capture the events. I save element ID and type of command (click, input) in my local JSONModel. When playback is required, I use saved data to perform same events again.

I am able to capture and playback text input fields but when I click button or link in playback, it clicks the button, but does not call function defined in controller on press event of button.

Can someone help me on this? In below example during playback, button click on submit works fine but it does not call function defined in controller back.

Example code

View file has button defined

var Submit = new sap.m.Button("Submit", {
  text: 'Submit',
  enabled: true,
  press: function(oEvt) {
    oController.OnPressSubmit(oEvt);
  }
});

Controller has function defined

OnPressSubmit: function(oEvt){ /* Perform action */ }

Another .js file injected in index file, capture events like below

document.addEventListener("input", myInputFunction);
function myInputFunction(evt) {
  if (event.target.localName.length > 0) {
    recordingData.push({
      "type": event.target.localName,
      "command": event.type,
      "name": event.target.id,
      "value": event.target.value
    });
  }
  sendData(recordingData);
};

In Playback

function playDataBack(Data) {
  for (var i = 0; i < playbackData.length; i++) {
    if (playbackData[i].command == 'input');
    document.getElementById(playbackData[i].name).value = playbackData[[i]].value;
    if (playbackData[i].command == 'click') {
      var targBtn = document.querySelector ("#" + playbackData[i].name);
      var clickEvent = document.createEvent ('MouseEvents');
      clickEvent.initEvent ('click', true, true);
      targBtn.dispatchEvent (clickEvent);
    }
  };
}

KristoffDT KristoffDT · Accepted Answer · 2019-02-05T11:37:59

Did you include the following code outside your button creation?

oController = this;

Once you have done this assignment you can create your button and the oController will be known inside the 'press' event.

var Submit = new sap.m.Button("Submit", {
  text: 'Submit',
  enabled: true,
  press: function(oEvt) {
    oController.OnPressSubmit(oEvt);
  }
});

By the way, not that it does anything to your code itself, but if you follow naming conventions I would advice you to start your functions/methods with a lowercase :)

Kr,

Kristoff