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>
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)!