Skip to Content
author's profile photo Former Member
Former Member

ComboBox Data Binding with XML

Hello,

I want to use in my view xml and bind a ComboBox to a Model. The problem is, I dont know how because there is too less documantion for it.

<core:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc"
  xmlns="sap.m" controllerName="zui5_report_xml.Master" xmlns:form="sap.ui.layout.form"
  xmlns:html="http://www.w3.org/1999/xhtml">
  <App>


  <Page title="Example" >
  <form:SimpleForm>
  <Label text="Auto" />
  <ComboBox text="/items">
  <items>
  <core:Item key="{key}" text="{text}"/>
  </items>
  </ComboBox>
  </App>
</core:View>
var oModel = new sap.ui.model.json.JSONModel();
  var mData = {
  "items": [
  {
  "key": "DZ",
  "text": "Algeria"
  },
  {
  "key": "AR",
  "text": "Argentina"
  },
  {
  "key": "AU",
  "text": "Australia"
  }
]};
oModel.setData(mData);
  this.getView().setModel(oModel);

I know, that is a simple problem but I need help for it...

Add a comment
10|10000 characters needed characters exceeded

Assigned Tags

Related questions

7 Answers

  • Posted on Feb 02, 2015 at 03:24 AM

    Hi Hans,

    You have to bind the model to your ComboBox Items Aggregation. Please check line #8 for the change.

    1. <core:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc"
    2. xmlns="sap.m" controllerName="zui5_report_xml.Master" xmlns:form="sap.ui.layout.form"
    3. xmlns:html="http://www.w3.org/1999/xhtml">
    4. <App>
    5. <Page title="Example" >
    6. <form:SimpleForm>
    7. <Label text="Auto" />
    8. <ComboBox items="{/items}">
    9. <items>
    10. <core:Item key="{key}" text="{text}"/>
    11. </items>
    12. </ComboBox>
    13. </App>
    14. </core:View>

    Regards,

    Sai Vellanki.

    Add a comment
    10|10000 characters needed characters exceeded

  • author's profile photo Former Member
    Former Member
    Posted on Feb 04, 2015 at 09:08 PM

    Hi

    check the controls in xml -> SAPUI5 Explored


    regards

    Add a comment
    10|10000 characters needed characters exceeded

  • author's profile photo Former Member
    Former Member
    Posted on Feb 02, 2015 at 08:02 AM

    Hi Sai, ooh maaan... but why??? I mean the API dont document any property "items"(the attribute between the brackets "items"). There is only an aggregation "items", not an attribute. https://openui5.hana.ondemand.com/#docs/api/symbols/sap.m.ComboBoxBase.html#constructor Thanks.

    Add a comment
    10|10000 characters needed characters exceeded

    • Hi Hans, I believe the API has documented it correctly, but maybe your understanding is a bit different 😉 But let me explain:

      You mentioned

      property "items"(the attribute between the brackets "items")

      but that is not a property of your ComboBox. It is a property of your model.

      In other words, you are binding your model property "/items" to a ComboBox aggregation named "items"

      I think the misunderstanding comes since both the control's aggregation and the model's property are named 'items'. You could have named your model property 'myData' and your JSON model would then look like this:

      "myData": [

      {

      "key": "DZ",

      "text": "Algeria"

      },

      {

      "key": "AR",

      "text": "Argentina"

      },

      {

      "key": "AU",

      "text": "Australia"

      }

      ]

      and your ComboBox would then be set up as follows:

      <ComboBox items="{/myData}">

      <items>

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

      </items>

      </ComboBox>

  • author's profile photo Former Member
    Former Member
    Posted on Feb 02, 2015 at 09:59 AM

    Hi Robin,

    no of course I know the root element of the Json is "/items". According to the API documentation, you have only the possiblity to aggregate the ComboBox Object with the element "items":

    OpenUI5 SDK - Demo Kit

    The supported settings are:

    Properties

    maxWidth : sap.ui.core.CSSSize (default: 100%)

    Aggregations

    items : sap.ui.core.Item[]

    like this:

    <ComboBox>

    <items>

    </items>

    </ComboBox>

    There is no Property/Attribute "items"

    <ComboBox items="/myData">


    Thanks.

    Add a comment
    10|10000 characters needed characters exceeded

    • Former Member Former Member

      Hi Bharath ,

      if your duplicate data has different unique keys in oData request than you will see duplicate values even you attach odata key to key of combo box


      either you need to delete the duplicate entries from your data before binding to control in javascript as odata doesnt have any distinct property as sql select .

      or from the backend only you can select unique values and than send it in service on front end

      thanks

      Viplove

  • author's profile photo Former Member
    Former Member
    Posted on Feb 02, 2015 at 10:34 AM

    Hi Robin,

    oh okay, yeah you have to know that 🤣.

    Thank you for explaining 😊

    Add a comment
    10|10000 characters needed characters exceeded

  • Posted on Feb 05, 2015 at 05:58 PM

    view:

    <mvc:View
    height="100%"
    xmlns:core="sap.ui.core"
    xmlns:mvc="sap.ui.core.mvc"
    xmlns="sap.m">
    <Page showHeader="false">
    <content>
    <ComboBox
    items="{
    path: '/ProductCollection',
    sorter: { path: 'Name' }
    }">
    <core:Item key="{ProductId}" text="{Name}" />
    </ComboBox>
    </content>
    </Page>

    </mvc:View>


    controller:


    onInit: function () {

    // set explored app's demo model on this sample
    var oModel = new sap.ui.model.json.JSONModel("test-resources/sap/ui/demokit/explored/products.json");
    this.getView().setModel(oModel);
    }


    Source:

    https://sapui5.netweaver.ondemand.com/sdk/explored.html#/sample/sap.m.sample.ComboBox/code


    Add a comment
    10|10000 characters needed characters exceeded

  • Posted on Sep 08, 2016 at 07:14 AM

    Hi Hans,

    I'd written the code of xml view and JSON model(in controller).

    Hope it will help you.

    View:

    <core:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m"

    controllerName="dropdown1.Page" xmlns:html="http://www.w3.org/1999/xhtml">

    <Page title="ComboBox">

    <content>

    <ComboBox items="{/items}">

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

    </ComboBox>

    </content>

    </Page>

    </core:View>

    Controller:

    sap.ui.controller("dropdown1.Page", {

    onInit: function() {

    var oModel = new sap.ui.model.json.JSONModel();

    oModel.setData({

    items : [

    {key: "DZ", text: "Algeria"},

    {key: "AR", text: "Argentina"},

    {key: "AU", text: "Australia"}

    ]

    });

    this.getView().setModel(oModel);

    }

    });

    No changes are made in index.html file.

    I'd attached the output image.


    output2.PNG (8.1 kB)
    Add a comment
    10|10000 characters needed characters exceeded

    • A small correction to the code above, else it would not work.

      View:

      <core:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m"

      controllerName="dropdown1.Page" xmlns:html="http://www.w3.org/1999/xhtml">

      <Page title="ComboBox">

      <content>

      <ComboBox items="{/items}">

      <Items>

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

      </Items>

      </ComboBox>

      </content>

      </Page>

      </core:View>

      Controller:

      sap.ui.controller("dropdown1.Page", {

      onInit: function() {

      var oModel = new sap.ui.model.json.JSONModel();

      oModel.setData({

      items : [

      {key: "DZ", text: "Algeria"},

      {key: "AR", text: "Argentina"},

      {key: "AU", text: "Australia"}

      ]

      });

      this.getView().setModel(oModel);

      }

      });

Before answering

You should only submit an answer when you are proposing a solution to the poster's problem. If you want the poster to clarify the question or provide more information, please leave a comment instead, requesting additional details. When answering, please include specifics, such as step-by-step instructions, context for the solution, and links to useful resources. Also, please make sure that you answer complies with our Rules of Engagement.
You must be Logged in to submit an answer.

Up to 10 attachments (including images) can be used with a maximum of 1.0 MB each and 10.5 MB total.