javascript - Methods assigned in XML fragment not triggered

Question

I'd like to attach a liveChange event to the Input field of the reusable Fragment-based Dialog (Walkthrough Step 19: Reuse Dialogs).

In XML-template HelloDialog.fragment.xml I've added:

<Input
    id = "input-b"
    type = "Password"
    liveChange = ".onLiveChange"
    placeholder = "Enter your password" />

In the fragment's controller HelloDialog.js I've added:

onLiveChange: function (oEvent) {
    const sNewValue = oEvent.getParameter("value");
    this.byId("getValue").setText(sNewValue);
    console.log("sNewValue");
}

Then I set in DevTools a break point in this method and try to type a text in the relevant Input and expect that the break point will be fired but nothing happens.

I've tried to add onLiveChange into the view's controller from where I call this fragment and to the Component.js as well, but still no reaction.

The question is why onLiveChange is not triggered in my case? In SAP Sample: Input - Value Update everything is OK, but they use a regular view, not a fragment-based dialog.

Answer 1

In order to enable triggering methods (e.g. event handlers, formatters, ...) from a fragment, the controller instance (this) or a plain object should be assigned to the option controller when creating the fragment. With the API loadFragment (available since 1.93), the controller instance is added as a listener object by default.

Given this as a reference to the current controller instance:

Since UI5 1.93

this.loadFragment({ name: "my.Fragment" });

In the above API, the id and controller are this.getView().getId() and this by default respectively. And the loaded fragment is added to the dependents aggregation of the view automatically as well (unless addToDependents: false).

No need to assign them explicitly.

Since UI5 1.58

// Fragment required from "sap/ui/core/Fragment"
Fragment.load({
  id: this.getView().getId(),
  name: "my.Fragment",
  controller: this, // or a plain object that contains the event handlers
});

UI5 1.56 and below

// Deprecated!
sap.ui.xmlfragment(this.getView().getId(), "my.Fragment", this);