Unable to add Items to select in SAP UI5

[former_member313918]

Hi Folks,

I have created a sapui5 application in which i need to generate select items dynamically.

I am fetching sub-departments by using department in function import.

 f {bAllowTextSelection: true, mEventRegistry: Object, sId: "__xmlview1--ab", mProperties: d, mAggregations: Object…}
View1.controller.js?eval:37 Object {__metadata: Object, results: Array[5]}
View1.controller.js?eval:49 HR-Others
View1.controller.js?eval:49 HR-Payroll
View1.controller.js?eval:49 HR-Recruitment
View1.controller.js?eval:49 HR
View1.controller.js?eval:49 Academy

As you can see my function import is working successfully, for 'HR' department am getting corresponding sub-departments.

Now what i have done in my view for sub-departments -

<Label text="Select Sub-Department" required="true" />

     <Select width="60%" id="ab"></Select>

And here is my controller -

   var odata1 =
   {
   'Department':selected_dep
   };
    var select_sub = this.getView().byId("ab");
    console.log(select_sub);
  oModel.callFunction('/SubDpByDp',"GET",odata1,null,function(oData,response)
   {
   console.log(oData);
   MessageToast.show("success");
   for(var set of oData.results)
  {
var item = new sap.ui.core.Item();
   item.text= set.SUBDEPARTMENT;
   console.log(item.text);
 select_sub.addItem(item);
   }
    },function(err){
   MessageToast.show("faliure");
     },false
     );

But still select is populating nothing.

Kindly suggest.

Regards,

Ankit

[Former Member · Accepted solution]

Hi Ankit,
Try this code .

View code :

<Page title="{i18n>title}">
<content>
<Label text="Dynamic Select"/>
<Select items="{/Department}" id="dynamicBind" >
<items>
<core:Item text="{dep}"   />                
</items>
</Select>
</content>
</Page>
</pages>

Controller Code :

onInit:function(){
var OData = {
"Department":[{
"dep":"A"
},

{
"dep":"B"
},
{
"dep":"C"
}

]
};
var oModel = new JSONModel(OData);
//get Id of the Select Control and SetMOdel 
//you can also create name model and binding aggregation with this named model.
//var selectid= this.getView().byId("dynamicBind").setModel(oModel,"mymodelname");
var selectid= this.getView().byId("dynamicBind").setModel(oModel);

}

Regards,
Abul

[vedaradhya]

Hi Ankit,

I have just tried to modify your controller and view code.

Just try with below modified code.

Controller :

     var aFilter = [new sap.ui.model.Filter("Department", sap.ui.model.FilterOperator.EQ, selected_dep)];
     console.log(select_sub);

     var select_sub = this.getView().byId("ab");
     var that = this;
     oModel.read("/SubDpByDp",{ filters:aFilter,
                         	success:function(oData){
	    		                 var oJSONModel = new sap.ui.model.json.JSONModel({items : oData.results});
	    		                     select_sub.setModel("data",oJSONModel);
	    	                        },
	    	                error:function(){
	    		                 MessageToast.show("failure");
	    	                       }
                              }
                 );

view:

<Label text="Select Sub-Department" required="true" />
<ComboBox id="ab" items="{data>/items}" width="60%">
      <core:Item text="{data>SUBDEPARTMENT}" />
 </ComboBox>

[former_member313918]

Thanks a lot sir

[karthikarjun]

Well, I recommend you to use binding concepts. SAP Combobox/Dropdown class contains binding features to fetch hierarchy data from ODATA model and display the same as what we need.

For ex: I have an array i.e

-var Array = {dept: [{name: "ECE",exp: "4"},{name: "EEE",exp: "5"}]};

-Append this array on JSON model

-Bind JSON model to combobox/dropdown

-use on select event to get Hierarchy data and display the same on other fields.

Regards,

Karthik A

[former_member313918]

Hi Karthik,

As you understood maybe, i want to populate the list after selecting department from drop down.

As per your suggestion i did following things in controller -

This i called under change event of department
  oModel.callFunction('/SubDpByDp',"GET",odata1,null,function(oData,response)
   {
   console.log(oData);
MessageToast.show("success");
var data = {"items":[]};
 for(var set of oData.results)
  {
   data.items.push({ "SUBDEPARTMENT" : set.SUBDEPARTMENT});
   }

select_sub.setModel(data);
},function(err){
MessageToast.show("faliure");
     },false
     );

And in view -

<Label text="Select Sub-Department" required="true" />
                <ComboBox id="ab" items="{data>/items}" width="60%">
                    <core:Item text="{items>SUBDEPARTMENT}" />
  </ComboBox>

But still after selecting department nothing is coming in sub department drop down box.

Thanks for your suggestion.

Please guide further, as am not experienced in UI5.

With regards,

Ankit

[former_member313918]

Thanks Karthik for your valuable replies.

[junwu]

in case you don't know binding

https://sapui5.hana.ondemand.com/#docs/guide/97830de2d7314e93b5c1ee3878a17be9.html

[former_member313918]

Thanks Jun for your valuable replies.

[junwu]

usually we don't create item and add them to the list

you do it via aggregation binding. you just supply the data. the item will be generated

[former_member313918]

Hi Jun,

But as you can see i need to create list dynamically based on the values am getting from function import.

And i am retrieving correctly, but how to bind them to list now.

Please suggest.

Thanks and Regards,

Ankit

[junwu]

put data in model.

do you know binding?