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

To report this post you need to login first.

2 Comments

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

  1. Vi Ious

    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({ 

    and

    “your_data_model”

    i just can pick any name?

    (0) 
  2. Robin Sun

    Hi Vinay,

    The demo you pasted here can’t work.

    mySelectMenu.setModel(sap.ui.getCore().getModel(“your_data_model”));

    This line is with error.

    Regards,

    Xuebin

    (0) 

Leave a Reply