SAPUI5 Responsive Table Data Export to CSV File (Advance SAPUI5 Part-27)

One common use case is exporting table data locally to a CSV file. I’ll walk through this functionality of the SAP M table—also known as the responsive table—in this blog post.

Data from tables exported to a CSV file

We will add a button labeled “Download” to the table’s toolbar area in order to accomplish this. View below.

This is the section of the view code to create button and display in toolbar section.

This is the view code part where buttons are created and displayed in the toolbar section.

We have an event handler named onDownload connected that will activate when the button is pressed. Now let’s define this event handler in the controller.

Event handler logic in the view’s controller

Enter the code below in the controller.

onDownload:function()
		{
			var oExport = new Export({
				// 1. file type in which data will be //exported. SAP standard provides API for
				//only CSV but own types can also be //created.
				exportType : new ExportTypeCSV({
					separatorChar : ";"
				}),
				// 2. Pass in the model bound to table
				models : this.getView().getModel(),
				// 3. binding information for the rows //aggregation
				rows : {
					path : "/Posts"
				},
				// 4. column definitions with column name //and binding info for the content
				columns : [{
					name : "Title",
					template : {
						content : "{Title}"
					}
				}, {
					name : "Category",
					template : {
						content : "{Category}"
					}
				}, {
					name : "Price",
					template : {
						content : "{Price}"
					}
				},{
					name : "Flagged",
					template : {
						content : "{Flagged}"
					}
				}
				]
			});
			// download exported file
			oExport.saveFile().catch(function(oError) {
				MessageToast.show("Error Donwloading Table Data");
			}).then(function() {
				oExport.destroy();
			});
		
		},

The explanation of event handler code

Make sure the required classes are added to your controller’s define declaration in order for the code above to function. see below

Export and ExportTypeCSV are the newly added dependencies. In our event handler we need to create an Object of Export Class. This object takes 4 aggregations namely exportType, rows, model and columns. These 4 are mentioned in the code with appropriate comments. Please go through the comments.

The saveFile method call will cause a CSV file to be downloaded to your local computer.

I hope this explanation of responsive table data export to CSV file gave you a good notion. Please leave a remark below if you have any questions, concerns, or recommendations for us. I will be pleased to reply to you.


you may be interested in this blog here:-

How to use SOQL and SOSL?

Mastering Customer 360 in Salesforce

Elevating User Experiences: Unleashing Advanced UI Elements and Custom Controls in SAPUI5

  • Related Posts

    Real Time Exchange Rate with Real Time Data Using Yahoo Finance API

    let’s dive into the Real Time Exchange Rate with Real Time Data Using Yahoo Finance API. In the prior posts Google Guide Programming interface in SAP and GPS like apparatus…

    GPS like tool in SAP using Google Map API

    In the previous article, we perceived how we can get the scope and longitude of any location utilizing Google Guide Programming interface. Adding to that learning, here, we would figure…

    Leave a Reply

    Your email address will not be published. Required fields are marked *

    You Missed

    Real Time Exchange Rate with Real Time Data Using Yahoo Finance API

    • By Varad
    • April 10, 2025
    • 11 views
    Real Time Exchange Rate with Real Time Data Using Yahoo Finance API

    GPS like tool in SAP using Google Map API

    • By Varad
    • April 9, 2025
    • 19 views
    GPS like tool in SAP using Google Map API

    Advance SAPUI5 – Integration of Google Maps JavaScript API with SAPUI5 App

    • By Varad
    • April 8, 2025
    • 20 views
    Advance SAPUI5 – Integration of Google Maps JavaScript API with SAPUI5 App

    SAP XI/PI/PO – Exposing RFC as REST API in SAP XI/PI/PO – Synchronous Interface Development End to End

    • By Varad
    • April 7, 2025
    • 33 views
    SAP XI/PI/PO – Exposing RFC as REST API in SAP XI/PI/PO – Synchronous Interface Development End to End

    How to Convert JSON Data Structure to ABAP Structure without ABAP Code or SE11?

    • By Varad
    • April 6, 2025
    • 34 views
    How to Convert JSON Data Structure to ABAP Structure without ABAP Code or SE11?

    Code Quality Control, Simplified!!

    • By Varad
    • April 5, 2025
    • 48 views
    Code Quality Control, Simplified!!