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.
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:
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:
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.
Generally, you can use the openSAP Tutorial Fiori Elements to create an Adaptation Project:
https://github.com/SAP-samples/fiori-elements-opensap/blob/main/week4/unit3.md
Vitor has written an excellent blog post outlining the steps we will be following: https://blogs.sap.com/2022/01/26/sap-fiori-elements-adaptation-project-adding-a-custom-filter-to-the...
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.
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.
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.
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:
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 "customer.app.finbank.OverflowToolbar".
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:
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.
The app's deployment is described in the documentation.
As an example, here is the complete app that has been created in BAS and published on GitHub:
https://github.com/marianfoo/manage-bank-excelupload
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.
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 https://github.com/marianfoo/ui5-cc-spreadsheetimporter
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:
https://github.com/SAP-samples/fiori-elements-opensap/blob/main/week4/unit3.md
Vitor has written an excellent blog post outlining the steps we will be following: https://blogs.sap.com/2022/01/26/sap-fiori-elements-adaptation-project-adding-a-custom-filter-to-the...
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:
/***
@controller Name:fin.cash.bankmaster.manage.controller.ManageBanks,
*@viewId:application-adaptationproject-display-component---ManageBanks
*/
/*!
* OpenUI5
* (c) Copyright 2009-2021 SAP SE or an SAP affiliate company.
* Licensed under the Apache License, Version 2.0 - see LICENSE.txt.
*/
sap.ui.define([
'sap/ui/core/mvc/ControllerExtension'
],
function (
ControllerExtension
) {
"use strict";
return ControllerExtension.extend("customer.app.finbank.OverflowToolbar", {
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"
}
}
)
spreadsheetUploadComponent.openSpreadsheetUploadDialog()
}
});
});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 "customer.app.finbank.OverflowToolbar".
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=".extension.customer.app.finbank.OverflowToolbar.onUpload"/>
</core:FragmentDefinition>Preview
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
Deployment
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:
https://github.com/marianfoo/manage-bank-excelupload
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.
Disclaimer
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
- Landing Page Spreadsheet Importer
- Documentation Spreadsheet Importer
- Live Demo Spreadsheet Importer
- GitHub Repository Spreadsheet Importer
- openSAP Course Adaption Project
- SAP Help Adapation Project
More Blog Posts about the Spreadsheet Importer
- Simplifying Excel Upload in Fiori Elements: The Open Source and Easy-to-Use UI5 Custom Control
- Load Data from a Excel File in UI5 and display the data in a Table with this Open Source Component
- Create a UI5 custom library with versioning using a multi version namespace
- Automating UI5 Testing with GitHub Actions and wdi5 in multiple scenarios
- SAP Managed Tags:
9 Comments
