Dynamically create UI5 table

[saurabh_vakil]

Hi Experts,

I am having 2 table UIs in my HTML5 page. Both these tables have just 1 column each.

The purpose is to allow the user to select any row in table 1 then select a row in table 2, and show the 2 selections in a third table with 2 columns with the 2 selected values.

For eg., If first table has 1 column having values like below

Header 1
Value1
Value2
Value3

and second table has a column having values like

Header 2
Num1
Num2
Num3

then suppose user selects Value2 from first table and Num3 from second table, I want to create a third table and show the values in 2 columns like below and keep adding rows to the below table whenever user selects a combination of values from both above tables:

Header 1	Header 2
Value2	Num3

Can anyone please guide me how I can achieve dynamically adding rows to a table?

Regards,

Saurabh

[saurabh_vakil · Accepted solution]

Hi,

I am attaching the code that I have written so far.

Also below is my screen design:

User first selects a value in Legacy Table table, then selects a value in the SAP Fields table.

On selection of second value, I am writing code to create a third table and put these 2 selected values in a single row with 2 columns, but the output appears as below:

First value is coming in the first column and first row, however the second value is coming in the second column's second row instead of first row.

Also I want to keep adding rows to this table as the user continues selecting values in the above 2 tables, which I would not be able to achieve using the attached code.

Can anyone please point me out in the right direction how to do this?

Regards,

Saurabh

table_code.txt.zip

[former_member104694 · Accepted solution]

Hi Saurabh,

If you want to use the model approach then you will need to merge the existing data in the model with the new data...you could try something like this inside your rowSelectChange event handler:

                                 var rows = [{header3: tab1FieldName, header4: tab2FieldName}];
                                        currentData = oModel3.getData();
                                        if(currentData.modelData){
                                                  rows = currentData.modelData.concat(rows);
                                        } 
                                        oModel3.setData({modelData: rows});

Creating the model (oModel3), setting the model to the table (oTable3) and binding table rows, and placing the table could all probably be done outside of the event handler as it only needs to happen once.

Hope this helps.

Cheers,

Ian

[jibin_joy · Accepted solution]

Hi Saurabh,

    based on my knowledge  ..

     Get the Context for the selected row .Get the value  and set this value  to any element such as text field using 

setValue(sValue) : sap.ui.commons.TextField .or directly bind the context to the element using setBindingContext method  for that corresponding property

- Add this element to the cell

- cell to row using getCells() : sap.ui.core.Control[]

- row to the table addRow(oRow) : sap.ui.table.Table

Regards,

Jibin Joy

[saurabh_vakil · Accepted solution]

Hi Ian,

Thank you so much, this works like a charm!!! I am able to append the rows to my table without any problems using this approach.

Thanks once again.

Regards,

Saurabh

[Former Member · Accepted solution]

Hey Vakil ,

Can you Put your code after you corrected the error you had 😕 it might be helpful, since me too have the same problem.

Insert the full code or From the    oTable2.attachRowSelectionChange(function(oEvent)

Since i could not correct the Mistake which you have...

After putting the below code and binding i cant understand

                         var rows = [{header3: tab1FieldName, header4: tab2FieldName}]; 

                                        currentData = oModel3.getData(); 

                                        if(currentData.modelData){ 

                                                  rows = currentData.modelData.concat(rows); 

                                       }  

                                        oModel3.setData({modelData: rows}); 

[Former Member · Accepted solution]

I Tried this Code But not working    

var rows = [{header3: tab1FieldName, header4: tab2FieldName}];

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

            currentData = oModel3.getData(); 

            if(currentData.modelData)

            { 

                      rows = currentData.modelData.concat(rows); 

            }

           oModel3.setData({modelData: rows});

  oTable3.bindRows("/modelData");

  oTable3.placeAt("uiArea1");

  });

[former_member27 · Accepted solution]

I can't change this answer to a comment so left it as is.

[Former Member]

This is not working frnd

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

  var rows = [{header1: tab1FieldName},{header2: tab2FieldName},

             {header3: tab3FieldName},{header4: tab4FieldName},

             {header5: tab5FieldName},{header6: tab6FieldName},

             {header7: tab7FieldName},{header8: tab8FieldName},

             {header9: tab9FieldName}];

            currentData = oModel3.getData();

            if(currentData.modelData){

                      rows = currentData.modelData.concat(rows);

            }

  oModel3.setData({modelData: rows});

  oTable3.setModel(oModel3);

  oTable3.bindRows("/modelData");

  oTable3.placeAt("dataTable");

  });

Their is same problem even after putting this Code