Technology Blogs by SAP
Learn how to extend and personalize SAP applications. Follow the SAP technology blog for insights into SAP BTP, ABAP, SAP Analytics Cloud, SAP HANA, and more.
Showing results for 
Search instead for 
Did you mean: 
Former Member


I want to share my knowledge on binding the data to Select drop down in SAPUI5. We should use 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"
<Page title="HelloWorld" id="helloWorldPage">
  <Select id="mySelectMenu">

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