How to Access Elements from XML Fragment by ID

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.

Favor model-first approach over byId

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.

SAP Fiori elements guidelines

When developing Fiori elements extensions, make sure to adhere to the documented compatibility guidelines, especially regarding byId:

[...] Don't access or manipulate SAP Fiori elements' internal coding.
[...] Must not access any UI elements that are not defined within your view extensions.

⚠ Caution
If you do not adhere to this guideline, your app may not work with future SAPUI5 versions because SAP Fiori elements might exchange controls for new ones that have a different API.


Looking at the OpenUI5 code at GitHub, it seems that the Fragment delegates the local ID generation to the containing view if the <Fragment/> itself does not have an explicit ID.

So your code this.getView().byId("tab1") should work as soon as you remove the id="fr1" attribute from your <Fragment/> element.

When using explicit IDs there is a static Fragment.byId method to retrieve the control. I guess you have to use it like this:

// Fragment required from "sap/ui/core/Fragment"
var fragmentId = this.getView().createId("fr1");
var tab = Fragment.byId(fragmentId, "tab1");

To make it work without explicit fragment ID and without static Fragment.byId() I used the following code snippet:

var prefix = this.getView().createId("").replace("--", "");
var fragment = sap.ui.xmlfragment(prefix, "-- XML fragment name --", this);

after this you can use this.getView().byId("tab1") as with any other control.

Tags:

Sapui5

Recent Posts