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

Dynamic Table - containing sap.m.Select - bind data

Hi,

I have a dynamic table I am building using JS. One of the columns is based on the sap.m.Select object.

For this column I am able to bind it to a JSON array to define the available options. The issue I have is how to bind the sap.m.Select to the overall table binding, so that I can get the chosen option.

The JSON array is defined as

var trafficLights = {
    "options": [
        {
            "Key": "",
            "Value": "Please Select..."
        },
    {
            "Key": "Red",
            "Value": "Red"
        }    
    ]};

Below is the code to define the sap.m.Select column

var selectField=new sap.m.Select(id);
var oModel = new sap.ui.model.json.JSONModel();
oModel.setData(trafficLights.options);
selectField.setModel(oModel);
var itemTemplate = new sap.ui.core.ListItem();
itemTemplate.bindProperty('key', 'Key');
itemTemplate.bindProperty('text', 'Value');
selectField.bindItems('/', itemTemplate);

I then add this object to the table via

var oColumn = new sap.ui.table.Column({
    label: new sap.ui.commons.Label({
         text: jsonObject.tableDefinition[i].columnHeader,                                }),                                
    template: selectField,                            
});

Initially the table is empty, so upon adding a new row, I "push" a JSON object to an array and then bind that array to the table, thus adding a blank row to the table.

Upon clicking an accept button, I need to get the content of the table back into my JSON object. I use the following to get the table content: -

sap.ui.getCore().byId("dynamicDataTable").getModel().getData()

This the result does not contain what drop down value was chosen.

Thanks

Martin

Add a comment
10|10000 characters needed characters exceeded

Assigned Tags

Related questions

3 Answers

  • Best Answer
    Posted on Dec 07, 2015 at 10:57 AM

    sap.ui.getCore().byId("dynamicDataTable").getModel().getData() - This is where you can use the table selection and you should make sure that you follow 'Select' class model.

    Will this help? JS Bin - Collaborative JavaScript Debugging

    Regards,

    Karthik A



    Add a comment
    10|10000 characters needed characters exceeded

  • Posted on Dec 07, 2015 at 11:18 AM

    Hi Martin,

    Will this sample help? Plunker

    Also, please don't mix up mobile and desktop controls. I see you are using sap.m.select, instead you can use sap.ui.commons.DropdownBox

    API - JsDoc Report - SAP UI development Toolkit for HTML5 - API Reference - sap.ui.commons.DropdownBox

    Regards,

    Sai Vellanki.

    Add a comment
    10|10000 characters needed characters exceeded

    • Former Member

      Hi Sai,

      Thanks for the example. I have tried to replicate as much as your logic as I can. I am able to get the dropdown onto the dynamic column. However, I cannot choose an option. It always shows the "Please Select..." option.

      I now have the following code defined

      var oItemTemplate = new sap.ui.core.ListItem({
          text: "{Value}",
                key: "{Key}"
      });                                
      
      var selectField= new sap.ui.commons.DropdownBox().bindProperty("value", columnName).bindItems("/", oItemTemplate);
      
      var oModel = new sap.ui.model.json.JSONModel();
      
      oModel.setData(trafficLights.options);                
      
      selectField.setModel(oModel);
      
      
      
      
      
      

      I suspect this is because I am setting the model against the selectField variable. If I define how you specified it in the example, then I do not get anything in the dropdown box.

         var model = new sap.ui.model.json.JSONModel(); 
         model.setData(trafficLights.options); 
         
      sap.ui.getCore().setModel(model);

      So the issue I am having now may be more related to not understanding how binding works.

      This UI5 application has many other controls so it is not just this dynamic table that I am dealing with within the app.

      Amy further help is much appreciated.

      Thanks

      Martin

  • Posted on Dec 07, 2015 at 08:32 PM

    Please mark this Discussion with a Correct Answer (closes, but does not lock the Discussion) where appropriate. Seehttp://scn.sap.com/community/support/blog/2013/04/03/how-to-close-a-discussion-and-why Even if you discovered the solution without any outside contributions, it helps others to understand what the solution turned out to be.

    Do not use Assumed Answered as it confuses anyone looking for the specific answer. If you dig into the Getting Started link (top right of each SCN page), you are only instructed to mark Helpful or Correct Answers to Discussion responses.

    Regards,

    Sakthivel

    Add a comment
    10|10000 characters needed characters exceeded

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.