Skip to Content

In this blog I will share the header item relationship  for Dropdown Box in a UI Table . Take an example like there are two Dropdown Boxes i.e One Header and other is Item Dropdown Box . When an header item is selected from Header part the corresponding items will be added in the Item Dropdown box.

It is easy in Normal case but a bit tricky if the Dropdown Boxes are in a UI Table , i.e When a header item is selected in any row of the UI Table then the corresponding Child Items will be added in the item Dropdown box of the same row. No other Dropdown boxes would be affected only corresponding rows will be affected.

I will explain  the above scenario with a simple example .

Scenario :    When a header item is selected in any row of the UI Table then the corresponding Child Items will be added in the item Dropdown box  of the same row only.

Below is an Array of Header-Items in a tabular format for simple understanding.

Header-Item Array :

array.PNG
Drop down boxes in UI Table

fig a.PNG

fig b.PNG

     Fig (b) : Header Items are filled in First column . I have maintained three header items as per the Array.

fig c.PNG

    Fig (c) : When  “Vegetables” is selected in the Header Part , corresponding child items are added in the same row .

fig d.PNG

fig e.PNG

     Fig (e) :  When “Fruits” is selected in the Header Part , corresponding child items are added in the same row.

fig f.PNG

     Fig ( f ) : Now  I changed the  “Fruits” to “Animals”  in the Header Part , corresponding child items are added in the same row .

Code Base  of  the example

Declaration of Array and Values


var aData = [ ];

       aData.push({"header": "Vegetables" , "item" : "Potato"});

       aData.push({"header": "Vegetables" , "item" : "Brinjal"});

       aData.push({"header": "Vegetables" , "item" : "Cabbage"});

       aData.push({"header": "Vegetables" , "item" : "Tomato"});

       aData.push({"header": "Fruits" ,     "item" : "Apple"});

       aData.push({"header": "Fruits" ,     "item" : "Orange"});

       aData.push({"header": "Animals" ,    "item" : "Lion"});

       aData.push({"header": "Animals" ,    "item" : "Tiger"});

       aData.push({"header": "Animals" ,    "item" : "Deer"});

       aData.push({"header": "Animals" ,    "item" : "Zebra"});

Creation of UI Table

 var oTable = new sap.ui.table.Table({
              title: "Header-Item example in Dropdown Box",
              visibleRowCount: 3,
              firstVisibleRow: 3,
              width: "500px",
              selectionMode: sap.ui.table.SelectionMode.Single             
                                  });                       

Adding of First column i.e. Header column into the table

       //Add first column to the UI Table
       var oColumn1 = new sap.ui.table.Column({
              label: new sap.ui.commons.Label({text: "Header"}),
              template: new sap.ui.commons.DropdownBox("header_drop",
                           {
                     tooltip: "Header Part",                                      
                     items: [
                             new sap.ui.core.ListItem({text: ""}),
                             new sap.ui.core.ListItem({text: "Vegetables"}),
                             new sap.ui.core.ListItem({text: "Fruits"}),
                                  new sap.ui.core.ListItem({text: "Animals"})    
                             ],
                  change:function(event){
                                          fill_child_items(event);
                                         }
                           })        
                                         });
oTable.addColumn(oColumn1);

Adding of Second column i.e. Item column  into the table

//Add Second column to the UI Table     
var oColumn2 = new sap.ui.table.Column({
              label: new sap.ui.commons.Label({text: "Items"}),
             template: new sap.ui.commons.DropdownBox("item_drop")               
       });
       oTable.addColumn(oColumn2);

A function for Filling Child items

function fill_child_items(event){
// Current selected value in the Header Drop down box                    
var selected_hdr = event.getParameter("newValue") ;
// Current row index
var current_rowindex = event.getParameter('id').substring(event.getParameter('id').length-1);
// ID of the item Dropdown .
var item_dropdown_id = "item_drop-col1-row"+current_rowindex;
// Removing all items from the child Drop down
sap.ui.getCore().byId(item_dropdown_id).removeAllItems();                                  
// Adding child items  to Item Dropdown
     for (var i=0 ; i< aData.length ; i++)
                    {
                              if(selected_hdr == aData[i].header)
                                         {
                                         var oItem = new sap.ui.core.ListItem();
                                         oItem.setText(aData[i].item);
                                         sap.ui.getCore().byId(item_dropdown_id).addItem(oItem);
                                         console.log(aData[i].item);
                                         }
                    }
                                                          };

Note : For every UI element added in the UI table , there is always a unique ID generated by table itself for each row .

Example : I have a “Dropdown”  in the 2nd column , given its id as “item_drop”  in design time .

Now in run time the id is automatically generated with the combination of Colum index and row index .

So for first row the ID of the Dropdown will be “item_drop-col1-row0”.

“col1” is column index for Dropdown .

“row0” is the row index for Dropdown.

Similarly for second row the id will be “item_drop-col1-row1” .

Below image describes the ID generation in the Table :fig g.PNG

To report this post you need to login first.

14 Comments

You must be Logged on to comment or reply to a post.

  1. Piyas Kumar Das

    Hi Aisurya,

    Very Usefull blog explains every minute detail.

    Do post more blogs to help developers.

    Congrats for being one of the Top Blogs in SCN.


    Happy Writing….


    Best Regards


    Piyas Kumar Das

    (0) 
  2. Christopher Solomon

    Nice write up! I had to do something similar years ago for a non-SAP client (big automobile dealer). There’s was a bit more complex, but same idea….. type of vehicle (car, truck, SUV, etc), make (BMW, Ford, Infinity, Audi, etc), and model….3 levels….it was “interesting”. haha Nice blog and keep it up!

    (0) 
  3. Konstantin Anikeev

    Thanks for Post. Very usefull.

    Just a small remark.

    Following line looks a little bit unsafe.

    1. // ID of the item Dropdown . 
    2. var item_dropdown_id = “item_drop-col1-row”+current_rowindex; 

    I mean, reference to automatic generated id. You does not control id generation algorithm, and it is possible that one time code will not work.

    (0) 
    1. Aisurya Puhan Post author

      Hello Konstantin,

      Thanks a lot . I got you , where your point is . I handled the same through model binding , and that was a concrete method.

      Thanks,

      Aisurya

      (0) 
  4. Dennis Seah

    I am liking everything that are posted/created here in this group. Regarding this blog, I would imagine that data will be in this format so that we do not need to repeat the header.

    [
      {
        "header": "Vegetables",
        "items" : [
          {item: "Potato"},
          {item: "Brinjal"},
          {item: "Cabbage"},
          {item: "Tomato"}
        ]
      },
      {
        "header": "Fruits",
        "items" : [
          {item: "Apple"},
          {item: "Orange"}
        ]
      },
      {
        "header": "Animals" ,
        "items" : [
          {item: "Lion"},
          {item: "Tiger"},
          {item: "Deer"},
          {item: "Zebra"}
        ]
      }
    ]
    

    And with binding of table and dropdown list, we are simply the code alot.

    var tbl = new sap.ui.table.Table();
    tbl.addColumn(new sap.ui.table.Column({
      label: new sap.ui.commons.Label({text: "Header"}),
      template: new sap.ui.commons.TextView({text: "{header}"})
    }));
    var dbox = new sap.ui.commons.DropdownBox();
    dbox.bindItems('items',
                   new sap.ui.core.ListItem({text: '{item}'})
                  );
    tbl.addColumn(new sap.ui.table.Column({
      label: new sap.ui.commons.Label({text: "Items"}),
      template: dbox
    }));
    
    var model = new sap.ui.model.json.JSONModel();
    model.setData(aData);
    tbl.bindRows('/');
    tbl.setModel(model)
    

    Here is where I tested this out. IMO, the element IDs in the DOM that are created by the control should be something that we need not to know or deal with in “normal situation”. Of course, there are rare occasions where we need to deal with them.

    Thanks for sharing how nested controls are layout.

    -D

    (0) 
    1. Vishnu Mohan Sharma

      Hi i want to bind Enable property  in table column Button.

      I have  13 visible row count if i have less than 13 rows than all thing are working fine because of setting enable property via id btnChange-col1-row1

      While i have more than 13 row action not performing well like button column is only working correctly for initial 13 row while i scroll button column get freezee. i tried  every possible thing could you please help me on that

      (0) 

Leave a Reply