Want to show header values as Row and Row values as column in SAP UI5 Like Transpose

[former_member505084]

My Question is about : I am doing dynamic table and getting the result but i want to show in different way like Transpose. because I am having N numbers of column values and only 5 row values. So I want to show my table as Vertical way means like Transpose (column value should show as Row and Row value as Column)

var columnData = [{ columnName: "Attr1" }, { columnName: "Attr2" }, { columnName: "Attr3" }, { columnName: "Attr4" }, { columnName: "Attr5" }, { columnName: "Attr6" }, { columnName: "Attr7" }, { columnName: "Attr8" }, { columnName: "Attr9" }, { columnName: "Attr10" }, { columnName: "Attr11" }];

var rowData = [{ Attr1: "Mat1", Attr2: "Product1", Attr3: "Reason1", Attr4: "Global1", Attr5: "India", Attr6: "Brand1", Attr7: "Size-L", Attr8: "Falv1", Attr9: "Mat1", Attr10: "Cat1", Attr11: "UOM1" }, { Attr1: "Mat2", Attr2: "Product2", Attr3: "Reason2", Attr4: "Global2", Attr5: "UK", Attr6: "Brand2", Attr7: "Size-M", Attr8: "Falv2", Attr9: "Mat2", Attr10: "Cat2", Attr11: "UOM2" }, { Attr1: "Mat3", Attr2: "Product3", Attr3: "Reason3", Attr4: "Global3", Attr5: "US", Attr6: "Brand3", Attr7: "Size-XL", Attr8: "Falv3", Attr9: "Mat3", Attr10: "Cat3", Attr11: "UOM3" }];

This is my actual Result what I am getting:

Expected Result what i want:

Thanks & Regards

Preeti

[former_member505084 · Accepted solution]

Hello Everyone,

I got the Solution for Transpose Table. Here it is the code:

//*********View Code*************//

<Table items="{ path: 'DT>/rowData2', factory: '.productListFactory' }" columns="{DT>/colData2}" mode="SingleSelectMaster" select="handleGLItemPress">

<columns>

<Column width="12em"></Column>

</columns>

</Table>

//***************Controller Code*****************//

onInit :function(){

var data={};

var colData=[

{ colName:"Attr1" },

{ colName:"Attr2" },

{ colName:"Attr3" }]

var rowData=[

{ Attr1:"Mat1", Attr2:"Mat2", Attr3:"MAt3" },

{ Attr1:"Mat11", Attr2:"Mat22", Attr3:"MAt33" }]

data.colData2=[];

data.colData2.push({ colName:"" })

data.rowData2=[];

for(var i=0;i<rowData.length;i++)

{

data.colData2.push({ colName:"" })

}

for(var i in colData){

var cName, obj={};

for(var j=0; j<rowData.length;j++)

{

cName=colData[i]["colName"];

obj[cName+j]=rowData[j][cName];

}

obj["colName"]=cName;

data.rowData2.push(obj);

}

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

this.getView().setModel(oModel,"DT");

},

productListFactory : function(sId, oContext) {

var oUIControl=[];

var sObj=oContext.getObject();

oUIControl.push(new sap.m.Label({ text:sObj.colName }));

for(var i in sObj){

if(i == "colName")

{

continue;

}

oUIControl.push(new sap.m.Label({ text:sObj[i] }));

}

return new sap.m.ColumnListItem({ cells:oUIControl });

},

[former_member513245]

Hey I am stuck with similar requirement.....need to transpose a column . Could you please help.me with some guidance

[former_member627579]

I guess what you are looking for is a form like in this example:

https://sapui5.hana.ondemand.com/#/entity/sap.ui.layout.form.Form/sample/sap.ui.layout.sample.Form35...