Skip to Content
0

How to merge two column header cells in SAP Fiori 2.0 table?

Mar 13 at 04:59 AM

68

avatar image
Former Member

Hi Everyone,

I want to design the table for form with column headers like below.

Can we merge the cells like above in SAP Fiori 2.0?

Please help me to solve this issue

Thanks, Cheers,

Viran

header.jpg (13.9 kB)
10 |10000 characters needed characters left characters exceeded
* Please Login or Register to Answer, Follow or Comment.

1 Answer

avatar image
Former Member Mar 13 at 09:02 AM
0

Hii

Use below code, it will work

Code:

sap.ui.jsview("views.salesTrendTable", {/** Specifies the Controller belonging to this View.*In the case that it isnotimplemented,or that "null" is returned, this View does not have a Controller.*@memberOf views.salesTable
          */
          getControllerName :function(){returnnull;},/**Is initially called once after the Controller has been instantiated. It is the place where the UI is constructed.* Since the Controller is given to this method, its event handlers can be attached right away.*@memberOf views.salesTable
          */
          createContent :function(oController){
        	  var oLayout =newsap.ui.commons.layout.MatrixLayout({width:"100%"});
 
        	  var oModel =newsap.ui.model.json.JSONModel();
        	  oModel.loadData("services/SalesTrend.xsjs?mthkey=201604");      
 
        	  var oControl;
        	  this.oSHTable =newsap.ui.table.Table("soTable1",{
        		  visibleRowCount:10,});//TableColumn Definitions
        	  oControl =newsap.ui.commons.TextView().bindProperty("text","month_no");
        	  oControl.setTextAlign("End");
        	  this.oSHTable.addColumn(newsap.ui.table.Column({
        		  label:newsap.ui.commons.Label({text:"MONTH_NO"}),
        	  template: oControl, flexible: true,hAlign:sap.ui.commons.layout.HAlign.End}));
 
        	  oControl =newsap.ui.commons.TextView().bindProperty("text", "month_name");//oControl.setTextAlign("End");
        	  this.oSHTable.addColumn(newsap.ui.table.Column({label:newsap.ui.commons.Label({text:"MONTH_NAME"}),
        	  template: oControl }));
   
        	  oControl =newsap.ui.commons.TextView().bindProperty("text","sales_ytd");
        	  oControl.setTextAlign("End");
        	  this.oSHTable.addColumn(newsap.ui.table.Column({
        		  multiLabels:[newsap.ui.commons.Label({text:"SALES"}),newsap.ui.commons.Label({text:"YTD"})],//label:newsap.ui.commons.Label({text:"YTD SALES"}),
        	  template: oControl, hAlign:sap.ui.commons.layout.HAlign.End}));
   
        	  oControl =newsap.ui.commons.TextView().bindProperty("text","sales_lytd");
        	  oControl.setTextAlign("End");
        	  this.oSHTable.addColumn(newsap.ui.table.Column({
        		  multiLabels:[newsap.ui.commons.Label({text:"SALES"}),newsap.ui.commons.Label({text:"LY YTD"})],//label:newsap.ui.commons.Label({text:"LYTD SALES"}),
        	  template: oControl, hAlign:sap.ui.commons.layout.HAlign.End}));
 
        	  this.oSHTable.setModel(oModel);
        	  this.oSHTable.bindRows("/");
 
        	  this.oSHTable.setTitle("Sales Trend");
        	  oLayout.createRow(this.oSHTable);return oLayout;}});
Share
10 |10000 characters needed characters left characters exceeded