How to add first item as a "Select" text in dropdown when all other items are coming from Server?

[Former Member]

How to add first item as a "Select" text in dropdown when all other items are coming from Server?

[PMarti · Accepted solution]

Hi Deepak,

you can use the placeholder property.

var oDropdownBox1 = new sap.ui.commons.DropdownBox("DropdownBox1");
oDropdownBox1.setPlaceholder("Select...");

[Former Member · Accepted solution]

Hi Marti,

Thanks for your response.

my code is below

<Select placeholder="Select"

                           items="{

                            path: '/connectivityType'

                           }">                         

                           <core:Item key="{value}" text="{value}" />                     

             </Select>

but placeholder property is not working for this.

please could you suggest any other way?

[PMarti · Accepted solution]

Hi,

Select control don't have placeholder property but you can use sap.m.ComboBox instead of sap.m.Select to do that. An example in JS:

new sap.m.ComboBox ({
     placeholder: "Select..."
})

[Former Member · Accepted solution]

Thanks

If the model is attached to Select box then how do i get the selected value from Model?

[PMarti · Accepted solution]

Hi,

I show you an example in JS to retrieve the selected Item using selectionChange event:

new sap.m.ComboBox({
  placeholder : "Select...", // string
  items  : [
            oItem0 = new sap.ui.core.Item({
               key : "0",
               text : "item 0"
            }),

            oItem1 = new sap.ui.core.Item({
               key : "1",
               text : "item 1"
            }),
 ],
  selectionChange : function(evt) {
                                     var selectedKey = evt.getSource().getSelectedItem().getKey();
                                 }
  })

[former_member202245 · Accepted solution]

Hi Deepak,

I have the following solution to your 2 queries:

1. To add "Select..." item to sap.m.Select control when all other items are coming from OData service, you have to attach a Binding change event on the select control and then explicitly create a sap.ui.core.Item and add to the required select control. (Code snippet attached below)
2. You cannot get the information of the selected item directly from the odata model. You will have to create another model as JSON model and bind the selectedKey property of sap.m.Select control to this json model. So whenever user will select any item, the corresponding property of JSON model binded to selectedKey property of sap.m.Select control will get updated with the selected Item's key. (code snippet attached below)

View code snippet:

<core:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" 
  controllerName="xmlodatamodel.ListBox" xmlns:html="http://www.w3.org/1999/xhtml">
  <Page title="Title">
  <content>
  <Select id="mySelect" items="{/Categories}" selectedKey="{myModel>/selectedKey}">
  <core:Item text="{CategoryName}" key="{CategoryID}"></core:Item>
  </Select>
  <Button id="myButton" press="myButtonPress" text="Get Selected Item Key"></Button>
  </content>
  </Page>
</core:View>

Controller code snippet:

jQuery.sap.require("sap.m.MessageBox");
sap.ui.controller("xmlodatamodel.ListBox", {


  onInit: function() {
  var oSelect = this.byId('mySelect');
  //create a jsonModel to bind the selectedKey property of Select control
  var oJSModel = new sap.ui.model.json.JSONModel({});
  this.getView().setModel(oJSModel,"myModel");

  var serviceurl = "proxy/http/services.odata.org/V3/Northwind/Northwind.svc/"
  var oModel = new sap.ui.model.odata.ODataModel(serviceurl,true);
  this.getView().setModel(oModel);
  //get the reference of Select control model binding
  var oBinding = oSelect.getBinding("items");
  //attach a binding change handler to append Select... item to select control items
  oBinding.attachChange(function(){
  var oItem = new sap.ui.core.Item({text:"Select..."});
  var oSelect = this.byId('mySelect');
  oSelect.insertItem(oItem,0);
  }, this);
  },

  myButtonPress : function (oEvent) {
  var oSelect = this.byId('mySelect');
  var controlSelectedKey = oSelect.getSelectedKey();
  var oJSModel = this.getView().getModel("myModel");
  var modelSelectedKey = oJSModel.getProperty("/selectedKey");
  sap.m.MessageBox.show(
  "From Control : " + controlSelectedKey + "\n" +
  "From Model : " + modelSelectedKey, {
           icon: sap.m.MessageBox.Icon.INFORMATION,
           title: "Selected Key Values",
           actions: [sap.m.MessageBox.Action.OK]
       }
  );
  }
});

Hope this answers both your queries.

Thank you!! Happy UI5 Coding!!!

Regards,

Parag

[Former Member · Accepted solution]

Thanks Parag. Your answer is so helpful...