Technical Articles
Excel Upload using RAP: Part -2
Links to other blogs post in this series –
Introduction
In continuous to the previous blog post (Excel Upload using RAP: Part -1 | SAP Blogs), where I have discussed about the creation of an basic OData service using RAP Model.
This is the second part of 3 blog post series, to develop a solution on uploading data to custom database table using SAP RAP Model using the Fiori Interface.
In this blog post, we will be creating a Fiori Elements application using the tools provided in SAP Business Application Studio (BAS).
Here I will be using the SAP BTP Trial Account for creating this Application
Prerequisites
- SAP Business Application Studio in your respective BTP Trial Account
- Basics of using the Fiori Element App Generator Extension
- Fragments in SAPUI5
- Using UploadSet Control
Note: You also can use the File Uploader control for uploading the file. I am using the UploadSet Controller for learning purpose only.
Lets first initialize the Fiori Application using the Fiori App Generator in SAP Business Application Studio –
The below video shows steps involved in generating the App –
Lets Start !!!
Once the basic app has been generated, then we will be using Fiori Guided Development tools to add an Custom Button “Excel Upload”. Step for adding a custom button to the app –
Step – 6: Create a new fragment ExcelUpload.fragment.XML in the folder ext\fragment, add the SAPUI5 Control UploadSet, which will be used for uploading the file.
<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 visibleRemove="true" visibleEdit="false" fileName="{name}" url="/upload">
<upload:attributes>
<ObjectAttribute title="Uploaded by" text="{user}" active="false"/>
</upload:attributes>
</upload:UploadSetItem>
</upload:UploadSet>
</content>
<buttons>
<Button text="Template" press="onTempDownload" icon="sap-icon://download-from-cloud" type="Emphasized"/>
<Button text="Upload" press="onUploadSet" icon="sap-icon://upload-to-cloud" type="Emphasized"/>
<Button press="onCloseDialog" text="Cancel" icon="sap-icon://cancel"/>
</buttons>
<endButton>
<Button press=".onCloseDialog" text="Ok"/>
</endButton>
</Dialog>
</core:FragmentDefinition>
Step – 7: Adding button press event handler for the button present in the UploadSet control in the file ListReportExt.controller.js
sap.ui.define(["sap/ui/core/Fragment"],
function (Fragment){
"use strict";
return {
openExcelUploadDialog: function(oEvent) {
var oView = this.getView();
if (!this.pDialog) {
Fragment.load({
id: "excel_upload",
name: "v2.pgms.building.ext.fragment.ExcelUpload",
type: "XML",
controller: this
}).then((oDialog) => {
var oFileUploader = Fragment.byId("excel_upload", "uploadSet");
oFileUploader.removeAllItems();
this.pDialog = oDialog;
this.pDialog.open();
})
.catch(error => alert(error.message));
} else {
var oFileUploader = Fragment.byId("excel_upload", "uploadSet");
oFileUploader.removeAllItems();
this.pDialog.open();
}
},
onUploadSet: function(oEvent) {
console.log("Upload Button Clicked!!!")
/* TODO:Call to OData */
},
onTempDownload: function (oEvent) {
console.log("Template Download Button Clicked!!!")
/* TODO: Excel file template download */
},
onCloseDialog: function (oEvent) {
this.pDialog.close();
},
onBeforeUploadStart: function (oEvent) {
console.log("File Before Upload Event Fired!!!")
/* TODO: check for file upload count */
},
onUploadSetComplete: function (oEvent) {
console.log("File Uploaded!!!")
/* TODO: Read excel file data*/
},
onItemRemoved:function (oEvent) {
console.log("File Remove/delete Event Fired!!!")
/* TODO: Clear the already read excel file data */
}
};
});
Application Preview (after step 5)
Now right click on the project folder to preview the application –
On click of the button, the below popup is getting displayed.
Application Preview
Run the Application in preview mode –
On Click of the Excel Upload button you can see the opening of the ExcelUpload fragment
Conclusion
And there you have learned how to create a Fiori Application with a Custom Action Button on the list report and also opening the fragment in which the UploadSet Control has been implemented.
Thanks for reading this post, I would like to read your thoughts in the comments !!!
In the next blog post, we will be implementing the excel upload logic to the Custom Action Button (Upload).
Looking forward to your update!!!
Hello @Namasivayam Mani,
Any update on the Part-3 of this Excel upload blog. I have the same requirement.
Regards,
Rajesh Maripeddi
Hi @Namasivayam Mani,
Please update the part 3 of this Excel upload blog..Exactly the same requirement I have in my project.
Regards,
Manish Gupta
Hi rajesh maripeddi 晓宇 刘 Imtiyaz Ahmed,
Apologies for the delay I have published the Part 3 of blog post series.
Please have a look, let me know you thoughts on this.
Regards,
Namasivayam
Hello Namasivayam Mani
Thanks for the update. Very nice blog.
The challenge I can see in this, this will read the each line and then update to backend but if we upload the file with many record then then there will be chance of failure or time consuming. For small number of entries it will work fine.
Secondly, you have used the third party library xlsx which in most of our client will not agree upon.
What we did in our project, we have developed a backend transaction for file upload and then that transaction we have call on button click as a popup via assigning in target mapping.
As the whole program runs in back ground, with our huge data seems there could not be much chances of failure or load on system due to to n from between UI and Backend.
Yes we have face some challenges related to hiding some of the backend buttons.
Please add some comments or thought on our approach.
Appreciate your work.
Thanks,
Rajesh Maripeddi
Hi rajesh maripeddi
Thank you!!!
I agree that for bulk data upload, there might be some chances of failure which I need to test.
Also my thoughts on writing this blog post was to do the excel file reading in the browser and send the read data to the backend for processing.
As I can see that in your implementation you are using background processing for excel processing which is also an another way of doing it(
) and which I did not thought of.
Regards,
Namasivayam
Hello Rajesh ,
That's a Nice Approach.
We have kind of similar requirement. Uploading data in the master lost from the Excel.
and we want to Do it completely from the backend Side.
Can you please me with your code Snippets , how you were able to achieve this.
Thanks and Best Regards ,
Shavneet Singh
Hello Rajesh ,
Could you please reply.
Thanks and Regards ,
Shavneet Singh