Skip to Content
avatar image
Former Member

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

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)
Add comment
10|10000 characters needed characters exceeded

  • Get RSS Feed

1 Answer

  • Mar 13 at 09:02 AM

    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;}});
    Add comment
    10|10000 characters needed characters exceeded