Skip to Content data binding (SAP Fiori Select dropdown with data binding)


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



You must be Logged on to comment or reply to a post.
  • Hallo,

    i just get a “blue screen” while executing it with mock data…

    Then, under the controller.js inside init method write, (HelloWorldView.controller.js)

    like this:

    onInit: function() {


                var mModel = new sap.ui.model.json.JSONModel(“model/month.json”); //initialise your model from a JSON file 

                sap.ui.getCore().setModel(mModel, “lol”); //set model with a name to use later 

                var oItemSelectTemplate = new sap.ui.core.Item({ 



    i just can pick any name?

  • Hi Vinay,

    The demo you pasted here can’t work.


    This line is with error.