Skip to Content
Technical Articles
Author's profile photo Mio Yasutake

4 ways to get controls inside a Fragment

Introduction

 

Fragments are small pieces of UI and used inside a view or to create a dialog.

Sometimes you want to get controls inside a fragment. However, it is not as straightforward as it seems to be.

In this blog, I’d like to show you how to access controls inside a fragment. But before that, let’s look at how control IDs inside a fragment are generated.

 

How control IDs are generated inside a Fragment

In XML Views, controls IDs are automatically prefixed with view’s ID. For fragments, on the other hand, controls are not prefixed by default.

 

Below cases apply when the fragment is instantiated in the controller code.

  • If the fragment is not given an ID, control IDs are used “as is”.

  • If the fragment is given an ID, control IDs are prefixed with the fragment’s ID.

 

Below cases apply when the fragment is declared inside a XML view like below.

<Page id="page">
    <content>         
        <core:Fragment fragmentName="demo.fragmentSample.fragment.Form" type="XML" />
    </content>
</Page>
  • If the fragment is not given an ID, control IDs are prefixed with the view’s ID.

  • If the fragment is given an ID, control IDs are prefixed with the view’s ID + fragment’s ID.

 

How to get controls inside a Fragment

How you can get controls inside a fragment varies depending on the pattern of control ID.

As we saw in the above section, the pattern is determined by:

  1. Whether the fragment is embedded into a view
  2. Whether the fragment is given an ID

Now, let’s look at 4 different ways of getting controls.

 

Case 1: Fragment is NOT embedded into a View and NOT given an ID

Fragment is not embedded into a view if it is instantiated dynamically in the controller like below.

onShowDialog: function () {
    if (!this._oDialog) {
        Fragment.load({
            name: "demo.fragmentSample.fragment.Dialog",
            controller: this
        }).then(function(oDialog) {
            this._oDialog = oDialog;
            this.getView().addDependent(oDialog);
            this._oDialog.open();
        }.bind(this));
    }else {
        this._oDialog.open();
    }
}

Controls inside this fragment aren’t assigned any prefix.

In this case, you can retrieve controls by the following way.

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

 

Case 2: Fragment is NOT embedded in a View and given an ID

You can give an ID to a fragment when you load it.

Fragment.load({
    name: "demo.fragmentSample.fragment.Table",
    controller: this,
    id: "tableFragment" 
})

Controls inside this fragment are only assigned fragment id as prefix.

You can retrieve controls by the following way. sap.ui.core.Fragment.byId returns a control inside a fragment with the given ID. (API Reference)

sap.ui.core.Fragment.byId("fragmentId", "controlId")

 

Case 3: Fragment is embedded into a View and not given an ID

Fragment is embedded into a view if it is part of the static view declaration.

<Page id="page">
    <content>         
        <core:Fragment fragmentName="demo.fragmentSample.fragment.Form" type="XML" />
    </content>
</Page>

Controls inside this fragment are prefixed with view’s ID. This is the same as controls which are directly placed in a view.

In this most simple case, you can retrieve controls just as you retrieve controls inside a view.

this.byId("controlId")

 

Case 4: Fragment is embedded into a View and given an ID

You can give an ID to a fragment inside view declaration.

<core:Fragment id="formFragment" fragmentName="demo.fragmentSample.fragment.Form" type="XML" />

Controls inside this fragment are assigned id prefixed with view’s ID and fragment’s ID.

For this reason, you first get the ID for the control with sap.ui.core.Fragment.createId and then get the control by the view’s ‘byId’ method. (API Reference)

this.byId(sap.ui.core.Fragment.createId("fragmentId", "controlId"))

 

Conclusion

Controls inside a fragment are assigned different kinds of IDs depending on how the fragment have been instantiated.

For this reason, you need to use different methods for getting those controls.

I hope you find this information useful!

 

References

Assigned Tags

      3 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Murali Kothapalli
      Murali Kothapalli

      This is a super useful blog, with variety of options. I was facing a another challenge of getting a control out of a nested Fragment. This is how I did . May be useful to someone in future.

      — from Main.view.xml

      <core:Fragment xmlns:core=”sap.ui.core” fragmentName=”zff.resreq.view.MaterialListContent” type=”XML” id=”MaterialListContent”/>

      — from MaterialListContent.fragment.xml

      <core:Fragment xmlns:core=”sap.ui.core” id=”MaterialFilterBar” fragmentName=”zff.resreq.view.MaterialFilterBar” type=”XML” />
      <f:GridList id=”gridList” headerText=”Materials” mode=”SingleSelectMaster” items=”{RESREQDropdownModel>/MATERIAL-items}” class=”sapUiResponsiveContentPadding”>

      from MaterialFilterBar.fragment.xml

      <Bar id=”headerBar”>
      <contentMiddle>
      <Input width=”90%” id=”inputSearch” fieldWidth=”100%” submit=”onSearch” maxLength=”100″ placeholder=”Search” filterSuggests=”false”
      required=”true” showTableSuggestionValueHelp=”false” showValueStateMessage=”false”/>

      — in Main.controller.js

      var inputSearch = this.byId(sap.ui.core.Fragment.createId(“MaterialListContent–MaterialFilterBar”, “inputSearch”));
      var oQuery = inputSearch.getValue();

       

      Just make fragment list by —  (two dashes) as separator and specify as the fragment name.

      This will do the trick.

      Murali

       

      Author's profile photo Mio Yasutake
      Mio Yasutake
      Blog Post Author

      Hi Murali,

      Thanks for your comment and sharing your experience!

       

      Author's profile photo Taylor Riley
      Taylor Riley

      Thank you for this blog! I thought defining IDs on embedded fragments would actually make accessing the controls easier, but after reading "case 3" I decided to remove the IDs and it made accessing the controls much easier.