Technology Blogs by Members
Explore a vibrant mix of technical expertise, industry insights, and tech buzz in member blogs covering SAP products, technology, and events. Get in the mix!
cancel
Showing results for 
Search instead for 
Did you mean: 
Louis-Arnaud
Participant
16,944
You may know that ALV columns width can be adjusted automatically depending on the content size :


This is a cool feature that is unfortunately not available in List Report Fiori Element. There is an option that is activated by default but the behavior is different : SAPUI5 Documentation

The column width is defined according to element theorical length, not the actual length of the content (please note that I'm focusing on List Report in Gridtable mode (not reponsive table).

Edit 22/09/2020 : See Tim comment below, it also works with analytical table, you juste have to get the id of "analyticalTable" instead of "GridTable".

See example below :

 


 

To reproduce ALV behavior, you will have to implement an extension to your fiori element.

1. Declare the controller extension in the manifest.json


		"extends": {
"extensions": {
"sap.ui.controllerExtensions": {
"sap.suite.ui.generic.template.ListReport.view.ListReport": {
"controllerName": "<your_namespace>.<your_app_name>.ext.controller.ListReportExt"
}
}
}
},

2. Add the controller file to your app




3. Add the code below to your controller


sap.ui.controller("<your_namespace>.<your_app_name>.ext.controller.ListReportExt", {

onInit: function (oEvent) {

if (!this._sIdPrefix) {
this._sIdPrefix =
"<your_namespace>.<your_app_name>::sap.suite.ui.generic.template.ListReport.view.ListReport::<ENTITY_NAME>--";
}

},

onAfterRendering: function (oEvent) {

var oContentTable = this.byId(this._sIdPrefix + "GridTable");
oContentTable.attachBusyStateChanged(this._onBusyStateChanged);

},

_onBusyStateChanged: function (oEvent) {

var bBusy = oEvent.getParameter("busy");
if (!bBusy && !this._bColumnOptimizationDone) {
var oTable = oEvent.getSource();
var oTpc = null;
if (sap.ui.table.TablePointerExtension) {
oTpc = new sap.ui.table.TablePointerExtension(oTable);
} else {
oTpc = new sap.ui.table.extensions.Pointer(oTable);
}
var aColumns = oTable.getColumns();
for (var i = aColumns.length; i >= 0; i--) {
oTpc.doAutoResizeColumn(i);
}
//This line can be commented if you want the columns to be adjusted on every scroll
//this._bColumnOptimizationDone = true;
}

}

});

This post helped me : Stackoverflow

4. And voilà !


 


 

If someone knows a way to do this without extension please let me know in the comment section.

 

EDIT : sap.ui.TablePointerExtension is not available in the newest version of SAPUI5. I adjusted the code to make it work in old and new versions.

 

 

 

 
13 Comments
Labels in this area