javascriptsapui5

Methods assigned in XML fragment not triggered

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.

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.

Solution

  • In order to enable triggering control event handlers or property binding formatters that are assigned in the fragment definition, a controller instance or a plain object containing the methods should be passed when calling the API that creates the fragment.

    Given this as a reference to the current controller instance:

    Since UI5 1.93: Controller#loadFragment (Recommended)

    this.loadFragment({ name: "my.Fragment" }); // See API reference for more options

    In the above API, the id and controller are this.getView().getId() and this by default respectively. And as a bonus, the loaded fragment is added to the <dependents> aggregation of the view automatically as well (unless addToDependents: false). The created ManagedObject also contains the owner ID with which the framework can apply any existing extension — no need to wrap loadFragment with sap.ui.core.Component#runAsOwner explicitly.

    For older UI5 versions or if the controller is not accessible

    ⚠️ To enable extensions, the below APIs must be wrapped with Component#runAsOwner.

    Since UI5 1.58: Fragment.load

    // Fragment required from "sap/ui/core/Fragment"
const myFragmentPromise = this.getOwnerComponent().runAsOwner(() => 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: sap.ui.xmlfragment (Deprecated!)

    const myFragment = this.getOwnerComponent().runAsOwner(() => {
  return sap.ui.xmlfragment(this.getView().getId(), "my.Fragment", this);
});

    Related documentation topic: Instantiation of Fragments