Technology Blogs by Members
Explore a vibrant mix of technical expertise, industry insights, and tech buzz in member blogs covering SAP products, technology, and events. Get in the mix!
Showing results for 
Search instead for 
Did you mean: 
Active Contributor
Excel files remain an essential backbone in every company, big or small. Therefore, it's not only crucial to integrate an Excel upload into a self-developed app but also to add it to standard apps.

In this blog post, I'll demonstrate how to integrate the open-source component "Spreadsheet Importer" into the SAP standard Fiori app called "Manage Banks." Depending on the app's structure, it should theoretically work with any SAP standard app. I haven't tried many myself, so it might not work with certain apps. However, this component can certainly be added to any self-developed Fiori app.

Deploying Spreadsheet Importer

We use the Business Application Studio and the Adaptation Project for this. With the Adaptation Project, it's possible to integrate a personal reuse component into the app. To use it, we need to deploy the Spreadsheet Importer component into our system first.

In the Business Application Studio, we'll copy the Spreadsheet Importer and install all necessary dependencies:
git clone
cd packages packages/ui5-cc-spreadsheetimporter
npm install

Now, there's a dedicated ui5-deploy.yaml file that needs to be modified. The "target", "client", "username/password", "package", and "transport" must be adjusted.

After these adjustments, the deploy script can be executed in the folder:
npm run deploy

More information can be found in the related documentation. It's essential to note that each Spreadsheet Importer version is a separate BSP application.

Now, this component is available in the system, and other applications can use it.

Creating an Adaptation Project

Generally, you can use the openSAP Tutorial Fiori Elements to create an Adaptation Project:

Vitor has written an excellent blog post outlining the steps we will be following:


Adding the Component

The first step is to add the component. Right-click on the "webapp" folder, select "Adaptation Project," then choose "Add SAPUI5 Component Usages".

Next, assign the Component Usage ID "customer.upload" and the Component name "cc.spreadsheetimporter.v0_24_0". Especially for the component name, ensure the deployed version matches the namespace. A "change" file should then be created that might look something like this.

Adding custom XML and custom controller

Add custom XML fragment

Next, we'll add a button to the toolbar to call up the upload component.

First enter the Visual Editor by right-click on the webapp folder, got to "Adaption Project" and "Open SAPUI5 Visual Editor", then enter "Edit" mode.

Right-click on the toolbar and select "Add Fragment" to insert an XML fragment.

Choose the position with "Index" and create a new fragment named "excelupload". This will create a "change" file and the fragment.xml.

The "change" file could look like this.

Add Controller Extension

Now, create the Controller Extension to call the component. In "Edit" Mode, right-click on the toolbar and select "Extend with Controller". Name it "OverflowToolbar". This will add another "change" file and the "OverflowToolbar.js" file.

The "change" file could look like this.

Adjusting XML and Code

Controller Extension

First, add a method to the Controller Extension that calls the Spreadsheet Importer component. This can be done with "createComponent" from the "ownerComponent".
The "usage" parameter refers to the name assigned when creating the component. Options specified in "componentData" are provided in the documentation.
The mandatory option is "context", allowing the component to access the application to call the OData Services.

Specifically for the "Manage Bank" app, the parameter "odataType: "FCLM_BM_SRV.Bank" is used, as the EntitySet in the List Report isn't the same EntitySet used for uploading bank data. The List Report uses the "AnalyticalBank" entity, whereas the data is uploaded with the "Bank" entity.

The way it functions is by checking the view to see which sap.m.Table is present, then accessing the bindings and corresponding OData services. This means there's hardly any need for custom code.

The final controller extension can look like this:
* OpenUI5
* (c) Copyright 2009-2021 SAP SE or an SAP affiliate company.
* Licensed under the Apache License, Version 2.0 - see LICENSE.txt.

function (
) {
"use strict";
return ControllerExtension.extend("", {

async onUpload(event) {
const spreadsheetUploadComponent = await this.base.getView().getController().getOwnerComponent().createComponent(
usage: "customer.upload",
async: true,
componentData: {
context: this,
odataType: "FCLM_BM_SRV.Bank"

XML Fragment

Next, add a button to the fragment xml. A sap.m.Button can be placed between the FragmentDefinition.
Make sure to assign an ID and link the press event to the Controller Extension.
The press event must have ".extension" as a prefix, as documented.
Then comes the namespace, which can be read from the Controller Extension file. In our case, it's "".
This is followed by the method name that calls our component, in our case "onUpload". Here's the complete XML.

The final XML Fragment can look like this:
<core:FragmentDefinition xmlns:core='sap.ui.core' xmlns='sap.m'>
<Button id="excelUpload" text="Upload" press=""/>


Now, the app can be previewed, and the Spreadsheet Importer used in the List Report. First, download the template and fill it out. Once that's done, upload the template and send the data to the backend.

Open Preview in BAS

Open Spreadsheet Importer Dialog


Upload Data


The app's deployment is described in the documentation.

Complete App

As an example, here is the complete app that has been created in BAS and published on GitHub:
Do not use this app or deploy it to the system but always start with your own adaptation project in BAS.
This serves only as an example.


This is just a sample implementation for a standard SAP Fiori app. Whether it works the same way with other apps depends on the individual app, as there are many different applications, each with custom code and specific OData services. It's crucial to thoroughly test if this approach works for your desired Fiori app.

Further Links

More Blog Posts about the Spreadsheet Importer

Labels in this area