Excel Upload in a Web IDE Project for a RAP Based Odata V2 Service

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 (if you need to extend an existing app).Click Next and provide details:Namespace: com.yourcompany.exceluploadProject Name: ExcelUploadAppOData Service: Connect to your RAP-based OData V2 service.

Step 2: Configure Dependencies

Update package.json (from your provided file) 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.

“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(This is already provided in your ExcelUpload.fragment.xml file.)Ensure UploadSet component is used for handling file uploads.

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”
}
}
}

Bind it to a model:

“models”: {
“”: {
“dataSource”: “mainService”,
“settings”: {
“defaultBindingMode”: “TwoWay”
}
}
}

Step 6: Test & Deploy

Run the App Locally
Run Commands in Console

npm install
npm run start

Deploy to SAP System

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

You have a RAP Based Service Named: ZFSCM_UI_FDM_COMMENTS_O2Step 1: Set Up the UI5 Project in Web IDEOpen 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 (if you need to extend an existing app).Click Next and provide details:Namespace: com.yourcompany.exceluploadProject Name: ExcelUploadAppOData Service: Connect to your RAP-based OData V2 service.Step 2: Configure DependenciesUpdate package.json (from your provided file) 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.  “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 UICreate a Fragment: ExcelUpload.fragment.xml(This is already provided in your ExcelUpload.fragment.xml file.)Ensure UploadSet component is used for handling file uploads.  <Dialog id=”uploadDialogSet” title=”Excel Upload”>
<content>
<upload:UploadSet id=”uploadSet” fileTypes=”xlsx, xls” maxFileNameLength=”200″
uploadCompleted=”onUploadSetComplete” afterItemRemoved=”onItemRemoved”>
</upload:UploadSet>
</content>
<buttons>
<Button text=”Upload” press=”onUploadSet” icon=”sap-icon://upload-to-cloud”/>
<Button text=”Cancel” press=”onCloseDialog” icon=”sap-icon://cancel”/>
</buttons>
</Dialog>
  Step 4: Implement Upload LogicModify 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,

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;

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 ConnectionModify 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”
}
}
}   Bind it to a model:  “models”: {
“”: {
“dataSource”: “mainService”,
“settings”: {
“defaultBindingMode”: “TwoWay”
}
}
}  Step 6: Test & DeployRun the App LocallyRun Commands in Console  npm install
npm run start  Deploy to SAP System  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    Read More Technology Blogs by SAP articles