Skip to Content

Bind Items from JSON to Select Box Dynamically

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.

Add comment
10|10000 characters needed characters exceeded

  • Get RSS Feed

2 Answers

  • Aug 24, 2017 at 06:07 AM

    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.

    Add comment
    10|10000 characters needed characters exceeded

    • 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>")

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

    Hi Saksham

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

    Thanks

    -D

    Add comment
    10|10000 characters needed characters exceeded