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