Import Data from Excel into SAP Fiori Table using SheetJS

July 9, 2026
Kishore Thutaram
UI5 & Fiori
0

Introduction

Uploading Excel files into SAP Fiori applications is a common requirement in many business processes. Organizations often receive large volumes of business data in Excel format, such as customer information, pricing details, material masters, or planning data. Instead of manually entering this information into SAP, users expect a quick and efficient way to upload Excel files directly through the Fiori application.

SAP UI5 does not provide built-in functionality for reading Excel files. To overcome this limitation, developers commonly use the SheetJS (XLSX) library, which allows Excel files to be parsed and converted into JSON objects that can easily be displayed or processed within SAP UI5.

In this article, you’ll learn how to upload an Excel file, read its contents using the SheetJS library, map the data to a JSON model, and display it inside a SAP Fiori table with a practical step-by-step implementation.

Business Scenario

A manufacturing company maintains pricing agreements for thousands of customers every month. Business users receive updated pricing information from regional teams in Excel format and need to upload it into a custom SAP Fiori application for further validation and processing.

Initially, users entered the data manually, which was time-consuming and often resulted in typing errors. As the volume of records increased, manual entry became impractical and affected overall productivity.

To streamline the process, the business requested an Excel upload feature that allows users to browse an Excel file, import its contents into a SAP Fiori table, review the uploaded records, and save the validated data to the backend.

This approach significantly reduces manual effort, improves data accuracy, and provides a faster user experience.

Solution Overview

In this solution, we use the SheetJS (XLSX) library to read Excel files directly within a SAP UI5 application.

The implementation consists of the following steps:

✔ Integrate the SheetJS library into the SAP UI5 project.

✔ Create a file upload dialog using the FileUploader control.

✔ Allow users to browse and select an Excel file.

✔ Read the selected file using the JavaScript FileReader API.

✔ Convert the Excel worksheet into JSON format using SheetJS.

✔ Map the imported data to a JSON model.

✔ Display the uploaded records in a SAP Fiori table for further processing.

Prerequisites

Before implementing the upload functionality, ensure the following prerequisites are completed:

SAP UI5 application is already created.
Download the latest xlsx.full.min.js (SheetJS) library.
Create a folder named js inside your project.
Place the downloaded library inside the folder.
Register the library in the manifest.json file so that it loads when the application starts.

Step 1: Add the SheetJS Library

Download the xlsx.full.min.js library and copy it into your project’s js folder.

Next, register the library in the manifest.json file:

"resources": {
  "js": [{
      "uri": "js/xlsx.full.min.js"
  }]
}

This ensures the SheetJS library is loaded automatically whenever the application is launched.

Step 2: Create the Upload Dialog

The next step is to create an upload dialog where users can browse and select an Excel file.

Using the SAP UI5 FileUploader control, you can restrict uploads to .xlsx files and provide Upload and Cancel buttons for better user interaction.

The dialog contains:

Browse button
File selection field
Upload button
Cancel button

This keeps the upload process clean and user-friendly.

Step 3: Create the Fiori Table

Once the Excel file is processed, the imported records need to be displayed in a SAP Fiori table.

Define a responsive table and bind it to the JSON model that will hold the imported data.

The toolbar can include:

Record Count
Upload button
Save button

This allows users to verify imported records before saving them into SAP.

Step 4: Open the Upload Dialog

Once the user clicks the Upload button from the toolbar, a dialog should open allowing them to browse and select an Excel file.

Instead of permanently loading the dialog during application startup, SAP UI5 best practices recommend loading the XML Fragment only when required. This improves the application’s initial loading performance and reduces unnecessary memory consumption.

Inside the controller, load the fragment dynamically.

onUpload: function () {

 var oView = this.getView();

 if (!this.byId("idUploadDialog")) {

   Fragment.load({
      id: oView.getId(),
      name: "load.upload.view.fragments.upload",
      controller: this
   }).then(function(oDialog){

      oView.addDependent(oDialog);
      oDialog.open();

   });

 } else {

   this.byId("idUploadDialog").open();

 }

}

Once the upload is completed or cancelled, simply close the dialog.

closeUploadDialog:function(){

   this.byId("idUploadDialog").close();

}

This approach provides a clean user experience while following SAP UI5 development standards.

Step 5: Validate the Selected Excel File

Before reading the Excel file, validate whether the user has selected a file.

if (!fileUploader.getValue()) {

 MessageBox.show("Please browse and choose Excel file");

 return;

}

This simple validation prevents unnecessary processing and avoids runtime errors when no file is selected.

After successful validation, retrieve the selected file using the FileUploader control.

var fileInput = jQuery("#" + fileUploaderId + " input[type='file']")[0];

var file = fileInput.files[0];

At this stage, the application is ready to read the Excel file.

Step 6: Read Excel File using FileReader

The JavaScript FileReader API is used to read the uploaded Excel file.

Since different browsers support different reading mechanisms, the implementation first checks whether Binary String reading is supported.

var reader = new FileReader();

Then read the selected file.

reader.onload = function(e){

 var data = e.target.result;

}

If the browser supports binary reading,

reader.readAsBinaryString(file);

Otherwise,

reader.readAsArrayBuffer(file);

This makes the implementation compatible with almost all modern browsers.

Step 7: Convert Excel into JSON using SheetJS

Once the file is successfully read, use the SheetJS (XLSX) library to convert the worksheet into JSON format.

var wb = XLSX.read(data,{
 type:rABS ? "binary":"array"
});

Read the first worksheet.

workbook.Sheets[workbook.SheetNames[0]]

Convert it into JSON.

X.utils.sheet_to_json(...)

The generated JSON array can now be processed inside the SAP UI5 application.

This is one of the biggest advantages of SheetJS—it eliminates the need for manually parsing rows and columns.

Step 8: Map Imported Data to SAP UI5 Model

After converting the worksheet into JSON, map the imported records to the application’s JSON model.

mapImportedData:function(excelRows){

 this.getView().getModel("uploadDialog").setData({

    excelRows

 });

}

Once the model is updated, the SAP UI5 table automatically refreshes and displays all uploaded records.

This separation between Excel parsing and model binding keeps the code modular and easier to maintain.

Step 9: Display Imported Records

Bind the JSON model to the table.

The imported data is now displayed instantly inside the SAP Fiori application.

Users can now:

Review uploaded records
Modify values if required
Validate business data
Save information to SAP backend

Displaying the uploaded data before saving significantly reduces business errors and improves user confidence.

Step 10: Complete code and output

XML Fragment: Help dialogue

<core:FragmentDefinition xmlns="sap.m" xmlns:core="sap.ui.core" xmlns:l="sap.ui.layout" xmlns:u="sap.ui.unified">

<Dialog id="idUploadDialog" busyIndicatorDelay="0" contentWidth="50%" draggable="true">

<customHeader>

<Bar>

<contentLeft></contentLeft>

<contentMiddle>

<Label text="Upload Excel File"></Label>

</contentMiddle>

<contentRight>

<Button icon="sap-icon://sys-cancel" press="closeUploadDialog"></Button>

</contentRight>

</Bar>

</customHeader>

<content>

<l:Grid vSpacing="0.5" hSpacing="0.5" defaultSpan="XL10 L10 M10 S10" defaultIndent="XL1 L1 M1 S1">

<l:content>

<VBox>

<u:FileUploader id="idFileUploader" buttonText="Browse" fileType="XLSX,xlsx" sameFilenameAllowed="true" placeholder="Excel File Name"

style="Emphasized" width="65%"></u:FileUploader>

</VBox>

</l:content>

</l:Grid>

<Bar class="sapUiSmallMarginTop">

<contentRight>

<Button id="idUploadButton" text="Upload" type="Emphasized" press="onUploadData" visible="true"/>

<Button id="idCancelButton" text="Cancel" press="closeUploadDialog" visible="true"/>

</contentRight>

</Bar>

</content>

</Dialog>

</core:FragmentDefinition>







XML Main View to define Table:

 

<t:Table id="itemsTable" selectionMode="None" fixedColumnCount="10" rows="{itemsModel>/results}">

<t:extension>

<OverflowToolbar>

<Title text="Item Details"/>

<ToolbarSpacer/>

<Text text="Records Count:"/>

<Input value=" " id="count" width="100px" enabled="false"/>

<Button id="upload" text="Upload" icon="sap-icon://excel-attachment" press="onUpload"/>

<Button id="save" text="Save" icon="sap-icon://save" press="onSave"/>

</OverflowToolbar>

</t:extension>

<t:columns>

<!--<t:Column Width="100px" sortProperty="Adjust" filterProperty="Adjust">-->

<!--       <Label text="Adjustment Code"/>-->

<!--       <t:template>-->

<!--                      <Label text="{itemsModel>Adjust}"/>-->

<!--       </t:template>-->

<!--</t:Column>-->

<t:Column Width="120px" minWidth="120px" sortProperty="Distributor" filterProperty="Cust">

<Label text="CustID"/>

<t:template>

<!--<Input value="{itemsModel>Cust}" enabled = "false"/>-->

<Text text="{itemsModel>Cust}"/>

</t:template>

</t:Column>

<t:Column Width="120px" minWidth="120px" sortProperty="Agr" filterProperty="Agr">

<Label text="Agr"/>

<t:template>

<!--<Input value="{itemsModel>Agr}" enabled = "false"/>-->

<Text text="{itemsModel>Agr}"/>

</t:template>

</t:Column>

<t:Column Width="120px" minWidth="120px" sortProperty="End" filterProperty="End">

<Label text="End"/>

<t:template>

<!--<Input value="{itemsModel>End}" enabled = "false"/>-->

<Text text="{itemsModel>End"/>

</t:template>

</t:Column>

</t:columns>

</t:Table>

</content>

</Page>







Controller JS Logic :

 

// On Excel Upload click

onUpload: function (oEvent) {




var oView = this.getView();

if (!this.byId("idUploadDialog")) {

// load asynchronous XML fragment

Fragment.load({

id: oView.getId(),

name: "load.upload.view.fragments.upload",

controller: this

}).then(function (oDialog) {

// connect dialog to the root view of this component (models, lifecycle)

oView.addDependent(oDialog);

oDialog.open();

});

} else {

this.byId("idUploadDialog").open();

}




},




closeUploadDialog: function () {




this.byId("idUploadDialog").close();

},




// On click Upload button on Excel popup

onUploadData: function () {




var dialog = this.getView().byId("idUploadDialog");

var fileUploader = this.getView().byId("idFileUploader");




if (!fileUploader.getValue()) {

MessageBox.show("Please browse for and choose excel file!", {

icon: MessageBox.Icon.WARNING,

title: "WARNING",

actions: [MessageBox.Action.OK]

});

return;

}




dialog.setBusy(true);




var thisController = this;




var fileUploaderId = fileUploader.getId();

var fileInput = jQuery("#" + fileUploaderId + " input[type='file']")[0];

var file = fileInput.files[0];

if (!file) {

return;

}

//From below this line it is code from sheetjs XLSX lib

//*********************************************************

var X = window.XLSX;




// check if browser support read as binary string or not e.g. IE will not support it

var rABS = typeof FileReader !== "undefined" && (FileReader.prototype || {}).readAsBinaryString;




var toJson = function (workbook) {

if (workbook.SheetNames && workbook.SheetNames.length > 0) {

var firstSheetData = X.utils.sheet_to_json(workbook.Sheets[workbook.SheetNames[0]], {

header: 1

});

if (firstSheetData && firstSheetData.length > 0) {

thisController.mapImportedData(firstSheetData);

} else {

thisController.doneImporting();

}

}

};




var reader = new FileReader();

reader.onload = function (e) {

var data = e.target.result;

if (!rABS) {

data = new Uint8Array(data);

}

var wb = X.read(data, {

type: rABS ? "binary" : "array"

});

toJson(wb);

};




if (rABS) {

reader.readAsBinaryString(file);

} else {

reader.readAsArrayBuffer(file);

}




},




doneImporting: function () {

var dialog = this.getView().byId("idUploadDialog");

jQuery.sap.delayedCall(300, this, function () {

dialog.setBusy(false);

this.closeUploadDialog();

});

},

mapImportedData: function (excelRows) {




this.getView().getModel("uploadDialog").setData({

excelRows

});

}

Common Mistakes and Fixes

SheetJS Library Not Loaded

If the XLSX library isn’t registered in manifest.json, the upload functionality will fail.

Solution

Verify that the xlsx.full.min.js file is correctly placed and referenced.

Invalid Excel Format

Uploading CSV or older XLS files may produce unexpected results.

Solution

Allow only .xlsx files in the FileUploader control.

Blank Rows Imported

Empty rows inside Excel are also converted into JSON objects.

Solution

Filter empty records before binding them to the model.

Incorrect Column Mapping

If Excel column headers differ from the expected structure, incorrect data will be displayed.

Solution

Validate column names before processing.

Internal Resources

If you’re troubleshooting upload logic or backend processing, our guide on How to Debug ABAP Programs Effectively will help you trace execution and identify issues quickly.

Once your users can import Excel data successfully, you can also allow them to export processed records by following our guide on Export Data into Excel from SAP Fiori Table with Multiple Tabs using ExcelJS.

🎉 Final Thoughts

Importing Excel data into SAP Fiori applications greatly simplifies business operations by eliminating manual data entry and reducing processing time. Using the SheetJS library, developers can quickly convert Excel worksheets into JSON objects, bind the data to SAP UI5 controls, and prepare it for further validation or backend processing.

This implementation is reusable across multiple SAP Fiori applications and can be enhanced with features such as duplicate checks, mandatory field validation, background processing, and direct database updates. By combining SAP UI5 with SheetJS, organizations can build efficient, user-friendly Excel upload solutions that improve productivity and data accuracy.