You have a RAP Based Service Named: ZFSCM_UI_FDM_COMMENTS_O2
Step 1: Set Up the UI5 Project in Web IDE
- Open SAP Business Application Studio (BAS) or SAP Web IDE.
- Create a New UI5 Application:
- Select File > New > Project from Template.
- Choose SAP Fiori Application.
- Select List Report Object Page .
- Click Next and provide details:
- Namespace: com.yourcompany.excelupload
- Project Name: ExcelUploadApp
- OData Service: Connect to your RAP-based OData V2 service.
Step 2: Configure Dependencies
- Update package.json to include xlsx.bundle.js:
As there is no SAP-provided XLSX bundle, we have to manually provide the Third party library in the project.
So, Create a 'thirdparty' folder in webapp and upload xlsx.bundle.js removing '.txt' extension, over there.
"dependencies": {
"@sap/ux-ui5-tooling": "1",
"@ui5/cli": "^3.0.0",
"xlsx": "^0.18.5"
}
- Update ui5.yaml to include proxy settings for OData:
with XXXXX have to replaced with your client details and client
server:
customMiddleware:
- name: fiori-tools-proxy
configuration:
backend:
- path: /sap
url: http://your-sap-system-url:XXXXX
client: "100"
Step 3: Create the Upload UI
- Create a Fragment: ExcelUpload.fragment.xml
- Ensure UploadSet component is used for handling file uploads.
<core:FragmentDefinition xmlns="sap.m" xmlns:l="sap.ui.layout" xmlns:core="sap.ui.core" xmlns:u="sap.ui.unified" xmlns:upload="sap.m.upload">
<Dialog id="uploadDialogSet" title="Excel Upload">
<content>
<upload:UploadSet uploadEnabled="true" id="uploadSet"
items="{path: '/', templateShareable: false}" fileTypes="xlsx, xls" maxFileNameLength="200"
beforeUploadStarts="onBeforeUploadStart" uploadCompleted="onUploadSetComplete" afterItemRemoved="onItemRemoved"
terminationEnabled="true">
<upload:UploadSetItem id="idUSI" visibleRemove="true" visibleEdit="false" fileName="{name}" url="/upload">
<upload:attributes>
<ObjectAttribute id="idOA" title="Uploaded by" text="{user}" active="false"/>
</upload:attributes>
</upload:UploadSetItem>
</upload:UploadSet>
<!-- <u:FileUploader
id="fileUploader"
name="myFileUpload"
uploadUrl="upload/"
tooltip="Upload your file to the local server"
uploadComplete="handleUploadComplete"/> -->
</content>
<buttons>
<!-- <Button id="idBtnD" text="Template" press="onTempDownload" icon="sap-icon://download-from-cloud" type="Emphasized"/> -->
<Button id="idBtnU" text="Upload" press="onUploadSet" icon="sap-icon://upload-to-cloud" type="Emphasized"/>
<Button id="idBtnC" press="onCloseDialog" text="Cancel" icon="sap-icon://cancel"/>
</buttons>
<endButton>
<Button id="idBtnClose" press=".onCloseDialog" text="Ok"/>
</endButton>
</Dialog>
</core:FragmentDefinition>
Step 4: Implement Upload Logic
Modify the ListReportExt.controller.js (already provided) to:
- Handle file upload.
- Parse Excel data using xlsx.bundle.js.
- Send the data to the OData service.
sap.ui.define([
"sap/m/MessageToast",
"sap/ui/core/Fragment",
"com/sap/fscm/massupload/thirdparty/xlsx"
], function (MessageToast, Fragment, XLSX) {
"use strict";
return {
excelSheetsData: [],
pDialog: null,
onExcelUploadDialog: function () {
if (!this.pDialog) {
Fragment.load({
id: "excel_upload",
name: "com.sap.fscm.massupload.ext.fragment.ExcelUpload",
type: "XML",
controller: this,
}).then((oDialog) => {
this.pDialog = oDialog;
this.pDialog.open();
});
} else {
this.pDialog.open();
}
},
onUploadSetComplete: function (oEvent) {
var oFileUploader = Fragment.byId("excel_upload", "uploadSet");
var oFile = oFileUploader.getItems()[0].getFileObject();
var reader = new FileReader();
var that = this;
reader.onload = function (e) {
let xlsx_content = e.target.result;
let workbook = XLSX.read(xlsx_content, { type: "binary" });
workbook.SheetNames.forEach(function (sheetName) {
that.excelSheetsData.push(
XLSX.utils.sheet_to_row_object_array(workbook.Sheets[sheetName])
);
});
MessageToast.show("Upload Successful");
};
reader.readAsBinaryString(oFile);
},
onUploadSet: function () {
if (!this.excelSheetsData.length) {
MessageToast.show("No file selected");
return;
}
var oModel = this.getView().getModel();
var that = this;
this.excelSheetsData[0].forEach((row, index) => {
var payload = {
Customer: row["Customer ID"] || "",
CompanyCode: row["Company Code"] || "",
FiscalYear: row["Fiscal Year"] || "",
Transctn: row["Transaction"] || "",
LineItem: row["Line Item"] || "",
Notes: row["Notes"] || "",
ExcelRowNumber: index + 1
};
oModel.create("/CustomerNotes", payload, {
success: function () {
MessageToast.show("Data uploaded successfully");
},
error: function (error) {
console.error(error);
}
});
});
this.pDialog.close();
},
onCloseDialog: function () {
this.excelSheetsData = [];
this.pDialog.close();
}
};
});
Step 5: Enable OData Connection
- Modify manifest.json (already configured)
- Ensure your OData service is correctly mapped:
"dataSources": {
"mainService": {
"uri": "/sap/opu/odata/sap/ZFSCM_UI_FDM_COMMENTS_O2/",
"type": "OData",
"settings": {
"odataVersion": "2.0"
}
}
}
"models": {
"": {
"dataSource": "mainService",
"settings": {
"defaultBindingMode": "TwoWay"
}
}
}
Step 6: Test & Deploy
Run the App Locally
Run Commands in Console.
npm install
npm run start
npm run build
fiori deploy --config ui5-deploy.yaml
Summary of Features
✅Upload Excel File
✅Parse Excel Data using xlsx.bundle.js
✅Send Data to OData V2 Service
✅Handle Upload Completion & Errors
