How to Access Elements from XML Fragment by ID

by

Accessing controls inside a fragment depends on how your fragment was created in the first place. Here is a list of cases with respective API to use to get the control reference.

Given:

  • this as a reference to the current controller instance
  • Fragment required from the module sap/ui/core/Fragment
  • <MyControl id="controlId"/> in the fragment definition

API to choose

👉this.byId("controlId");

… if the fragment was created with the view ID (either indirectly or directly):

  • this.loadFragment({ name: "..." }); // id: view ID given by default, API since 1.93

  • <!-- In the view embedding the fragment declaratively: -->
<core:Fragment fragmentName="..." type="XML"/><!-- id = view ID given by default -->

  • Fragment.load({ // API since 1.58
  id: this.getView().getId(),
  name: "...",
  controller: this,
});

  • sap.ui.xmlfragment(this.getView().getId(), "...", this); // Deprecated

    Resulting global ID: "componentId---viewId--controlId" *

👉this.byId(Fragment.createId("fragmentId", "controlId"));

… if a fragment ID was given with the view ID combined:

  • this.loadFragment({ id: this.createId("fragmentId"), name: "..." });

  • <core:Fragment id="fragmentId" fragmentName="..." type="XML"/>

  • Fragment.load({
  id: this.createId("fragmentId"),
  name: "...",
  controller: this,
});

  • sap.ui.xmlfragment(this.createId("fragmentId"), "...", this); // Deprecated

    Resulting global ID: "componentId---viewId--fragmentId--controlId" *

👉Fragment.byId("fragmentId", "controlId");

… if only the fragment ID was given without combining with the view ID:

  • this.loadFragment({
  id: "fragmentId",
  name: "...",
  autoPrefixId: false, // Explicitly disabled view ID as prefix
});

  • Fragment.load({
  id: "fragmentId",
  name: "...",
  controller: this,
});

  • sap.ui.xmlfragment("fragmentId", "...", this); // Deprecated

    Resulting global ID: "fragmentId--controlId" *

👉sap.ui.getCore().byId("controlId");

… if no ID to prefix was given. The below settings are not recommended as all control IDs within the fragment definition will be registered globally without any prefix. The uniqueness of the IDs is not guaranteed!

  • this.loadFragment({ name: "...", autoPrefixId: false }); // Not recommended if no id

  • Fragment.load({ name: "...", controller: this }); // Not recommended

  • sap.ui.xmlfragment("demo.view.MyFragment", this); // Deprecated

    Resulting global ID: "controlId"

* Do not rely on the resulting global ID, for example, concatenating ID parts manually in your application. Always use the dedicated APIs mentioned above such as byId and createId. See Stable IDs: All You Need to Know.

Alternative

Instead of accessing the fragment controls directly, consider manipulating the UI via data binding. ⇒ Changes in the model will be reflected in the UI automatically, and, if two-way binding is enabled, user inputs from the UI will be stored in the model directly.

No need to use byId or createId.

Leave a Comment