How to Access Elements from XML Fragment by ID

Question

I am working on a SAPUI5 application. I have an XML view which contains an XML Fragment and a Button to save.

The fragment contains a few controls like drop-down, text field and a table. When I press on the save button, I need to get all the rows in the table and call an OData update service.

The problem is in the onSave method in view controller. I get an error while accessing the table using its ID. Can anyone help me and advice how can I access controls used in fragments by their ID in the controller?

Here is the code snippet:

View:

<mvc:View xmlns:mvc="sap.ui.core.mvc" xmlns:core="sap.ui.core" xmlns:form="sap.ui.layout.form" xmlns="sap.m">
    <Page>
        ...
        <form:SimpleForm>
            <core:Fragment id ="fr1" fragmentName="first" type="XML" />
            <Button id="id1" press="onSave" />
        </form:SimpleForm>
    </Page>
</mvc:View>

Fragment definition:

<core:FragmentDefinition xmlns="sap.m" xmlns:core="sap.ui.core">
    <Table id="tab1" mode="MultiSelect">
        ...
    </Table>
</core:FragmentDefinition>

Controller:

sap.ui.controller("view", {
    onSave: function() {
        //var tab = this.getView().byId("tab1"); // Not working
        var tab  = sap.ui.getCore().byId("tab1"); // Not working
    },
    // ...
});

Answer 1

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

Given:

• Controller instance: this
• Fragment definition: <MyControl id="controlId" />
• View ID: "viewId"
• In Controller:
  • Fragment required from sap/ui/core/Fragment
  • Element required from sap/ui/core/Element

API to choose depending on the fragment creation

^{ℹ️ Do not attempt accessing any fragment that is unknown or defined in other projects where you have no control.}

👉this.byId("controlId");

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

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

• <!-- Recommended; in the view embedding the fragment declaratively -->
  <core:Fragment fragmentName="..." type="XML"/><!-- View ID taken by default -->

• Fragment.load({ // API since 1.58
    id: this.getView().getId(), // Recommended when using Fragment.load
    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" ^*

👉Element.getElementById("controlId") // since 1.119

^{(Formerly 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

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

• 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 with multiple - in between. 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 controls, properties, models, or other internal objects created by the SAP Fiori elements framework.
[...] 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.

Answer 2

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");

Answer 3

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.