Hi,
I want to share my knowledge on binding the data to Select drop down in SAPUI5. We should use sap.m.select library to get a HTML select drop down menu in SAPUI5 mobile.
I will be using XML view as an example. (HelloWorldView.view.xml)
<core:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc"
xmlns="sap.m" controllerName="your_project_name.HelloWorldView"
xmlns:html="http://www.w3.org/1999/xhtml">
<Page title="HelloWorld" id="helloWorldPage">
<content>
<Select id="mySelectMenu">
</Select>
</content>
</Page>
</core:View>
Then, under the controller.js inside init method write, (HelloWorldView.controller.js)
var mModel = new sap.ui.model.json.JSONModel("model/your_data.json"); //initialise your model from a JSON file
sap.ui.getCore().setModel(mModel, "your_data_model"); //set model with a name to use later
var oItemSelectTemplate = new sap.ui.core.Item({
key : "{dkey}",
text : "{dtext}"
}); //Define the template for items, which will be inserted inside a select element
var mySelectMenu = this.byId("mySelectMenu"); //Get a reference to the UI element, Select to bind data
mySelectMenu.setModel(sap.ui.getCore().getModel("your_data_model"));// set model your_data_model to Select element
mySelectMenu.bindAggregation("items","/mRoot",oItemSelectTemplate); //bind aggregation, item to Select element with the template selected above
Your JSON model file (model/your_data.json) should look something like this
{
"mRoot" : [ {
"dkey" : "1",
"dtext" : "Male"
}, {
"dkey" : "2",
"dtext" : "Female"
} ]
}
I hope this will help many newbies out there.
Refer to this page for more details https://www.6of5.com/6of5/rest/mobile/1001/UI5/displaypage.htm?PAGE=UI5Binding
--
Regards,
Vinay
