Cannot get a control in fragment dialog

Question

I am facing the following issue. I have a Fragment:

<core:FragmentDefinition xmlns="sap.m" xmlns:core="sap.ui.core" xmlns:layout="sap.ui.layout" >
    <Dialog title="Hints" class="sapUiPopupWithPadding" contentWidth="60%">
        <content>
            <Table id="tblHintList" mode="SingleSelect" items="{HintList>/}" growing="true" growingThreshold="10" selectionChange="onGetSelectedHints">

            </Table>
        </content>         
    </Dialog>
</core:FragmentDefinition>

In my controller I want to access the Table by its ID as follows:

var table = this.getView().byId("tblHintList");

This is not working even though I called this.getView().addDependent(Fragment) and data binding is working.

How can I access the controls defined in the Fragment?

Getting a control from a fragment depends on how you created your fragment: https://stackoverflow.com/a/47872515/5846045 — Boghyon Hoffmann, Dec 18 '17 at 17:27

matbtt · Accepted Answer · 2017-01-11T08:12:41.223

In general you have to distinguish these use cases: The fragment is part of your view or not. You are instantiating your fragment with or without an ID.

In your case the fragment is not part of the view, as it is a dialog. In this case you would obtain your table control as follows:

var table = sap.ui.getCore().byId("tblHintList");

Assuming you are using an ID "myDialog" to instantiate the fragment as follows:

var dialog = sap.ui.xmlfragment("myDialog", "my.package.HintListDialog");

then you obtain your table control as follows:

var table = sap.ui.core.Fragment.byId("myDialog", "tblHintList");

In general you should not assemble control IDs by yourself as suggested in previous answers.

Rahul Bhardwaj · Answer 2 · 2017-01-11T09:14:30.780

this.getView().byId() is not working as your fragment has not been provided with an Id of the view while instantiating. So, let us suppose I have a Fragment: HelloDialog.

<core:FragmentDefinition
   xmlns="sap.m"
   xmlns:core="sap.ui.core" >
   <Dialog>
        <content>
            <List id='myId'
            noDataText="No Products Found"
            title="Uraian"
            search="handleSearch"
            confirm="handleClose"
            close="handleClose"
            items="{
                path: 'list>/'
            }" >
                <StandardListItem
                    title="{list>Name}"
                    description="{list>ProductId}"
                    iconDensityAware="false"
                    iconInset="false"
                    type="Active" />
            </List>
        </content>
    </Dialog>
</core:FragmentDefinition>

I will instantiate it with 2 different ways ( remember the Id of the list is :myId)

Instantiate without any Id: Code:

oDialog = sap.ui.xmlfragment("testbed.HelloDialog"); oView.addDependent(oDialog);

Now, if you will check the DOM, the Id of the List will be just myId. So, to fetch Id in these casem use: sap.ui.getCore().byId('myId').

Instantiate with ID: Code:

oDialog = sap.ui.xmlfragment('fragmentId', "testbed.HelloDialog"); oView.addDependent(oDialog);

Now, if you will check the DOM, the Id of the List will be : fragmentId--myId.

Here, again you can use sap.ui.core.Fragment.byId("fragmentId", "myId");; // Thanks to matbtt

Now, what if I associated ID of view to be used with my Fragment ie :

     var oView = this.getView();
     var oDialog = oView.byId("helloDialog");
     // create dialog lazily
     if (!oDialog) {
        // create dialog via fragment factory
        oDialog = sap.ui.xmlfragment(oView.getId(), "testbed.HelloDialog");
        oView.addDependent(oDialog);
     }

Id of List in DOM: viewId--myId

Now, I can use my this.getView().byId() as this.getView().byId() simply appends the view Id and then searched for the control.

P.S: You can usethis.byId() rather than this.getView().byId() ( where this refers to the controller).

Cannot get a control in fragment dialog

2 Answers2