sap.m.select data binding (SAP Fiori Select dropdown with data binding)

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