The author's tutorial introduces how to register the Extension fragment in the manifest.json of the SAP Fiori Elements application, so as to add to the Table area of the List Report application 自定义列:
Please note the extension highlighted in the image below:ResponsiveTableColumnsExtension|SEPMRA_C_PD_Product
At runtime, the definition of this extension Component._getManifestEntryis parsed in the method:
In SAP Fiori Elements, manifest.jsonfiles are used to define the configuration and metadata of the application. extendsAreas are used to maintain extensions for SAP Fiori Elements applications. Among them, ResponsiveTableColumnsExtensionis a specific extension, which is mainly used to extend the columns of the responsive table.
In responsive tables, you can use ResponsiveTableColumnsExtensionto add, delete or modify columns. This feature provides runtime adjustments to table columns, allowing you to dynamically change column attributes when the application is running, such as column visibility, column sorting, and column filtering.
Let's say you have a Fiori Elements app for sales orders, a responsive table showing a list of orders with many columns like order number, customer name, order date, etc. If you want to change the visibility of the order date column at runtime, you can ResponsiveTableColumnsExtensiondo it with .
Here is a simple example showing how to manifest.jsonuse ResponsiveTableColumnsExtensionthe extension in a file:
{
"sap.ui5": {
"extends": {
"extensions": {
"sap.ui.controllerExtensions": {
"sap.suite.ui.generic.template.ListReport.view.ListReport": {
"ControllerName": "my.custom.Controller",
"controllerExtensions": {
"sap.suite.ui.generic.template.ListReport.control.ListReportController": {
"methods": {
"onInit": {
"code": "this.extensionAPI.attachPageDataLoaded(function(oEvent) { this.extensionAPI.getColumnExtension().forEach(function (oColumnExtension) { if (oColumnExtension.getColumn().getId() === 'SalesOrderDate') { oColumnExtension.setColumnVisible(false); } }); }.bind(this));"
}
}
}
}
}
}
}
}
}
}
The sample code above hides the order date column after the sales order list is loaded. First, we define a new controller sap.ui.controllerExtensionsunder my.custom.Controller. Then, in the controller's onInitmethod, we use extensionAPI.attachPageDataLoadedthe method to listen for page data loading events. After the data is loaded, we extensionAPI.getColumnExtensionget all the column extensions through the method, then traverse each column extension, find the column extension with the id of , and make it invisible SalesOrderDateby calling its method.setColumnVisible
It should be noted that although ResponsiveTableColumnsExtensionprovides a powerful column expansion function, excessive use may increase the complexity and maintenance costs of the application. Therefore, you need to carefully consider whether you really need to dynamically adjust the column when using it.