SAPUI5: How to Get a Control by Its ID From an XML Fragment?

🏷️

This is how to get a control from a fragment in a controller in SAPUI5.

How you access controls in a fragment depends on how you created it.

So if you want to learn how to get a control from a fragment, then you’re in the right place.

Let’s dive right in!

Getting a Control by Its ID From a Fragment in SAPUI5

First, you need to differentiate whether you created the XML fragment via an XML view or controller.

Let’s start with an XML view:

Getting a Control by its ID from a Fragment created in an XML View

For example, the requirement is to get a text from a fragment on a button click.

Actually, it’s simple—but there’s a problem: SAPUI5’s internal ID generations.

Here’s an XML view with the embedded XML fragment and button:

<!-- in your XML view -->

...

<core:Fragment 
  id="fragment-1"
  fragmentName="fragment1"
  type="XML">
</core>

<Button
  press="onPress"
  text="Get text control!">
</Button>

...

This is the XML fragment definition:

<!-- in your XML fragment -->

<core:FragmentDefinition
  xmlns="sap.m"
  xmlns:core="sap.ui.core">

  <Text
    id="text-1"
    text="I'm a text."
  </Text>

</core:FragmentDefinition>

Plus the view’s controller:

// in your controller
...

onPress: function() {
  
  var oText = {};

  oText = this.byId("text-1");

  sap.base.Log.info(oText); // returns undefined

}

...

this.byId(“text-1”) doesn’t work. It returns undefined. This is because the fragment has an id property:

<!-- in your XML view -->
...

<core:Fragment 
  id="fragment-1"  <!-- here is the fragment id -->
  fragmentName="fragment1"
  type="XML">
</core>

<Button
  press="onPress"
  text="Get text control!">
</Button>

...

Sounds weird but ’s how it is. ¯\_(ツ)_/¯

this.byId(“text1”) doesn’t work because if you give the fragment an ID separately, the fragment gets prefixed not only with the view ID of the fragment’s view, but also with the fragment’s ID. As well as the control.

SAPUI5 prefixes every control in the following manner: componentID > viewID > Control1ID > Control2ID > ControlernID.

So when you give a fragment an ID, the fragment’s control ID looks like this:

componentID---viewID--fragmentID--controlID

To make this.byId work, it would need to look like:

componentID---viewID--controlID

If you leave out the fragment’s id property you get this, so it works.

Long story short: if the fragment doesn’t have an id property then this.byId(“text1”) works:

<!-- in your XML view -->
...

<core:Fragment
  fragmentName="fragmentName1"
  type="XML"> 
</core>

...
// in your controller
...

onPress: function() {
  
  var oText = {};

  oText = this.byId("text-1").getText();

  sap.base.Log.info(oText); // returns the text control object

}

...

Additionally, there is also an option to get controls from a fragment even if it has an id property. If you need an id property for your fragment then it is possible to get a control from the fragment by generating the fragment’s ID with this.getView().createId() and the method sap.ui.core.Fragment.byId():

// in your controller
...

onPress: function() {
  
  var sFragmentId = this.getView().createId("fragment-1");
  var sControlId = "text-1";

  var oText = sap.ui.core.Fragment.byId(sFragmentId, sControlId);


  sap.base.Log.info(oText); // returns the text control object

}

...

With this.getView().createId(), you get the right ID for the fragment:

componentID---viewID--fragmentID

With sap.ui.core.Fragment.byId() you use the fragment ID in combination with the control’s ID to get the control:

componentID---viewID--fragmentID--controlID

So now you know.

Getting a Control by its ID from a Fragment created in a Controller

The same thing happens when you instantiate the fragment in a controller instead of an XML view.

However, when you instantiate a fragment in a controller, there are several ways to get a control from it. It depends on how you created the fragment.

This is your fragment definition:

<!-- in your XML fragment -->

<core:FragmentDefinition
  xmlns="sap.m"
  xmlns:core="sap.ui.core">

  <Dialog>

    <Text
      id="text-1"
      text="I'm a text."
    </Text>

  </Dialog>

</core:FragmentDefinition>

You Created a Fragment Without an ID

You created a fragment without an ID:

// in your controller
... 

openDialog: function() {

  if (!this._oDialog) {

    // here you create the fragment without an ID
    this._oDialog = sap.ui.core.Fragment.load({

      name: "bar.foo.view.MyDialog"

    }).then(function(oDialog) {

      oView.addDependent(oDialog);
      return oDialog;

    });
  }

  this._oDialog.then(function(oDialog) {

    oDialog.open();

  });

}

...

Your control’s ID looks like this:

controID

Then you get a control from the fragment like this:

// in your controller
... 

sap.ui.getCore().byId("text-1");

...

You Created a Fragment With an ID

You created a fragment without an ID:

// in your controller
... 

openDialog: function() {

  if (!this._oDialog) {

    // here you create the fragment with an ID
    this._oDialog = sap.ui.core.Fragment.load({

      
      id: "fragment-1",
      name: "bar.foo.view.MyDialog"

    }).then(function(oDialog) {

      oView.addDependent(oDialog);
      return oDialog;

    });
  }

  this._oDialog.then(function(oDialog) {

    oDialog.open();

  });

}

...

Your control’s ID looks like this:

fragmentID--controlID

Then you get a control from the fragment like this:

// in your controller
... 

var sFragmentId = this.getView().createId("fragment-1");
var sControlId = "text-1";

var oText = sap.ui.core.Fragment.byId(sFragmentId, sControlId);

...

You Created a Fragment With the View ID

You created a fragment without an ID:

// in your controller
... 

openDialog: function() {

  if (!this._oDialog) {

    // here you create the fragment with the view ID
    this._oDialog = sap.ui.core.Fragment.load({

      
      id: this.getView().getId(),
      name: "bar.foo.view.MyDialog"

    }).then(function(oDialog) {

      oView.addDependent(oDialog);
      return oDialog;

    });
  }

  this._oDialog.then(function(oDialog) {

    oDialog.open();

  });

}

...

Your control’s ID looks like this:

componentID---viewID--controlID

Then you get a control from the fragment like this:

// in your controller
... 

this.byId("text-1");

...

🔥 The Complete SAP ERP Modules Overview Infographic in PDF Format (Free)

Plus, don't miss future infographics and free SAP tips and insights that are available only to newsletter subscribers. 

📚 More Articles

Leave a Comment

Your email address will not be published. Required fields are marked *

Fill out this field
Fill out this field
Please enter a valid email address.
You need to agree with the terms to proceed

Menu

altwork_picture_2

The Altwork Station redefines how people interact with their computers by allowing the computer screen and keyboard to physically conform to support the user’s body while working long hours on a computer.

Submission received, thank you!

Close Window