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

    Part 28 of Advance SAPUI5: SAPUI5 Responsive Table – Contextual Width

    One of the most popular aspects of a responsive table is its automatic contextual width. Automatic contextual width refers to the way columns change from covert to popin content and…

    Accounting Entries for Inventory

    A vital component of corporate operations is inventory management, which makes sure that products are properly recorded, valued, and accounted for. In addition to showing a company’s financial health, accurate…

    Leave a Reply

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

    You Missed

    Part 28 of Advance SAPUI5: SAPUI5 Responsive Table – Contextual Width

    • By Varad
    • February 27, 2025
    • 14 views
    Part 28 of Advance SAPUI5: SAPUI5 Responsive Table – Contextual Width

    Accounting Entries for Inventory

    • By Varad
    • February 26, 2025
    • 25 views
    Accounting Entries for Inventory

    How may an existing ABAP report be converted to OOPs ABAP

    • By Varad
    • February 25, 2025
    • 34 views
    How may an existing ABAP report be converted to OOPs ABAP

    Advanced SAPUI5 – Part 26 – SAPUI5 Grid Table Sorting Feature

    • By Varad
    • February 24, 2025
    • 36 views
    Advanced SAPUI5 – Part 26 – SAPUI5 Grid Table Sorting Feature