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

    Advanced SAPUI5 – 21: Custom Button Control with Drag and Drop

    UI5 offers a wide range of interactive features to deliver a fantastic user experience. The Drag and Drop design pattern was added to SAPUI5 version 1.56 in order to create…

    Part 25 of “Advanced SAPUI5: Working with GRID Table in SAPUI5”

    A responsive table should only show up to 100 records. However, grid tables are designed to present large amounts of data.Mobile, tablet, and desktop/laptop rendering are all supported via responsive…

    Leave a Reply

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

    You Missed

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

    • By Varad
    • January 31, 2025
    • 13 views
    SAPUI5 Responsive Table Data Export to CSV File (Advance SAPUI5 Part-27)

    Advanced SAPUI5 – 21: Custom Button Control with Drag and Drop

    • By Varad
    • January 30, 2025
    • 31 views
    Advanced SAPUI5 – 21: Custom Button Control with Drag and Drop

    Part 25 of “Advanced SAPUI5: Working with GRID Table in SAPUI5”

    • By Varad
    • January 29, 2025
    • 35 views
    Part 25 of “Advanced SAPUI5: Working with GRID Table in SAPUI5”

    UI5 Tooling: Create UI5 Applications with Your Favorite Editor – 1

    • By Varad
    • January 28, 2025
    • 41 views
    UI5 Tooling: Create UI5 Applications with Your Favorite Editor – 1

    Part 31 of Advance SAPUI5: Using VizFrame Charts in SAPUI5

    • By Varad
    • January 27, 2025
    • 45 views
    Part 31 of Advance SAPUI5: Using VizFrame Charts in SAPUI5

    Part 1 of Advance SAPUI5 Part 32: Using SAPUI5 Controls | Icon Tab Bar

    • By Varad
    • January 26, 2025
    • 33 views
    Part 1 of Advance SAPUI5 Part 32: Using SAPUI5 Controls | Icon Tab Bar