Exporting data to Excel in SAPUI5/SAP Fiori; Exporting filtered Data to Excel in SAPUI5/SAP Fiori

SAPUI5 is a JavaScript framework developed by SAP for building responsive and mobile-friendly web applications. It is based on the Model-View-Controller (MVC) architecture and supports data binding, templating, and modularization. 

SAPUI5 provides a rich set of user interface controls and libraries that allow developers to create feature-rich, cross-platform applications that can run on desktops, tablets, and smartphones. It also integrates with other SAP technologies, such as SAP HANA, SAP Fiori, and SAP Gateway, to provide seamless access to enterprise data and services. 

Exporting data to Excel is a common requirement in enterprise applications. In SAP UI5, it is straightforward to export data to Excel, but it can be a bit tricky when you want to export only the filtered data. In this blog post, I will explain how to export filtered data in a table to Excel using the sap.ui.export library. 

Exporting filtered Data to Excel ;

For this first, we’ll write a function to get the filtered data from a table.

                                                      Figure 1.1-Function to capture the filtered data

The function in the image 1.1 is used to capture the filtering that has been performed in the corresponding table. Here,

• The ‘table’ variable will retrieve a control with the given ID “wiListItemId” that is defined in the current view or component.

• The variable ‘filteredRows’ will contain an array of filtered contexts. This is achieved by using the following properties.

• .filterInfo: This property of the binding instance refers to an object that contains information about the filters applied to the binding.
• .aFilteredContexts: This property of the filter information object is an array of the filtered rows, where each item in the array is a binding context for a single row.

The first ‘for’ loop in the function plays a vital role in extracting the filtered data

• In order to get the contents only from the table. We’ll retrieve the path of each item in the ‘filteredRows’. In which the 3^rd layer will only contain the contents in the table.
• Now, the object of the content are only pushed into a new variable named ‘filterData’.
• A new temporary variable is initialized with the filtered data assigned in to it, this is done to not get the other variable overwritten.
• Measures are also done to handle date values which may be present in the table. A simple formatter is also used for the same and is as described in the below image

• The filtered and manipulated data ready to be exported are set to a new model named “filterModel”.
• Along with the model, table controls, table name and path its used to call a basic function used to export data to excel.

Figure 1.2 – Function used to export manipulated data to excel

• The first loop in the function shown in fig 1.2 is used to get the column titles of each column in the table used for exporting.
• Following are some of the terms used later on in the function and its purposes.

• • exportType: An object of type “ExportTypeCSV”, which specifies the format of the exported data as a CSV file.
  • models: The data model that provides the data to be exported. This is specified using the getModel() method of the view object (this.getView().getModel(model)).
  • rows: The path to the data that needs to be exported. This is specified using a string value for the “path” property. The data to be exported is read from this path in the data model.
  • columns: The configuration for the columns in the CSV file. This is specified using an array of objects, where each object represents a column and contains properties like “name”, “template”, “sortProperty”, etc.

• The Export object can be used to trigger the actual export of data by calling its saveFile() method. This will prompt the user to download the CSV file containing the exported data.
• The later on code lines in figure 1.2 are used to save a file using the specified name and then destroys the export object. Here’s what’s happening in the code:
• saveFile(name): This function saves the data in the export object to a file with the given name.
• catch(function(oError) {sap.m.MessageBox.error(oError);}): This code handles any errors that may occur during the file saving process. If there is an error, it displays an error message using the MessageBox
• then(function() {oExport.destroy();}): This code executes after the file is saved successfully. It destroys the export object, freeing up memory resources.
• Overall, this code exports data to a file and then cleans up the resources used in the process.

Figure 2.1- A table after filtering

Figure 2.2 – Data after exporting to excel using the explained function

So to finally conclude, exporting data from a filtered table using SAP UI5 can be a time-saving and efficient way to analyse data in a more organized manner. By applying filters to tables, users can easily narrow down their search criteria and obtain specific data sets that are relevant to their needs. With the ability to export these filtered tables into various file formats, such as Excel or CSV, users can share their findings with others or further analyse the data outside of the SAP UI5 platform. This process not only streamlines data analysis but also enhances collaboration among team members. With the right tools and knowledge, exporting filtered tables in SAP UI5 can be a simple and effective process.

#sapui5excel #sapfioriexcel #ExportingfilteredDatatoExcelSAPUI5 #travanleo #sapui5