Question Re: Dynamically create UI5 table in Technology Q&A

Dynamically create UI5 table

saurabh_vakil — Mon, 29 Apr 2013 10:49:51 GMT

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

Re: Dynamically create UI5 table

saurabh_vakil — Mon, 29 Apr 2013 11:58:39 GMT

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

Re: Dynamically create UI5 table

former_member104694 — Mon, 29 Apr 2013 14:12:18 GMT

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

Re: Dynamically create UI5 table

jibin_joy — Mon, 29 Apr 2013 15:42:20 GMT

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

Re: Dynamically create UI5 table

saurabh_vakil — Tue, 30 Apr 2013 05:30:11 GMT

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

Re: Dynamically create UI5 table

Former Member — Fri, 20 Dec 2013 13:02:29 GMT

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});

Re: Dynamically create UI5 table

Former Member — Mon, 23 Dec 2013 11:25:18 GMT

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

});

Re: Dynamically create UI5 table

Former Member — Tue, 24 Dec 2013 05:34:17 GMT

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

Re: Dynamically create UI5 table

former_member27 — Wed, 25 Jan 2023 12:18:07 GMT

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