How to get a Control byId from a SAPUI5 Fragment

Question

I have a dialog which is in a Fragment. So after entering the details into it and clicking the submit button, the text which was filled into the input should be displayed as a MessageToast. But I am getting the error : ' Cannot read property 'getValue' of undefined '.

Below is the code :

    onAddMovie: function() {
        var view = this.getView();
        var createDialog = view.byId("CreateDialog");
        var oDummyController = {
            // This is when I clicked the Submit button in dialog
            submitDialog: function() {
            var user = sap.ui.core.Fragment.byId("createDialog", "movie_name").getValue();
                MessageToast.show(user);
                createDialog.close();
            },
            closeDialog: function() {
                createDialog.close();
            }
        };

        if (!createDialog) {
            createDialog = sap.ui.xmlfragment(view.getId(), "Admin.view.Dialog", oDummyController);
        }
        view.addDependent(createDialog);
        createDialog.open();
        if (!createDialog.isOpen()) {
            //do sth
        }
    },

Above is the function in which the dialog is getting displayed and after pressing submit button , the text in the input should be displayed in a MessageToast.

XML :

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

        <Dialog id="createDialog" title="Input Movie Details" width="100%" class="sapuiMediumMargin" confirm="handleClose" close="handleClose">
            <l:VerticalLayout class="sapUiContentPadding" width="100%">
            <l:content>
                <Input width="100%" placeholder="Movie Name" id="movie_name"/>
                <HBox alignItems="Center" renderType="Bare">
                    <Label text="Year of Release" width="50%"/>
                    <ActionSelect selectedItem="Element sap.ui.core.ListItem#__item0" selectedKey="item1" class="sapUiLargeMarginBegin" selectedItemId="__item0" id="__select0" width="50%">
                        <items>
                            <core:ListItem text="2017" key="item1" id="__item0"/>
                            <core:ListItem text="2016" key="item2" id="__item1"/>
                            <core:ListItem text="2015" key="item3" id="__item2"/></items>
                    </ActionSelect>
                </HBox>
                <HBox alignItems="Center" renderType="Bare">
                    <Label text="Date of Screening" width="50%"/>
                    <DatePicker class="sapUiLargeMarginBegin" width="50%" id="__picker0"/>
                </HBox>
                <HBox alignItems="Center">
                    <Label text="Movie Rating"/>
                    <RadioButtonGroup width="100%" columns="3" selectedIndex="-1" id="__group0">
                        <buttons>
                            <RadioButton selected="true" groupName="__group0" text="Universal" id="__button0"/>
                            <RadioButton groupName="__group0" text="Adult" id="__button1"/>
                            <RadioButton groupName="__group0" text="U/A" id="__button2"/></buttons>
                    </RadioButtonGroup>
                </HBox>
                        <HBox alignItems="Center" width="100%" renderType="Bare">
                    <Label text="Enable Booking" width="70%"/>
                <CheckBox id="__box0" width="30%" textDirection="LTR"/>
            </HBox>
                <FlexBox alignItems="End" alignContent="Center" justifyContent="End" class="sapUiTinyMarginTop">


                    <SegmentedButton selectedButton="__button3" id="__button21">
                            <buttons>
                                <Button text="Submit" id="__submit" press="submitDialog"/>
                                <Button text="Cancel" id="__button41" press="closeDialog"/></buttons>
                        </SegmentedButton>
                            </FlexBox>
                </l:content>
            </l:VerticalLayout>
        </Dialog>

    </core:FragmentDefinition>

Getting the control from the fragment depends on how you created the fragment: https://stackoverflow.com/a/47872515/5846045 In your case, calling `this.byId("movie_name")` returns the control. — Boghyon Hoffmann, Dec 18 '17 at 17:09

score 2 · Accepted Answer · answered Nov 16 '17 at 09:57

Since you are creating the dialog with the views id

sap.ui.xmlfragment(view.getId(), "Admin.view.Dialog", oDummyController);

all control ids in that fragment will be prefixed with the views id (this.getView().getId(), e.g. __xmlview1).

That has the big advantage that all fragment controls are accessible via this.getView().getId() and therefore really 'feel' like they were part of the view and can be treated as such (esp. useful when using fragments to structure view code).

That is why you need to use

this.getView().byId("movie_name");

Which will end up querying for a control with an id like __xmlview1--movie_name (-- is used as separator by SAPUI5).

General Behaviour of byId methods

Generally speaking the byId methods behave like this:

this.getView().byId(sId) === sap.ui.getCore().byId(sViewId + '--' + sId));
sViewId + '--' + sId === this.getView().createId(sId)
sap.ui.core.Fragment.byId(sFragmentId, sId) === sap.ui.getCore().byId(sFragmentId + '--' + sId));

HINT

Be aware of potential ID conflicts between the controls of your view(s) and your fragment(s)!

score 1 · Answer 2 · answered Nov 16 '17 at 08:30

Fragment

<core:FragmentDefinition xmlns="sap.m" xmlns:core="sap.ui.core" xmlns:l="sap.ui.layout">
<Dialog id="createDialog" title="Input Movie Details" width="100%" class="sapuiMediumMargin" confirm="handleClose" close="handleClose">
    <l:VerticalLayout class="sapUiContentPadding" width="100%">
        <l:content>
            <Input width="100%" placeholder="Movie Name" id="movie_name"/>
            <HBox alignItems="Center" renderType="Bare">
                <Label text="Year of Release" width="50%"/>
                <ActionSelect selectedKey="item1" class="sapUiLargeMarginBegin" id="select0" width="50%">
                    <items>
                        <core:ListItem text="2017" key="item1" id="item0"/>
                        <core:ListItem text="2016" key="item2" id="item1"/>
                        <core:ListItem text="2015" key="item3" id="item2"/></items>
                </ActionSelect>
            </HBox>
            <HBox alignItems="Center" renderType="Bare">
                <Label text="Date of Screening" width="50%"/>
                <DatePicker class="sapUiLargeMarginBegin" width="50%" id="picker0"/>
            </HBox>
            <HBox alignItems="Center">
                <Label text="Movie Rating"/>
                <RadioButtonGroup width="100%" columns="3" selectedIndex="-1" id="group0">
                    <buttons>
                        <RadioButton selected="true" groupName="group0" text="Universal" id="button0"/>
                        <RadioButton groupName="group0" text="Adult" id="button1"/>
                        <RadioButton groupName="group0" text="U/A" id="button2"/></buttons>
                </RadioButtonGroup>
            </HBox>
            <HBox alignItems="Center" width="100%" renderType="Bare">
                <Label text="Enable Booking" width="70%"/>
                <CheckBox id="box0" width="30%" textDirection="LTR"/>
            </HBox>
            <FlexBox alignItems="End" alignContent="Center" justifyContent="End" class="sapUiTinyMarginTop">
                <SegmentedButton id="button21">
                    <buttons>
                        <Button text="Submit" id="submit" press="submitDialog"/>
                        <Button text="Cancel" id="button41" press="closeDialog"/></buttons>
                </SegmentedButton>
            </FlexBox>
        </l:content>
    </l:VerticalLayout>
</Dialog>

Controller
sap.ui.define([
    "sap/ui/core/mvc/Controller"
], function(Controller) {
    "use strict";
return Controller.extend("test001test001.controller.View1", {
    _oNewProcessDialog:null,
    onAddMovie: function() {
    this._getNewProcessDialog().open();
    },
    submitDialog:function(){

    sap.m.MessageToast.show(sap.ui.getCore().byId("movie_name").getValue());
    },
    closeDialog: function() {
            this._getNewProcessDialog().close();
        },

        _getNewProcessDialog: function() {
        // create dialog lazily
        if (!this._oNewProcessDialog) {
            // create dialog via fragment factory
            this._oNewProcessDialog = sap.ui.xmlfragment("test001test001.view.CreateDialog", this);
            // connect dialog to view (models, lifecycle)
            this.getView().addDependent(this._oNewProcessDialog);
            jQuery.sap.syncStyleClass("sapUiSizeCompact", this.getView(), this._oNewProcessDialog);
        }
        return this._oNewProcessDialog;
    },
});

});

Wiew

<Button press="onAddMovie"></Button>

score 1 · Answer 3 · answered Nov 16 '17 at 09:36

Instead of using :

 var view = this.getView();
var user = sap.ui.core.Fragment.byId("createDialog", "movie_name").getValue();

I used :

 var view = this.getView();
 var user = view.byId("movie_name").getValue();
                MessageToast.show(user);

And it worked !!

How to get a Control byId from a SAPUI5 Fragment

3 Answers3