Skip to Content
0

Bind Items from JSON to Select Box Dynamically

Aug 24, 2017 at 04:58 AM

44

avatar image
Former Member

I want to bind data received from json to my select box based on the value selected in the previous select box. I have the below code:

Controller:

sap.ui.controller("firstsapui5project.FirstView", {
onInit: function(evt) {
var oModel =  new sap.ui.model.json.JSONModel("/XMII/Illuminator?QueryTemplate=Library_management/QueryTemplates/SEL_CATEGORY_NAMES&Content-Type=text/json");
this.getView().setModel(oModel);
  },
handleStaffSelect : function(oEvent)
{
var i1 = oEvent.getParameter("selectedItem").getKey();
var oModel2 =  new sap.ui.model.json.JSONModel("/XMII/Illuminator?Transaction=Library_management/Transactions/SEL_BOOK_NAMES&b_cat=" + i1 + "&OutputParameter=op&Content-Type=text/json");
this.getView().setModel(oModel2);
var oGender = this.byId("selGender");
var oTemplate = new sap.ui.core.ListItem({ key : "{B_NAME}", text : "{B_NAME}"})
oGender.bindAggregation("items","/Rowsets/Rowset/0/Row", oTemplate);
}

});

View:

<core:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core" xmlns="sap.m" controllerName="firstsapui5project.FirstView" xmlns:html="http://www.w3.org/1999/xhtml">
<Page title="Issue">
<content>
<Select id="selStaff" items="{/Rowsets/Rowset/0/Row}" change="handleStaffSelect">
            <core:ListItem key="{B_CATEGORY}" text="{B_CATEGORY}" />
</Select>
<Select id="selGender"/>
</content>
</Page>
</core:View>

I am successfully binding data from oModel to first select box - selStaff.

Based on what's selected in this select box (stored in variable i1), I want to get values from a URL (by passing i1 in the URL) and show them in the second select box - selGender

I Googled a bit and found some code, but unable to get anything working. Any help would be appreciated.

10 |10000 characters needed characters left characters exceeded
* Please Login or Register to Answer, Follow or Comment.

2 Answers

Sharath M G Aug 24, 2017 at 06:07 AM
0

You have done most things right.

If you are getting the data and now able to get the selected value, you just need to trigger the service.

$.ajax("service URL"..... look up the ajax call of oData service(if you are not using the models in manifest.json.

Show 2 Share
10 |10000 characters needed characters left characters exceeded
Former Member

Hi,

I am now able to get data in the second select field based on the value selected in the first select field.

As soon as I select something in the first select field, the values appear in the second field, but the values present in the first field disappear. When I select a value in the second select field, it's values disappear.

What could be done to solve it?

0

Avoid setting the model 2 to the view. this.getView().setModel(oModel2); - Removes old model and adds the new model

Set the model to the control or else try to set the model to view using an ID. this.getView().setModel(oModel2,"<an ID>")

1
avatar image
Former Member
Aug 24, 2017 at 07:27 AM
0

Hi Saksham

hope this help. http://jsbin.com/peregiz/2/edit?html,js,output

Thanks

-D

Share
10 |10000 characters needed characters left characters exceeded