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