ARTICLE TABLE OF CONTENTS
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--controlIDTo make this.byId work, it would need to look like:
componentID---viewID--controlIDIf 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--fragmentIDWith sap.ui.core.Fragment.byId() you use the fragment ID in combination with the control’s ID to get the control:
componentID---viewID--fragmentID--controlIDSo 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:
controIDThen 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--controlIDThen 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--controlIDThen you get a control from the fragment like this:
// in your controller
...
this.byId("text-1");
...
