Skip to Content
Technical Articles
Author's profile photo Louis-Arnaud BOUQUIN

Fiori Element List Report – Adjust column size automatically

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.

 

 

 

 

Assigned Tags

      11 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Sai Battula
      Sai Battula

      Thank you,

      It works, but after click on setting button, either cancel or ok, the columns are back to original.

      How do we achieve auto width after settling buttons click.

       

      Sai.

      Author's profile photo Louis-Arnaud BOUQUIN
      Louis-Arnaud BOUQUIN
      Blog Post Author

      Hello,

      In my case, when I change the settings, the data is refreshed so the columns are optimized again.

      Author's profile photo Tim Müller
      Tim Müller

      Hey Louis-Arnaud,

       

      does it also work with an AnalyticalTable? Nothing happens in my App.

       

      regards

      Author's profile photo Louis-Arnaud BOUQUIN
      Louis-Arnaud BOUQUIN
      Blog Post Author

      Hello Tim,

      I didn't try with Analytical table, I guess that you need to change this line to get the right objet :

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

      Maybe it is as simple as changing GridTable by AnalyticalTable. Or you may need some debugging to undestand what need to be changed.

       

      Author's profile photo Tim Müller
      Tim Müller

      I wish it would be working with changing the line. But not.

       

      "TypeError: Cannot read property 'attachBusyStateChanged' of undefined"

      This is the error in the console.

       

      Author's profile photo Louis-Arnaud BOUQUIN
      Louis-Arnaud BOUQUIN
      Blog Post Author

      You need to find the id of the Analytical table to get the object with this.byId().

      Author's profile photo Tim Müller
      Tim Müller

      Hey,

      thanks, it works very good in my Analytical List Page with analytical table.

      var oContentTable = this.byId(this._sIdPrefix + "analyticalTable");

      please note that the initial letter must be written in lower case. I had always written "AnalyticalTable".

      regards

      Author's profile photo Tejas Chouhan
      Tejas Chouhan

      Another way of doing this is from SAP Visual Editor. I normally use this to freeze my column widths for Analytical or Grid Table. Go to Visual editor in your UI5 project, Select edit mode, Select column and manually enter the width based on the character length. Generally measured in 'em'

      In this case, the Auto is ignored and manual entry is considered always.

      Author's profile photo Carlos Ximenes
      Carlos Ximenes

      I also do kind of the the same way, but instead of you, I set the width property to auto and the Min Width to 100 pixels or whatever is needed for the specific column.

      That way on larger screens it always gets the entire table and on smaller screens you can always see the information of that column.

      Author's profile photo Joemil Aganan
      Joemil Aganan

      If you don't want to do extensions, and there are not so much columns just go and create a new default layout... adjust the columns to your liking... and transport.  Choose all 3 options.

       

       

      Author's profile photo TulasiPrasad Karnam
      TulasiPrasad Karnam

      Where can we see the sap documentation for sap.ui.table.extesnions.pointer?